feat: dark mode

build/config/themeConfig.ts

@@ -2,11 +2,7 @@ import { generate } from '@ant-design/colors';
 
 export const primaryColor = '#0960bd';
 
-export const borderColorBase = '#d9d9d9';
-
-export const themeMode = 'light';
-
-export type ThemeMode = 'dark' | 'light';
+export const darkMode = 'light';
 
 type Fn = (...arg: any) => any;
 
@@ -17,18 +13,17 @@ export interface GenerateColorsParams {
   color?: string;
 }
 
-export function generateAntColors(color: string, mode: ThemeMode) {
+export function generateAntColors(color: string) {
   return generate(color, {
-    theme: mode == 'dark' ? 'dark' : 'default',
+    theme: 'default',
   });
 }
 
-export function getThemeColors(color?: string, theme?: ThemeMode) {
+export function getThemeColors(color?: string) {
   const tc = color || primaryColor;
-  const tm = theme || themeMode;
-  const colors = generateAntColors(tc, tm);
+  const colors = generateAntColors(tc);
   const primary = colors[5];
-  const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
+  const modeColors = generateAntColors(primary);
 
   return [...colors, ...modeColors];
 }
@@ -71,36 +66,3 @@ export function generateColors({
     .filter((item) => item !== '#000000');
   return [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens];
 }
-
-/**
- * less global variable
- */
-export function generateModifyVars() {
-  const palettes = generateAntColors(primaryColor, themeMode);
-  const primary = palettes[5];
-
-  const primaryColorObj: Record<string, string> = {};
-
-  for (let index = 0; index < 10; index++) {
-    primaryColorObj[`primary-${index + 1}`] = palettes[index];
-  }
-
-  return {
-    'primary-color': primary,
-    ...primaryColorObj,
-    'info-color': primary,
-    'processing-color': primary,
-    'success-color': '#55D187', //  Success color
-    'error-color': '#ED6F6F', //  False color
-    'warning-color': '#EFBD47', //   Warning color
-    'disabled-color': 'rgba(0, 0, 0, 0.25)', //  Failure color
-    'heading-color': 'rgba(0, 0, 0, 0.85)', //  Title color
-    'text-color': 'rgba(0, 0, 0, 0.85)', //  Main text color
-    'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
-    'font-size-base': '14px', //  Main font size
-    'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
-    'border-color-base': borderColorBase, //  Border color,
-    'border-radius-base': '2px', //  Component/float fillet
-    'link-color': primary, //   Link color
-  };
-}

build/generate/generateModifyVars.ts

@@ -0,0 +1,35 @@
+import { generateAntColors, primaryColor } from '../config/themeConfig';
+import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+
+/**
+ * less global variable
+ */
+export function generateModifyVars(dark = false) {
+  const palettes = generateAntColors(primaryColor);
+  const primary = palettes[5];
+
+  const primaryColorObj: Record<string, string> = {};
+
+  for (let index = 0; index < 10; index++) {
+    primaryColorObj[`primary-${index + 1}`] = palettes[index];
+  }
+
+  const modifyVars = getThemeVariables({ dark });
+  return {
+    ...modifyVars,
+    // Used for global import to avoid the need to import each style file separately
+    // reference:  Avoid repeated references
+    hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'processing-color': primary,
+    'success-color': '#55D187', //  Success color
+    'error-color': '#ED6F6F', //  False color
+    'warning-color': '#EFBD47', //   Warning color
+    'font-size-base': '14px', //  Main font size
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+  };
+}

build/vite/plugin/index.ts

@@ -62,7 +62,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   vitePlugins.push(configVisualizerConfig());
 
   //vite-plugin-theme
-  vitePlugins.push(configThemePlugin());
+  vitePlugins.push(configThemePlugin(isBuild));
 
   // The following plugins only work in the production environment
   if (isBuild) {

build/vite/plugin/theme.ts

@@ -2,18 +2,50 @@
  * Vite plugin for website theme color switching
  * https://github.com/anncwb/vite-plugin-theme
  */
-import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
+import type { Plugin } from 'vite';
+import {
+  viteThemePlugin,
+  antdDarkThemePlugin,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+} from 'vite-plugin-theme';
 import { getThemeColors, generateColors } from '../../config/themeConfig';
+import { generateModifyVars } from '../../generate/generateModifyVars';
 
-export function configThemePlugin() {
+export function configThemePlugin(isBuild: boolean): Plugin[] {
   const colors = generateColors({
     mixDarken,
     mixLighten,
     tinycolor,
   });
 
-  const plugin = viteThemePlugin({
-    colorVariables: [...getThemeColors(), ...colors],
-  });
-  return plugin;
+  const plugin = [
+    viteThemePlugin({
+      resolveSelector: (s) => `[data-theme] ${s}`,
+      colorVariables: [...getThemeColors(), ...colors],
+    }),
+    antdDarkThemePlugin({
+      filter: (id) => {
+        if (isBuild) {
+          return !id.endsWith('antd.less');
+        }
+        return true;
+      },
+      // extractCss: false,
+      darkModifyVars: {
+        ...generateModifyVars(true),
+        'text-color': '#c9d1d9',
+        'text-color-base': '#c9d1d9',
+        'component-background': '#151515',
+        // black: '#0e1117',
+        // #8b949e
+        'text-color-secondary': '#8b949e',
+        'border-color-base': '#30363d',
+        'item-active-bg': '#111b26',
+      },
+    }),
+  ];
+
+  return (plugin as unknown) as Plugin[];
 }