theme.ts 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /**
  2. * Vite plugin for website theme color switching
  3. * https://github.com/anncwb/vite-plugin-theme
  4. */
  5. import type { Plugin } from 'vite';
  6. import path from 'path';
  7. import {
  8. viteThemePlugin,
  9. antdDarkThemePlugin,
  10. mixLighten,
  11. mixDarken,
  12. tinycolor,
  13. } from 'vite-plugin-theme';
  14. import { getThemeColors, generateColors } from '../../config/themeConfig';
  15. import { generateModifyVars } from '../../generate/generateModifyVars';
  16. export function configThemePlugin(isBuild: boolean): Plugin[] {
  17. const colors = generateColors({
  18. mixDarken,
  19. mixLighten,
  20. tinycolor,
  21. });
  22. const plugin = [
  23. viteThemePlugin({
  24. resolveSelector: (s) => {
  25. s = s.trim();
  26. switch (s) {
  27. case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
  28. return '.ant-steps-item-icon > .ant-steps-icon';
  29. case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
  30. case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
  31. case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
  32. return s;
  33. case '.ant-steps-item-icon > .ant-steps-icon':
  34. return s;
  35. }
  36. return `[data-theme] ${s}`;
  37. },
  38. colorVariables: [...getThemeColors(), ...colors],
  39. }),
  40. antdDarkThemePlugin({
  41. preloadFiles: [
  42. path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
  43. path.resolve(process.cwd(), 'src/design/index.less'),
  44. ],
  45. filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
  46. // extractCss: false,
  47. darkModifyVars: {
  48. ...generateModifyVars(true),
  49. 'text-color': '#c9d1d9',
  50. 'text-color-base': '#c9d1d9',
  51. 'component-background': '#151515',
  52. // black: '#0e1117',
  53. // #8b949e
  54. 'text-color-secondary': '#8b949e',
  55. 'border-color-base': '#303030',
  56. // 'border-color-split': '#30363d',
  57. 'item-active-bg': '#111b26',
  58. 'app-content-background': 'rgb(255 255 255 / 4%)',
  59. 'tree-node-selected-bg': '#11263c',
  60. },
  61. }),
  62. ];
  63. return plugin as unknown as Plugin[];
  64. }