From 533ccec11007ec9078fd8daefd88f6b146991939 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 Jan 2025 12:22:25 +0100
Subject: [PATCH] fix(colors): move css variables to `base` layer

Resolves #3075
---
 src/runtime/plugins/colors.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index a891564604..0f5485b76f 100644
--- 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  ')}
+  }
 }`
   })