style.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import { useDesignStore } from '@/store/modules/designStore/designStore'
  2. /**
  3. * * 修改主题色
  4. * @param themeName 主题名称
  5. * @returns
  6. */
  7. export const setHtmlTheme = (themeName?: string) => {
  8. const e = window.document.documentElement
  9. if (themeName) {
  10. e.setAttribute('data-theme', themeName)
  11. return
  12. }
  13. const designStore = useDesignStore()
  14. e.setAttribute('data-theme', designStore.themeName)
  15. }
  16. /**
  17. * * 将通过的百分比与十六进制颜色的R、G或B相加
  18. * @param {string} color
  19. * @param {number} amount
  20. * @returns {string} color
  21. */
  22. const addLight = (color: string, amount: number): string => {
  23. const cc = parseInt(color, 16) + amount
  24. const c = cc > 255 ? 255 : cc
  25. return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
  26. }
  27. /**
  28. * * 根据通过的百分比点亮6个字符的十六进制颜色
  29. * @param {string} color
  30. * @param {number} amount
  31. * @returns {string} color
  32. */
  33. export const toLight = (color: string, amount: number): string => {
  34. color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
  35. amount = Math.trunc((255 * amount) / 100)
  36. return `#${addLight(color.substring(0, 2), amount)}${addLight(
  37. color.substring(2, 4),
  38. amount
  39. )}${addLight(color.substring(4, 6), amount)}`
  40. }