diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index d7d761e17..bc10ea0a0 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -23,4 +23,19 @@
     --selection-text-color: rgba(255,255,255,.87);
     --code-button-text-color: var(--p-surface-300);
     --docsearch-mask-background: var(--p-mask-background);
+}
+
+/* PrimeFlex Compat */
+:root[class="p-dark"] {
+    --surface-0: var(--p-surface-900);
+    --surface-50: var(--p-surface-800);
+    --surface-100: var(--p-surface-700);
+    --surface-200: var(--p-surface-600);
+    --surface-300: var(--p-surface-500);
+    --surface-400: var(--p-surface-400);
+    --surface-500: var(--p-surface-300);
+    --surface-600: var(--p-surface-200);
+    --surface-700: var(--p-surface-100);
+    --surface-800: var(--p-surface-50);
+    --surface-900: var(--p-surface-0);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index 2bfce1182..ec6a09007 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -23,4 +23,19 @@
     --selection-text-color: var(--p-primary-700);
     --code-button-text-color: var(--p-surface-300);
     --docsearch-mask-background: var(--p-mask-background);
+}
+
+/* Compat */
+:root {
+    --surface-0: var(--p-surface-0);
+    --surface-50: var(--p-surface-50);
+    --surface-100: var(--p-surface-100);
+    --surface-200: var(--p-surface-200);
+    --surface-300: var(--p-surface-300);
+    --surface-400: var(--p-surface-400);
+    --surface-500: var(--p-surface-500);
+    --surface-600: var(--p-surface-600);
+    --surface-700: var(--p-surface-700);
+    --surface-800: var(--p-surface-800);
+    --surface-900: var(--p-surface-900);
 }
