From 00f41dd25e40398e092cc762b22bc24ccf900fa7 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Sat, 20 Jul 2024 04:05:24 +0800
Subject: [PATCH] refactor(projects): change css vars mount to root

---
 src/store/modules/theme/index.ts  | 10 +++++-----
 src/store/modules/theme/shared.ts |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 96124fe3..46c52205 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -6,7 +6,7 @@ import { getPaletteColorByNumber } from '@sa/color';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
 import {
-  addThemeVarsToHtml,
+  addThemeVarsToGlobal,
   createThemeToken,
   getNaiveTheme,
   initThemeSettings,
@@ -123,14 +123,14 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.layout.mode = mode;
   }
 
-  /** Setup theme vars to html */
-  function setupThemeVarsToHtml() {
+  /** Setup theme vars to global */
+  function setupThemeVarsToGlobal() {
     const { themeTokens, darkThemeTokens } = createThemeToken(
       themeColors.value,
       settings.value.tokens,
       settings.value.recommendColor
     );
-    addThemeVarsToHtml(themeTokens, darkThemeTokens);
+    addThemeVarsToGlobal(themeTokens, darkThemeTokens);
   }
 
   /** Cache theme settings */
@@ -170,7 +170,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     watch(
       themeColors,
       val => {
-        setupThemeVarsToHtml();
+        setupThemeVarsToGlobal();
         localStg.set('themeColor', val.primary);
       },
       { immediate: true }
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index 4abfd6d2..31d0c7d8 100644
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -133,16 +133,16 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
 }
 
 /**
- * Add theme vars to html
+ * Add theme vars to global
  *
  * @param tokens
  */
-export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
+export function addThemeVarsToGlobal(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
   const cssVarStr = getCssVarByTokens(tokens);
   const darkCssVarStr = getCssVarByTokens(darkTokens);
 
   const css = `
-    html {
+    :root {
       ${cssVarStr}
     }
   `;