vue项目自定主题及字体大小以及颜色

1.新建seeting.js(前提是你项目里用了less)

//自定义字体及主题颜色
export function defaultFontSize(fontSizec,color){
  let headerHeight='166px'
  let navHeight='75px'
  let fontSizeXl = '36px'
  let fontSizeLg = '26px'
  let fontSizeMd = '24px'
  let fontSizeSm = '22px'
  let fontSizeXs = '20px'
  let fontSizeXXs = '18px'
  let userInfoWidth = '90px'
  let fontSizeAnticon = '60px'
  let defaultColor =color
  switch (fontSize) {
    case '24px':
      headerHeight='144px'
      navHeight = '53px'
      fontSizeXl = '28px'
      fontSizeLg = '20px'
      fontSizeMd = '18px'
      fontSizeSm = '16px'
      fontSizeXs = '14px'
      fontSizeXXs = '14px'
      userInfoWidth = '70px'
      fontSizeAnticon='30px'
      break;
    case '16px':
        headerHeight='113px'
        navHeight = '40px'
        fontSizeXl = '32px'
        fontSizeLg = '20px'
        fontSizeMd = '18px'
        fontSizeSm = '16px'
        fontSizeXs = '14px'
        fontSizeXXs = '12px'
        userInfoWidth = '70px'
        fontSizeAnticon='34px'
        break;
    case '14px':
      headerHeight='113px'
      navHeight = '40px'
      fontSizeXl = '30px'
      fontSizeLg = '18px'
      fontSizeMd = '16px'
      fontSizeSm = '14px'
      fontSizeXs = '12px'
      fontSizeXXs = '10px'
      userInfoWidth = '70px'
      fontSizeAnticon='34px'
      break;
    default:
      break;
  }
  return {
    '@primary-fontSize': fontSize,
    '@primary-fontSize-xl':fontSizeXl,
    '@primary-fontSize-lg': fontSizeLg,
    '@primary-fontSize-md': fontSizeMd,
    '@primary-fontSize-sm':fontSizeSm,
    '@primary-fontSize-xs':fontSizeXs,
    '@primary-fontSize-xxs':fontSizeXXs,
    '@primary-anticon':fontSizeAnticon,
    '@header-height':headerHeight,
    '@primary-userInfoWidth':userInfoWidth,
    '@nav-height':navHeight,
    '@defaultColor':defaultColor,
  }
}
const updateThemeFonSize = primaryColor => {
    console.log(primaryColor)
  if (!primaryColor) {
    return;
  }
  console.info(`正在编译主题!`)
  function buildIt() {
    // 正确的判定less是否已经加载less.modifyVars可用
    if (!window.less || !window.less.modifyVars) {
      return;
    }
    localStorage.setItem('fontSize',primaryColor)
    // console.log(localStorage.getItem('color'))
    
    let defaultSize = defaultFontSize(primaryColor)
    // console.log(defaultSize)
    // less.modifyVars可用
    window.less.modifyVars({
        '@primary-color': localStorage.getItem('color'),
        '@btn-primary-bg': localStorage.getItem('color'),
        ...defaultSize
      })
      .then(() => {
        console.log(`成功`);
      })
      .catch((err) => {
        //   console.log(err)
        // console.error(`失败`);
      });
  }
  buildIt();
};
export { updateThemeFonSize }

2.在你需要自定的地方引入updateThemeFonSize，然后传入字体跟主题颜色

import { updateThemeFonSize } from '@/utils/setting'
updateThemeFonSize('24px','#f00)

 3.vue3.0在public静态文件夹里面新建文件，在index.html里面引入fontSize.less。自此完成了，快配置试试