Cosmetics on demos

assets/styles/layout/_code.scss

@@ -286,8 +286,6 @@ pre[class*="language-"] {
     code {
         border-left: 1rem solid transparent !important;
         box-shadow: none !important;
-        background: #505b67
-        !important;
         margin: 0;
         color: var(--gray-0);
         font-size: 14px;
@@ -345,4 +343,20 @@ pre[class*="language-"] {
 
 .copy-to-clipboard-button {
     display: none;
+}
+
+.layout-wrapper-dark {
+    pre[class*="language-"] {    
+        code {
+            background: var(--surface-card) !important;
+        }
+    }
+}
+
+.layout-wrapper-light {
+    pre[class*="language-"] {    
+        code {
+            background: #505b67 !important;
+        }
+    }
 }

assets/styles/layout/_content.scss

@@ -6,8 +6,24 @@
         display: flex;
         gap: 4rem;
     }
+}
 
+.layout-wrapper-light {
     .card {
-        @include card;
+        background: var(--surface-ground);
+        border: 1px solid var(--surface-border);
+        padding: 2rem;
+        border-radius: 10px;
+        margin-bottom: 1rem;
+    }
+}
+
+.layout-wrapper-dark {
+    .card {
+        background: var(--surface-card);
+        border: 0 none;
+        padding: 2rem;
+        border-radius: 10px;
+        margin-bottom: 1rem;
     }
 }

assets/styles/layout/_doc.scss

@@ -247,14 +247,12 @@
 
 .doc-tablewrapper {
     overflow: auto;
-    @include card;
 }
 
 .doc-table {
     border-collapse: collapse;
     width: 100%;
     min-width: 960px;
-    background-color: var(--surface-card);
     margin-bottom: 1.5rem;
 
     th {