fix: some css style issues

buqiyuan · Jul 13, 2022 · 31cbd31 · 31cbd31 · vercel · Jul 13, 2022
1 parent 0068b87
commit 31cbd31
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/src/components/core/dynamic-table/src/components/tool-bar/index.vue b/src/components/core/dynamic-table/src/components/tool-bar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between p-y-16px">
+  <div class="flex justify-between p-16px">
     <slot name="headerTitle">
       <div class="title">
         {{ title }}
@@ -42,7 +42,6 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    color: rgba(0, 0, 0, 0.85);
     font-weight: 500;
     font-size: 16px;
   }

diff --git a/src/store/modules/projectConfig.ts b/src/store/modules/projectConfig.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import darkThemeCss from 'ant-design-vue/dist/antd.dark.css?raw';
+import { useMutationObserver } from '@vueuse/core';
 import { ConfigProvider } from 'ant-design-vue';
 import type { Theme } from 'ant-design-vue/es/config-provider/';
 import { store } from '@/store';
@@ -11,6 +12,20 @@ styleDom.dataset.type = 'theme-dark';
 styleDom.textContent = darkThemeCss;
 document.head.appendChild(styleDom);
 
+useMutationObserver(
+  document.head,
+  (mutations) => {
+    const hasCustomStyleEl = mutations.some((n) => Array.from(n.addedNodes).includes(styleDom));
+    if (!hasCustomStyleEl) {
+      document.head.appendChild(styleDom);
+      styleDom.disabled = !document.documentElement.classList.contains('dark');
+    }
+  },
+  {
+    childList: true,
+  },
+);
+
 /**
  * 项目默认配置项
  * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
@@ -71,20 +86,23 @@ const setRealDarkTheme = (navTheme?: ThemeName) => {
   }
 };
 
-let localThemeConfig: Partial<ThemeState> = {};
-try {
-  localThemeConfig = JSON.parse(Storage.get(THEME_KEY, '{}'));
-  const { primaryColor, navTheme } = localThemeConfig;
-  setRealDarkTheme(navTheme);
-  primaryColor &&
-    ConfigProvider.config({
-      theme: {
-        primaryColor,
-      },
-    });
-} catch {
-  localThemeConfig = {};
-}
+const getLocalThemeConfig = (): Partial<ThemeState> => {
+  try {
+    return JSON.parse(Storage.get(THEME_KEY, '{}'));
+  } catch {
+    return {};
+  }
+};
+
+const localThemeConfig = getLocalThemeConfig();
+const { primaryColor, navTheme } = localThemeConfig;
+setRealDarkTheme(navTheme);
+primaryColor &&
+  ConfigProvider.config({
+    theme: {
+      primaryColor,
+    },
+  });
 
 export const useThemeStore = defineStore({
   id: 'theme',