diff --git a/assets/styles/layout/landing/_landing.scss b/assets/styles/layout/landing/_landing.scss
index a882fcdb2..a02515e11 100644
--- a/assets/styles/layout/landing/_landing.scss
+++ b/assets/styles/layout/landing/_landing.scss
@@ -4,8 +4,6 @@ $landingBreakpointXL: 1199px;
 
 @import '../_mixins';
 @import './_main';
-@import './_light';
-@import './_dark';
 @import './_hero';
 @import './_users';
 @import './_getstarted';
diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss
index 74f723e75..1d790164d 100644
--- a/assets/styles/layout/layout.scss
+++ b/assets/styles/layout/layout.scss
@@ -1,5 +1,6 @@
 @charset 'UTF-8';
 
+@import './variables/_variables';
 @import './_mixins';
 @import './_core';
 @import './_glow';
diff --git a/assets/styles/layout/variables/_variables.scss b/assets/styles/layout/variables/_variables.scss
new file mode 100644
index 000000000..82efa8da7
--- /dev/null
+++ b/assets/styles/layout/variables/_variables.scss
@@ -0,0 +1,4 @@
+@import './landing/_light';
+@import './landing/_dark';
+@import './main/_light';
+@import './main/_dark';
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_dark.scss b/assets/styles/layout/variables/landing/_dark.scss
similarity index 83%
rename from assets/styles/layout/landing/_dark.scss
rename to assets/styles/layout/variables/landing/_dark.scss
index 6d7c712b7..ae1b9d605 100644
--- a/assets/styles/layout/landing/_dark.scss
+++ b/assets/styles/layout/variables/landing/_dark.scss
@@ -1,13 +1,4 @@
-.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);
+.landing.layout-dark {
     --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/variables/landing/_light.scss
similarity index 85%
rename from assets/styles/layout/landing/_light.scss
rename to assets/styles/layout/variables/landing/_light.scss
index 388c12abc..314bc62bf 100644
--- a/assets/styles/layout/landing/_light.scss
+++ b/assets/styles/layout/variables/landing/_light.scss
@@ -1,12 +1,4 @@
-.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);
+.landing.layout-light {
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;
diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
new file mode 100644
index 000000000..7c2020903
--- /dev/null
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -0,0 +1,11 @@
+.layout-wrapper.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);
+}
\ No newline at end of file
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
new file mode 100644
index 000000000..dc8d2a5a1
--- /dev/null
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -0,0 +1,11 @@
+.layout-wrapper.layout-light {
+    --card-border: 1px solid var(--surface-border);
+    --card-bg: var(--surface-card);
+    --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);
+}
\ No newline at end of file