feat: theme color switch

build/config/lessModifyVars.ts

@@ -1,25 +0,0 @@
-/**
- * less global variable
- */
-const primaryColor = '#0084f4';
-// const primaryColor = '#018ffb';
-// const primaryColor = '#0065cc';
-//{
-const modifyVars = {
-  'primary-color': primaryColor, //  Global dominant color
-  'success-color': '#55D187', //  Success color
-  'error-color': '#ED6F6F', //  False color
-  'warning-color': '#EFBD47', //   Warning color
-  'link-color': primaryColor, //   Link 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': '#d9d9d9', //  Border color,
-  'border-radius-base': '2px', //  Component/float fillet
-};
-//}
-
-export { modifyVars, primaryColor };

build/config/themeConfig.ts

@@ -0,0 +1,106 @@
+import { generate } from '@ant-design/colors';
+export const primaryColor = '#0084f4';
+
+export const themeMode = 'light';
+
+export type ThemeMode = 'dark' | 'light';
+
+type Fn = (...arg: any) => any;
+
+export interface GenerateColorsParams {
+  mixLighten: Fn;
+  mixDarken: Fn;
+  tinycolor: any;
+  color?: string;
+}
+
+export function generateAntColors(color: string, mode: ThemeMode) {
+  return generate(color, {
+    theme: mode == 'dark' ? 'dark' : 'default',
+  });
+}
+
+export function getThemeColors(color?: string, theme?: ThemeMode) {
+  const tc = color || primaryColor;
+  const tm = theme || themeMode;
+  const colors = generateAntColors(tc, tm);
+  const primary = colors[5];
+  const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
+
+  return [...colors, ...modeColors];
+}
+
+export function generateColors({
+  color = primaryColor,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+}: GenerateColorsParams) {
+  const lightens = new Array(19).fill(0).map((t, i) => {
+    return mixLighten(color, i / 5);
+  });
+
+  const darkens = new Array(19).fill(0).map((t, i) => {
+    return mixDarken(color, i / 5);
+  });
+
+  const alphaColors = new Array(19).fill(0).map((t, i) => {
+    return tinycolor(color)
+      .setAlpha(i / 20)
+      .toRgbString();
+  });
+
+  const tinycolorLightens = new Array(19)
+    .fill(0)
+    .map((t, i) => {
+      return tinycolor(color)
+        .lighten(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#ffffff');
+
+  const tinycolorDarkens = new Array(19)
+    .fill(0)
+    .map((t, i) => {
+      return tinycolor(color)
+        .darken(i * 5)
+        .toHexString();
+    })
+    .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}`] = palettes[index];
+  }
+
+  return {
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'alert-info-bg-color': palettes[0],
+    'alert-info-border-color': palettes[2],
+    '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': '#d9d9d9', //  Border color,
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+  };
+}

build/vite/plugin/index.ts

@@ -9,8 +9,9 @@ import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configGzipPlugin } from './gzip';
-import { configStyleImportConfig } from './styleImport';
+import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
+import { configThemePlugin } from './theme';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
@@ -29,7 +30,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   vitePlugins.push(PurgeIcons());
 
   // vite-plugin-style-import
-  vitePlugins.push(configStyleImportConfig());
+  vitePlugins.push(configStyleImportPlugin());
 
   // rollup-plugin-gzip
   vitePlugins.push(configGzipPlugin(isBuild));
@@ -37,5 +38,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig());
 
+  //vite-plugin-theme
+  vitePlugins.push(configThemePlugin());
+
   return vitePlugins;
 }

build/vite/plugin/styleImport.ts

@@ -1,6 +1,6 @@
 import styleImport from 'vite-plugin-style-import';
 
-export function configStyleImportConfig() {
+export function configStyleImportPlugin() {
   const pwaPlugin = styleImport({
     libs: [
       {

build/vite/plugin/theme.ts

@@ -0,0 +1,15 @@
+import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
+import { getThemeColors, generateColors } from '../../config/themeConfig';
+
+export function configThemePlugin() {
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+  });
+
+  const plugin = viteThemePlugin({
+    colorVariables: [...getThemeColors(), ...colors],
+  });
+  return plugin;
+}