11import { defineStore } from 'pinia' ;
22import darkThemeCss from 'ant-design-vue/dist/antd.dark.css?raw' ;
3+ import { useMutationObserver } from '@vueuse/core' ;
34import { ConfigProvider } from 'ant-design-vue' ;
45import type { Theme } from 'ant-design-vue/es/config-provider/' ;
56import { store } from '@/store' ;
@@ -11,6 +12,20 @@ styleDom.dataset.type = 'theme-dark';
1112styleDom . textContent = darkThemeCss ;
1213document . head . appendChild ( styleDom ) ;
1314
15+ useMutationObserver (
16+ document . head ,
17+ ( mutations ) => {
18+ const hasCustomStyleEl = mutations . some ( ( n ) => Array . from ( n . addedNodes ) . includes ( styleDom ) ) ;
19+ if ( ! hasCustomStyleEl ) {
20+ document . head . appendChild ( styleDom ) ;
21+ styleDom . disabled = ! document . documentElement . classList . contains ( 'dark' ) ;
22+ }
23+ } ,
24+ {
25+ childList : true ,
26+ } ,
27+ ) ;
28+
1429/**
1530 * 项目默认配置项
1631 * primaryColor - 默认主题色, 如果修改颜色不生效,请清理 localStorage
@@ -71,20 +86,23 @@ const setRealDarkTheme = (navTheme?: ThemeName) => {
7186 }
7287} ;
7388
74- let localThemeConfig : Partial < ThemeState > = { } ;
75- try {
76- localThemeConfig = JSON . parse ( Storage . get ( THEME_KEY , '{}' ) ) ;
77- const { primaryColor, navTheme } = localThemeConfig ;
78- setRealDarkTheme ( navTheme ) ;
79- primaryColor &&
80- ConfigProvider . config ( {
81- theme : {
82- primaryColor,
83- } ,
84- } ) ;
85- } catch {
86- localThemeConfig = { } ;
87- }
89+ const getLocalThemeConfig = ( ) : Partial < ThemeState > => {
90+ try {
91+ return JSON . parse ( Storage . get ( THEME_KEY , '{}' ) ) ;
92+ } catch {
93+ return { } ;
94+ }
95+ } ;
96+
97+ const localThemeConfig = getLocalThemeConfig ( ) ;
98+ const { primaryColor, navTheme } = localThemeConfig ;
99+ setRealDarkTheme ( navTheme ) ;
100+ primaryColor &&
101+ ConfigProvider . config ( {
102+ theme : {
103+ primaryColor,
104+ } ,
105+ } ) ;
88106
89107export const useThemeStore = defineStore ( {
90108 id : 'theme' ,
0 commit comments