fix(locales): 🐛 修复刷新 灰色模式 色弱模式不生效

Author: jsxiaosi

index.html

@@ -172,10 +172,6 @@
         if (primaryColor) {
           const loading = document.getElementById('html_loding');
           loading.style.color = primaryColor;
-          const style = document.getElementById('admin-style-root-color');
-          style.innerHTML = `html:root{ --el-color-primary: ${primaryColor};\n}`;
-          // const body = document.documentElement;
-          // body.style.setProperty('--el-color-primary', primaryColor);
         }
       }
     </script>

src/components/Application/AppTheme.vue

@@ -2,27 +2,22 @@
   import { useColorMode } from '@vueuse/core';
   import { watch } from 'vue';
   import SvgIcon from '../SvgIcon/index.vue';
-  import { useTransformTheme } from '@/hooks/useTransformTheme';
   import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import type { AppConfig } from '@/store/types';
+  import { updateColor } from '@/utils/theme/transformTheme';
 
   const color = useColorMode();
 
-  const { setAppConfigMode } = useRootSetting();
-
-  const { updateColor } = useTransformTheme();
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
   const toggleDarkMode = () => {
-    setAppConfigMode({ themeMode: color.value });
+    setAppConfigMode({ themeMode: color.value as AppConfig['themeMode'] });
   };
 
-  watch(
-    color,
-    () => {
-      toggleDarkMode();
-      updateColor();
-    },
-    { immediate: true },
-  );
+  watch(color, () => {
+    toggleDarkMode();
+    updateColor(appConfig.value.primaryColor, color.value as AppConfig['themeMode']);
+  });
 </script>
 
 <template>

src/config/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { getConfigInfo } from '@/server/config';
 import type { AppConfig } from '@/store/types';
 import { setStorageConfig } from '@/utils/storage';
+import { configTheme } from '@/utils/theme/transformTheme';
 
 let config: AppConfig = {} as AppConfig;
 
@@ -23,6 +24,7 @@ export async function getServerConfig(app: App): Promise<AppConfig> {
       throw `\npublic文件夹下无法查找到serverConfig配置文件\nUnable to find serverconfig configuration file under public folder`;
     }
   }
+  configTheme(config);
   setStorageConfig({ ...config.StorageConfig, prefix: config.title });
   app.config.globalProperties.$config = getConfig();
   return config;

src/hooks/useTransformTheme.ts

@@ -1,11 +1,9 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
-  import { useTransformTheme } from '@/hooks/useTransformTheme';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import type { AppConfig } from '@/store/types';
   import { useRootSetting } from '@/hooks/setting/useRootSetting';
-
-  const { updateColor, themeHtmlClassName } = useTransformTheme();
+  import { themeHtmlClassName, updateColor } from '@/utils/theme/transformTheme';
 
   const { appConfig, setAppConfigMode } = useRootSetting();
 
@@ -17,7 +15,7 @@
 
   watch([pureColor], () => {
     setAppConfigMode({ primaryColor: pureColor.value });
-    updateColor();
+    updateColor(pureColor.value, appConfig.value.themeMode);
   });
 
   const htmlGrey = ref<boolean>(greyMode || false);

src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue

@@ -56,7 +56,6 @@
   <div class="setting">
     <el-drawer
       v-model="drawer"
-      custom-class="setting-drawer"
       :title="$t('layout.setup')"
       :size="320"
       @close="emit('update:modelValue', false)"

src/layouts/pageLayouts/components/Seting/index.vue

@@ -53,7 +53,7 @@
     v-if="isPhoneScreen"
     v-model="drawer"
     :with-header="false"
-    custom-class="drawer-sidebar"
+    class="drawer-sidebar"
     direction="ltr"
     :before-close="handleClose"
   >

src/layouts/pageLayouts/components/SideNavigationBar/index.vue

@@ -15,8 +15,8 @@ export interface AppConfig {
   collapseMenu: boolean;
   // 菜单显示模式： 'vertical'：左侧模式 | 'horizontal'：顶部模式 | 'blend'：混合模式
   sidebarMode: SidebarMode;
-  // 主题模式：夜间主题、白天主题
-  themeMode: string;
+  // 主题模式：白天主题、夜间主题
+  themeMode: 'light' | 'dark';
   // 国际化
   locale: string;
   // storage配置

src/store/types.ts

@@ -0,0 +1,69 @@
+import type { AppConfig } from '@/store/types';
+
+const body = document.documentElement as HTMLElement;
+
+// hex转rgb
+function hexToRgb(str: string) {
+  const hxs: string[] = str.replace('#', '').match(/../g) || [];
+  const newHxs: number[] = [];
+  for (let i = 0; i < 3; i++) newHxs[i] = parseInt(hxs[i], 16);
+  return newHxs;
+}
+
+// rgb转hex
+function rgbToHex(a: number, b: number, c: number) {
+  const hexs = [a.toString(16), b.toString(16), c.toString(16)];
+  for (let i = 0; i < 3; i++) {
+    if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+  }
+  return `#${hexs.join('')}`;
+}
+
+// 参考element style 计算
+function mix(color1: string, color2: string, weight: number) {
+  weight = Math.max(Math.min(Number(weight), 1), 0);
+  const mainColor = hexToRgb(color1);
+  const mixColor = hexToRgb(color2);
+  const hex = [];
+  for (let i = 0; i < mainColor.length; i++)
+    hex[i] = Math.round(mainColor[i] * (1 - weight) + mixColor[i] * weight);
+  return rgbToHex(hex[0], hex[1], hex[2]);
+}
+
+export function updateColor(primaryColor: string, themeMode: 'light' | 'dark') {
+  if (!primaryColor) return;
+
+  const style = document.getElementById('admin-style-root-color');
+
+  const mixColor = themeMode === 'dark' ? '#141414' : '#ffffff';
+  let innerHTML = `html${
+    themeMode === 'dark' ? '.dark' : ''
+  }:root{ --el-color-primary: ${primaryColor};\n`;
+
+  // body.style.setProperty('--el-color-primary', primaryColor);
+  for (let i = 1; i <= 9; i++) {
+    // body.style.setProperty(`--el-color-primary-light-${i}`, mix(primaryColor, mixWhite, i * 0.1));
+    innerHTML += `--el-color-primary-light-${i}: ${mix(primaryColor, mixColor, i * 0.1)};\n`;
+  }
+
+  if (style) style.innerHTML = innerHTML + '}';
+}
+
+export function themeHtmlClassName(className: string, isShow: boolean) {
+  if (isShow) {
+    body.classList.add(className);
+  } else {
+    body.classList.remove(className);
+  }
+}
+
+export function configTheme(appConfig: AppConfig) {
+  if (!appConfig) return;
+  const { primaryColor, themeMode, colorWeaknessMode, greyMode } = appConfig;
+
+  updateColor(primaryColor, themeMode);
+  if (greyMode || colorWeaknessMode) {
+    if (greyMode) themeHtmlClassName('html-grey', greyMode);
+    else if (colorWeaknessMode) themeHtmlClassName('html-weakness', colorWeaknessMode);
+  }
+}