theme.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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. default:
  36. if (s.indexOf('.ant-alert-message') >= 0) {
  37. console.log(s);
  38. }
  39. return s;
  40. }
  41. return `[data-theme] ${s}`;
  42. },
  43. colorVariables: [...getThemeColors(), ...colors],
  44. }),
  45. antdDarkThemePlugin({
  46. preloadFiles: [
  47. //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
  48. path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
  49. path.resolve(process.cwd(), 'src/design/index.less'),
  50. ],
  51. filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
  52. // extractCss: false,
  53. darkModifyVars: {
  54. ...generateModifyVars(true),
  55. 'text-color': '#c9d1d9',
  56. 'text-color-base': '#c9d1d9',
  57. 'component-background': '#151515',
  58. 'heading-color': 'rgb(255 255 255 / 65%)',
  59. // black: '#0e1117',
  60. // #8b949e
  61. 'text-color-secondary': '#8b949e',
  62. 'border-color-base': '#303030',
  63. // 'border-color-split': '#30363d',
  64. 'item-active-bg': '#111b26',
  65. 'app-content-background': 'rgb(255 255 255 / 4%)',
  66. 'tree-node-selected-bg': '#11263c',
  67. 'alert-success-border-color': '#274916',
  68. 'alert-success-bg-color': '#162312',
  69. 'alert-success-icon-color': '#49aa19',
  70. 'alert-info-border-color': '#153450',
  71. 'alert-info-bg-color': '#111b26',
  72. 'alert-info-icon-color': '#177ddc',
  73. 'alert-warning-border-color': '#594214',
  74. 'alert-warning-bg-color': '#2b2111',
  75. 'alert-warning-icon-color': '#d89614',
  76. 'alert-error-border-color': '#58181c',
  77. 'alert-error-bg-color': '#2a1215',
  78. 'alert-error-icon-color': '#a61d24',
  79. // @alert-success-border-color: @green-3;
  80. // @alert-success-bg-color: @green-1;
  81. // @alert-success-icon-color: @success-color;
  82. // @alert-info-border-color: @primary-3;
  83. // @alert-info-bg-color: @primary-1;
  84. // @alert-info-icon-color: @info-color;
  85. // @alert-warning-border-color: @gold-3;
  86. // @alert-warning-bg-color: @gold-1;
  87. // @alert-warning-icon-color: @warning-color;
  88. // @alert-error-border-color: @red-3;
  89. // @alert-error-bg-color: @red-1;
  90. // @alert-error-icon-color: @error-color;
  91. },
  92. }),
  93. ];
  94. return plugin as unknown as Plugin[];
  95. }