fix(colors): move css variables to base layer

Resolves #3075
nuxt · Jan 16, 2025 · 533ccec · 533ccec
1 parent 86e1888
commit 533ccec
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
@@ -19,13 +19,16 @@ export default defineNuxtPlugin(() => {
   const root = computed(() => {
     const { neutral, ...colors } = appConfig.ui.colors
 
-    return `:root {
+    return `@layer base {
+  :root {
   ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateShades(key, value)).join('\n  ')}
-
+  }
+  :root, .light {
   ${Object.keys(colors).map(key => generateColor(key, 500)).join('\n  ')}
-}
-.dark {
+  }
+  .dark {
   ${Object.keys(colors).map(key => generateColor(key, 400)).join('\n  ')}
+  }
 }`
   })