refactor(projects): refactor addThemeVarsToHtml

Author: honghuangdc

src/store/modules/theme/shared.ts

@@ -1,7 +1,6 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { getColorByColorPaletteNumber, getColorPalette } from '@sa/color-palette';
 import { addColorAlpha, getRgbOfColor } from '@sa/utils';
-import { useStyleTag } from '@vueuse/core';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { localStg } from '@/utils/storage';
@@ -130,7 +129,6 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
   return styleStr;
 }
 
-const { css: themeVarCss } = useStyleTag('', { id: 'theme-var-css' });
 /**
  * Add theme vars to html
  *
@@ -152,7 +150,15 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
     }
   `;
 
-  themeVarCss.value = css + darkCss;
+  const styleId = 'theme-vars';
+
+  const style = document.querySelector(`#${styleId}`) || document.createElement('style');
+
+  style.id = styleId;
+
+  style.textContent = css + darkCss;
+
+  document.head.appendChild(style);
 }
 
 /**