theme.ts 2.1 KB

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