From 769d84a7f4778d2f8edc7d9291b4cb8b13c5b334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=87=95=E5=8D=9A=E6=96=87?= <349952469@qq.com>
Date: Sun, 7 Apr 2024 17:34:33 +0800
Subject: [PATCH] fix(styles): fix css var is inserted repeatedly

---
 src/store/modules/theme/shared.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index 4fdc6ffa..36f6a0ef 100644
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -1,6 +1,7 @@
 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';
@@ -129,6 +130,7 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
   return styleStr;
 }
 
+const { css: themeVarCss } = useStyleTag('', { id: 'theme-var-css' });
 /**
  * Add theme vars to html
  *
@@ -150,11 +152,7 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
     }
   `;
 
-  const style = document.createElement('style');
-
-  style.textContent = css + darkCss;
-
-  document.head.appendChild(style);
+  themeVarCss.value = css + darkCss;
 }
 
 /**