\ No newline at end of file
diff --git a/assets/styles/primeflex/primeflex-compat.css b/assets/styles/primeflex/primeflex-compat.css
index 071b891b5..bad3e3d66 100644
--- a/assets/styles/primeflex/primeflex-compat.css
+++ b/assets/styles/primeflex/primeflex-compat.css
@@ -606,531 +606,531 @@
     }
   }
   .text-0 {
-    color: var(--p-surface-0) !important;
+    color: var(--surface-0) !important;
   }
   
   .text-50 {
-    color: var(--p-surface-50) !important;
+    color: var(--surface-50) !important;
   }
   
   .text-100 {
-    color: var(--p-surface-100) !important;
+    color: var(--surface-100) !important;
   }
   
   .text-200 {
-    color: var(--p-surface-200) !important;
+    color: var(--surface-200) !important;
   }
   
   .text-300 {
-    color: var(--p-surface-300) !important;
+    color: var(--surface-300) !important;
   }
   
   .text-400 {
-    color: var(--p-surface-400) !important;
+    color: var(--surface-400) !important;
   }
   
   .text-500 {
-    color: var(--p-surface-500) !important;
+    color: var(--surface-500) !important;
   }
   
   .text-600 {
-    color: var(--p-surface-600) !important;
+    color: var(--surface-600) !important;
   }
   
   .text-700 {
-    color: var(--p-surface-700) !important;
+    color: var(--surface-700) !important;
   }
   
   .text-800 {
-    color: var(--p-surface-800) !important;
+    color: var(--surface-800) !important;
   }
   
   .text-900 {
-    color: var(--p-surface-900) !important;
+    color: var(--surface-900) !important;
   }
   
   .focus\:text-0:focus {
-    color: var(--p-surface-0) !important;
+    color: var(--surface-0) !important;
   }
   
   .hover\:text-0:hover {
-    color: var(--p-surface-0) !important;
+    color: var(--surface-0) !important;
   }
   
   .active\:text-0:active {
-    color: var(--p-surface-0) !important;
+    color: var(--surface-0) !important;
   }
   
   .focus\:text-50:focus {
-    color: var(--p-surface-50) !important;
+    color: var(--surface-50) !important;
   }
   
   .hover\:text-50:hover {
-    color: var(--p-surface-50) !important;
+    color: var(--surface-50) !important;
   }
   
   .active\:text-50:active {
-    color: var(--p-surface-50) !important;
+    color: var(--surface-50) !important;
   }
   
   .focus\:text-100:focus {
-    color: var(--p-surface-100) !important;
+    color: var(--surface-100) !important;
   }
   
   .hover\:text-100:hover {
-    color: var(--p-surface-100) !important;
+    color: var(--surface-100) !important;
   }
   
   .active\:text-100:active {
-    color: var(--p-surface-100) !important;
+    color: var(--surface-100) !important;
   }
   
   .focus\:text-200:focus {
-    color: var(--p-surface-200) !important;
+    color: var(--surface-200) !important;
   }
   
   .hover\:text-200:hover {
-    color: var(--p-surface-200) !important;
+    color: var(--surface-200) !important;
   }
   
   .active\:text-200:active {
-    color: var(--p-surface-200) !important;
+    color: var(--surface-200) !important;
   }
   
   .focus\:text-300:focus {
-    color: var(--p-surface-300) !important;
+    color: var(--surface-300) !important;
   }
   
   .hover\:text-300:hover {
-    color: var(--p-surface-300) !important;
+    color: var(--surface-300) !important;
   }
   
   .active\:text-300:active {
-    color: var(--p-surface-300) !important;
+    color: var(--surface-300) !important;
   }
   
   .focus\:text-400:focus {
-    color: var(--p-surface-400) !important;
+    color: var(--surface-400) !important;
   }
   
   .hover\:text-400:hover {
-    color: var(--p-surface-400) !important;
+    color: var(--surface-400) !important;
   }
   
   .active\:text-400:active {
-    color: var(--p-surface-400) !important;
+    color: var(--surface-400) !important;
   }
   
   .focus\:text-500:focus {
-    color: var(--p-surface-500) !important;
+    color: var(--surface-500) !important;
   }
   
   .hover\:text-500:hover {
-    color: var(--p-surface-500) !important;
+    color: var(--surface-500) !important;
   }
   
   .active\:text-500:active {
-    color: var(--p-surface-500) !important;
+    color: var(--surface-500) !important;
   }
   
   .focus\:text-600:focus {
-    color: var(--p-surface-600) !important;
+    color: var(--surface-600) !important;
   }
   
   .hover\:text-600:hover {
-    color: var(--p-surface-600) !important;
+    color: var(--surface-600) !important;
   }
   
   .active\:text-600:active {
-    color: var(--p-surface-600) !important;
+    color: var(--surface-600) !important;
   }
   
   .focus\:text-700:focus {
-    color: var(--p-surface-700) !important;
+    color: var(--surface-700) !important;
   }
   
   .hover\:text-700:hover {
-    color: var(--p-surface-700) !important;
+    color: var(--surface-700) !important;
   }
   
   .active\:text-700:active {
-    color: var(--p-surface-700) !important;
+    color: var(--surface-700) !important;
   }
   
   .focus\:text-800:focus {
-    color: var(--p-surface-800) !important;
+    color: var(--surface-800) !important;
   }
   
   .hover\:text-800:hover {
-    color: var(--p-surface-800) !important;
+    color: var(--surface-800) !important;
   }
   
   .active\:text-800:active {
-    color: var(--p-surface-800) !important;
+    color: var(--surface-800) !important;
   }
   
   .focus\:text-900:focus {
-    color: var(--p-surface-900) !important;
+    color: var(--surface-900) !important;
   }
   
   .hover\:text-900:hover {
-    color: var(--p-surface-900) !important;
+    color: var(--surface-900) !important;
   }
   
   .active\:text-900:active {
-    color: var(--p-surface-900) !important;
+    color: var(--surface-900) !important;
   }
   
   .surface-0 {
-    background-color: var(--p-surface-0) !important;
+    background-color: var(--surface-0) !important;
   }
   
   .surface-50 {
-    background-color: var(--p-surface-50) !important;
+    background-color: var(--surface-50) !important;
   }
   
   .surface-100 {
-    background-color: var(--p-surface-100) !important;
+    background-color: var(--surface-100) !important;
   }
   
   .surface-200 {
-    background-color: var(--p-surface-200) !important;
+    background-color: var(--surface-200) !important;
   }
   
   .surface-300 {
-    background-color: var(--p-surface-300) !important;
+    background-color: var(--surface-300) !important;
   }
   
   .surface-400 {
-    background-color: var(--p-surface-400) !important;
+    background-color: var(--surface-400) !important;
   }
   
   .surface-500 {
-    background-color: var(--p-surface-500) !important;
+    background-color: var(--surface-500) !important;
   }
   
   .surface-600 {
-    background-color: var(--p-surface-600) !important;
+    background-color: var(--surface-600) !important;
   }
   
   .surface-700 {
-    background-color: var(--p-surface-700) !important;
+    background-color: var(--surface-700) !important;
   }
   
   .surface-800 {
-    background-color: var(--p-surface-800) !important;
+    background-color: var(--surface-800) !important;
   }
   
   .surface-900 {
-    background-color: var(--p-surface-900) !important;
+    background-color: var(--surface-900) !important;
   }
   
   .focus\:surface-0:focus {
-    background-color: var(--p-surface-0) !important;
+    background-color: var(--surface-0) !important;
   }
   
   .hover\:surface-0:hover {
-    background-color: var(--p-surface-0) !important;
+    background-color: var(--surface-0) !important;
   }
   
   .active\:surface-0:active {
-    background-color: var(--p-surface-0) !important;
+    background-color: var(--surface-0) !important;
   }
   
   .focus\:surface-50:focus {
-    background-color: var(--p-surface-50) !important;
+    background-color: var(--surface-50) !important;
   }
   
   .hover\:surface-50:hover {
-    background-color: var(--p-surface-50) !important;
+    background-color: var(--surface-50) !important;
   }
   
   .active\:surface-50:active {
-    background-color: var(--p-surface-50) !important;
+    background-color: var(--surface-50) !important;
   }
   
   .focus\:surface-100:focus {
-    background-color: var(--p-surface-100) !important;
+    background-color: var(--surface-100) !important;
   }
   
   .hover\:surface-100:hover {
-    background-color: var(--p-surface-100) !important;
+    background-color: var(--surface-100) !important;
   }
   
   .active\:surface-100:active {
-    background-color: var(--p-surface-100) !important;
+    background-color: var(--surface-100) !important;
   }
   
   .focus\:surface-200:focus {
-    background-color: var(--p-surface-200) !important;
+    background-color: var(--surface-200) !important;
   }
   
   .hover\:surface-200:hover {
-    background-color: var(--p-surface-200) !important;
+    background-color: var(--surface-200) !important;
   }
   
   .active\:surface-200:active {
-    background-color: var(--p-surface-200) !important;
+    background-color: var(--surface-200) !important;
   }
   
   .focus\:surface-300:focus {
-    background-color: var(--p-surface-300) !important;
+    background-color: var(--surface-300) !important;
   }
   
   .hover\:surface-300:hover {
-    background-color: var(--p-surface-300) !important;
+    background-color: var(--surface-300) !important;
   }
   
   .active\:surface-300:active {
-    background-color: var(--p-surface-300) !important;
+    background-color: var(--surface-300) !important;
   }
   
   .focus\:surface-400:focus {
-    background-color: var(--p-surface-400) !important;
+    background-color: var(--surface-400) !important;
   }
   
   .hover\:surface-400:hover {
-    background-color: var(--p-surface-400) !important;
+    background-color: var(--surface-400) !important;
   }
   
   .active\:surface-400:active {
-    background-color: var(--p-surface-400) !important;
+    background-color: var(--surface-400) !important;
   }
   
   .focus\:surface-500:focus {
-    background-color: var(--p-surface-500) !important;
+    background-color: var(--surface-500) !important;
   }
   
   .hover\:surface-500:hover {
-    background-color: var(--p-surface-500) !important;
+    background-color: var(--surface-500) !important;
   }
   
   .active\:surface-500:active {
-    background-color: var(--p-surface-500) !important;
+    background-color: var(--surface-500) !important;
   }
   
   .focus\:surface-600:focus {
-    background-color: var(--p-surface-600) !important;
+    background-color: var(--surface-600) !important;
   }
   
   .hover\:surface-600:hover {
-    background-color: var(--p-surface-600) !important;
+    background-color: var(--surface-600) !important;
   }
   
   .active\:surface-600:active {
-    background-color: var(--p-surface-600) !important;
+    background-color: var(--surface-600) !important;
   }
   
   .focus\:surface-700:focus {
-    background-color: var(--p-surface-700) !important;
+    background-color: var(--surface-700) !important;
   }
   
   .hover\:surface-700:hover {
-    background-color: var(--p-surface-700) !important;
+    background-color: var(--surface-700) !important;
   }
   
   .active\:surface-700:active {
-    background-color: var(--p-surface-700) !important;
+    background-color: var(--surface-700) !important;
   }
   
   .focus\:surface-800:focus {
-    background-color: var(--p-surface-800) !important;
+    background-color: var(--surface-800) !important;
   }
   
   .hover\:surface-800:hover {
-    background-color: var(--p-surface-800) !important;
+    background-color: var(--surface-800) !important;
   }
   
   .active\:surface-800:active {
-    background-color: var(--p-surface-800) !important;
+    background-color: var(--surface-800) !important;
   }
   
   .focus\:surface-900:focus {
-    background-color: var(--p-surface-900) !important;
+    background-color: var(--surface-900) !important;
   }
   
   .hover\:surface-900:hover {
-    background-color: var(--p-surface-900) !important;
+    background-color: var(--surface-900) !important;
   }
   
   .active\:surface-900:active {
-    background-color: var(--p-surface-900) !important;
+    background-color: var(--surface-900) !important;
   }
   
   .border-0 {
-    border-color: var(--p-surface-0) !important;
+    border-color: var(--surface-0) !important;
   }
   
   .border-50 {
-    border-color: var(--p-surface-50) !important;
+    border-color: var(--surface-50) !important;
   }
   
   .border-100 {
-    border-color: var(--p-surface-100) !important;
+    border-color: var(--surface-100) !important;
   }
   
   .border-200 {
-    border-color: var(--p-surface-200) !important;
+    border-color: var(--surface-200) !important;
   }
   
   .border-300 {
-    border-color: var(--p-surface-300) !important;
+    border-color: var(--surface-300) !important;
   }
   
   .border-400 {
-    border-color: var(--p-surface-400) !important;
+    border-color: var(--surface-400) !important;
   }
   
   .border-500 {
-    border-color: var(--p-surface-500) !important;
+    border-color: var(--surface-500) !important;
   }
   
   .border-600 {
-    border-color: var(--p-surface-600) !important;
+    border-color: var(--surface-600) !important;
   }
   
   .border-700 {
-    border-color: var(--p-surface-700) !important;
+    border-color: var(--surface-700) !important;
   }
   
   .border-800 {
-    border-color: var(--p-surface-800) !important;
+    border-color: var(--surface-800) !important;
   }
   
   .border-900 {
-    border-color: var(--p-surface-900) !important;
+    border-color: var(--surface-900) !important;
   }
   
   .focus\:border-0:focus {
-    border-color: var(--p-surface-0) !important;
+    border-color: var(--surface-0) !important;
   }
   
   .hover\:border-0:hover {
-    border-color: var(--p-surface-0) !important;
+    border-color: var(--surface-0) !important;
   }
   
   .active\:border-0:active {
-    border-color: var(--p-surface-0) !important;
+    border-color: var(--surface-0) !important;
   }
   
   .focus\:border-50:focus {
-    border-color: var(--p-surface-50) !important;
+    border-color: var(--surface-50) !important;
   }
   
   .hover\:border-50:hover {
-    border-color: var(--p-surface-50) !important;
+    border-color: var(--surface-50) !important;
   }
   
   .active\:border-50:active {
-    border-color: var(--p-surface-50) !important;
+    border-color: var(--surface-50) !important;
   }
   
   .focus\:border-100:focus {
-    border-color: var(--p-surface-100) !important;
+    border-color: var(--surface-100) !important;
   }
   
   .hover\:border-100:hover {
-    border-color: var(--p-surface-100) !important;
+    border-color: var(--surface-100) !important;
   }
   
   .active\:border-100:active {
-    border-color: var(--p-surface-100) !important;
+    border-color: var(--surface-100) !important;
   }
   
   .focus\:border-200:focus {
-    border-color: var(--p-surface-200) !important;
+    border-color: var(--surface-200) !important;
   }
   
   .hover\:border-200:hover {
-    border-color: var(--p-surface-200) !important;
+    border-color: var(--surface-200) !important;
   }
   
   .active\:border-200:active {
-    border-color: var(--p-surface-200) !important;
+    border-color: var(--surface-200) !important;
   }
   
   .focus\:border-300:focus {
-    border-color: var(--p-surface-300) !important;
+    border-color: var(--surface-300) !important;
   }
   
   .hover\:border-300:hover {
-    border-color: var(--p-surface-300) !important;
+    border-color: var(--surface-300) !important;
   }
   
   .active\:border-300:active {
-    border-color: var(--p-surface-300) !important;
+    border-color: var(--surface-300) !important;
   }
   
   .focus\:border-400:focus {
-    border-color: var(--p-surface-400) !important;
+    border-color: var(--surface-400) !important;
   }
   
   .hover\:border-400:hover {
-    border-color: var(--p-surface-400) !important;
+    border-color: var(--surface-400) !important;
   }
   
   .active\:border-400:active {
-    border-color: var(--p-surface-400) !important;
+    border-color: var(--surface-400) !important;
   }
   
   .focus\:border-500:focus {
-    border-color: var(--p-surface-500) !important;
+    border-color: var(--surface-500) !important;
   }
   
   .hover\:border-500:hover {
-    border-color: var(--p-surface-500) !important;
+    border-color: var(--surface-500) !important;
   }
   
   .active\:border-500:active {
-    border-color: var(--p-surface-500) !important;
+    border-color: var(--surface-500) !important;
   }
   
   .focus\:border-600:focus {
-    border-color: var(--p-surface-600) !important;
+    border-color: var(--surface-600) !important;
   }
   
   .hover\:border-600:hover {
-    border-color: var(--p-surface-600) !important;
+    border-color: var(--surface-600) !important;
   }
   
   .active\:border-600:active {
-    border-color: var(--p-surface-600) !important;
+    border-color: var(--surface-600) !important;
   }
   
   .focus\:border-700:focus {
-    border-color: var(--p-surface-700) !important;
+    border-color: var(--surface-700) !important;
   }
   
   .hover\:border-700:hover {
-    border-color: var(--p-surface-700) !important;
+    border-color: var(--surface-700) !important;
   }
   
   .active\:border-700:active {
-    border-color: var(--p-surface-700) !important;
+    border-color: var(--surface-700) !important;
   }
   
   .focus\:border-800:focus {
-    border-color: var(--p-surface-800) !important;
+    border-color: var(--surface-800) !important;
   }
   
   .hover\:border-800:hover {
-    border-color: var(--p-surface-800) !important;
+    border-color: var(--surface-800) !important;
   }
   
   .active\:border-800:active {
-    border-color: var(--p-surface-800) !important;
+    border-color: var(--surface-800) !important;
   }
   
   .focus\:border-900:focus {
-    border-color: var(--p-surface-900) !important;
+    border-color: var(--surface-900) !important;
   }
   
   .hover\:border-900:hover {
-    border-color: var(--p-surface-900) !important;
+    border-color: var(--surface-900) !important;
   }
   
   .active\:border-900:active {
-    border-color: var(--p-surface-900) !important;
+    border-color: var(--surface-900) !important;
   }
   
   .bg-transparent {