theme.ts 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
  44. path.resolve(process.cwd(), 'src/design/index.less'),
  45. ],
  46. filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
  47. // extractCss: false,
  48. darkModifyVars: {
  49. ...generateModifyVars(true),
  50. 'text-color': '#c9d1d9',
  51. 'text-color-base': '#c9d1d9',
  52. 'component-background': '#151515',
  53. 'heading-color': 'rgb(255 255 255 / 65%)',
  54. // black: '#0e1117',
  55. // #8b949e
  56. 'text-color-secondary': '#8b949e',
  57. 'border-color-base': '#303030',
  58. // 'border-color-split': '#30363d',
  59. 'item-active-bg': '#111b26',
  60. 'app-content-background': 'rgb(255 255 255 / 4%)',
  61. 'tree-node-selected-bg': '#11263c',
  62. 'alert-success-border-color': '#274916',
  63. 'alert-success-bg-color': '#162312',
  64. 'alert-success-icon-color': '#49aa19',
  65. 'alert-info-border-color': '#153450',
  66. 'alert-info-bg-color': '#111b26',
  67. 'alert-info-icon-color': '#177ddc',
  68. 'alert-warning-border-color': '#594214',
  69. 'alert-warning-bg-color': '#2b2111',
  70. 'alert-warning-icon-color': '#d89614',
  71. 'alert-error-border-color': '#58181c',
  72. 'alert-error-bg-color': '#2a1215',
  73. 'alert-error-icon-color': '#a61d24',
  74. },
  75. }),
  76. ];
  77. return plugin as unknown as Plugin[];
  78. }