theme.ts 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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) => `[data-theme] ${s}`,
  25. colorVariables: [...getThemeColors(), ...colors],
  26. }),
  27. antdDarkThemePlugin({
  28. preloadFiles: [
  29. path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
  30. path.resolve(process.cwd(), 'src/design/index.less'),
  31. ],
  32. filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
  33. // extractCss: false,
  34. darkModifyVars: {
  35. ...generateModifyVars(true),
  36. 'text-color': '#c9d1d9',
  37. 'text-color-base': '#c9d1d9',
  38. 'component-background': '#151515',
  39. // black: '#0e1117',
  40. // #8b949e
  41. 'text-color-secondary': '#8b949e',
  42. // 'border-color-base': '#30363d',
  43. // 'border-color-split': '#30363d',
  44. 'item-active-bg': '#111b26',
  45. },
  46. }),
  47. ];
  48. return (plugin as unknown) as Plugin[];
  49. }