theme.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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 {
  7. viteThemePlugin,
  8. antdDarkThemePlugin,
  9. mixLighten,
  10. mixDarken,
  11. tinycolor,
  12. } from 'vite-plugin-theme';
  13. import { getThemeColors, generateColors } from '../../config/themeConfig';
  14. import { generateModifyVars } from '../../generate/generateModifyVars';
  15. export function configThemePlugin(isBuild: boolean): Plugin[] {
  16. const colors = generateColors({
  17. mixDarken,
  18. mixLighten,
  19. tinycolor,
  20. });
  21. const plugin = [
  22. viteThemePlugin({
  23. resolveSelector: (s) => `[data-theme] ${s}`,
  24. colorVariables: [...getThemeColors(), ...colors],
  25. }),
  26. antdDarkThemePlugin({
  27. filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
  28. // extractCss: false,
  29. darkModifyVars: {
  30. ...generateModifyVars(true),
  31. 'text-color': '#c9d1d9',
  32. 'text-color-base': '#c9d1d9',
  33. 'component-background': '#151515',
  34. // black: '#0e1117',
  35. // #8b949e
  36. 'text-color-secondary': '#8b949e',
  37. // 'border-color-base': '#30363d',
  38. // 'border-color-split': '#30363d',
  39. 'item-active-bg': '#111b26',
  40. },
  41. }),
  42. ];
  43. return (plugin as unknown) as Plugin[];
  44. }