diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss
index 85aa65106..044ae0e4c 100644
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@@ -128,53 +128,29 @@ pre[class*="language-"] {
     display: none;
 }
 
-.layout-dark {
-    .doc-section-code-buttons {
-        button {
-            outline: 0 none;
-            outline-offset: 0;
-            background-color: transparent;
-            transition: background-color .2s, box-shadow .2s;
-            border: 0 none;
-            color: var(--surface-400);
-            cursor: pointer;
+.doc-section-code-buttons {
+    button {
+        outline: 0 none;
+        outline-offset: 0;
+        background-color: transparent;
+        transition: background-color .2s, box-shadow .2s;
+        border: 0 none;
+        color: var(--demo-code-button-color);
+        cursor: pointer;
 
-            &:hover {
-                background-color: rgba(255,255,255,.1);
-                color: var(--surface-500);
-            }
+        &:hover {
+            background-color: var(--demo-code-button-hover-bg);
+            color: var(--demo-code-button-hover-color);
         }
     }
-    pre[class*="language-"] {    
-        code {
-            background: var(--surface-card) !important;
-        }
+}
+pre[class*="language-"] {    
+    code {
+        background: var(--demo-code-bg) !important;
     }
 }
 
 .layout-light {
-    .doc-section-code-buttons {
-        button {
-            outline: 0 none;
-            outline-offset: 0;
-            background-color: transparent;
-            transition: background-color .2s, box-shadow .2s;
-            border: 0 none;
-            color: var(--surface-400);
-            cursor: pointer;
-
-            &:hover {
-                background-color: rgba(255,255,255,.1);
-                color: var(--surface-300);
-            }
-        }
-    }
-    pre[class*="language-"] {    
-        code {
-            background: var(--surface-700) !important;
-        }
-    }
-
     &[data-p-theme^="md-"] {
         pre[class*="language-"] {    
             code {
diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss
index 10012dc3f..d60687945 100644
--- a/assets/styles/layout/_content.scss
+++ b/assets/styles/layout/_content.scss
@@ -9,22 +9,10 @@
     }
 }
 
-.layout-light {
-    .card {
-        background: var(--surface-card);
-        border: 1px solid var(--surface-border);
-        padding: 2rem;
-        border-radius: 10px;
-        margin-bottom: 1rem;
-    }
-}
-
-.layout-dark {
-    .card {
-        background: var(--surface-card);
-        border: 0 none;
-        padding: 2rem;
-        border-radius: 10px;
-        margin-bottom: 1rem;
-    }
+.card {
+    background: var(--surface-card);
+    border: var(--card-border);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
 }
diff --git a/assets/styles/layout/landing/_dark.scss b/assets/styles/layout/landing/_dark.scss
index 55930df9e..6d7c712b7 100644
--- a/assets/styles/layout/landing/_dark.scss
+++ b/assets/styles/layout/landing/_dark.scss
@@ -1,7 +1,13 @@
 .layout-dark {
+    --card-border: 0 none;
+    --card-bg: var(--surface-card);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
     --topbar-border: var(--surface-border);
     --mobile-menu-bg: rgba(0,0,0,.3);
+    --demo-code-bg: var(--surface-card);
+    --demo-code-button-color: var(--surface-400);
+    --demo-code-button-hover-bg: rgba(255,255,255,.1);
+    --demo-code-button-hover-color: var(--surface-500);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;
diff --git a/assets/styles/layout/landing/_light.scss b/assets/styles/layout/landing/_light.scss
index 0315351a2..388c12abc 100644
--- a/assets/styles/layout/landing/_light.scss
+++ b/assets/styles/layout/landing/_light.scss
@@ -1,7 +1,12 @@
 .layout-light {
+    --card-border: 1px solid var(--surface-border);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
     --topbar-border: rgba(0,0,0,.05);
     --mobile-menu-bg: var(--surface-overlay);
+    --demo-code-bg: var(--surface-700);
+    --demo-code-button-color: var(--surface-400);
+    --demo-code-button-hover-bg: rgba(255,255,255,.1);
+    --demo-code-button-hover-color: var(--surface-300);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;