vue项目主题切换

在 assets 目录下新建 theme文件夹 并创建 color.less theme.less

color.less

@import url('./theme.less'); // 顶部导航栏


// 默认的颜色 工业风 暗色系
.theme_default {
    .theme();
}


// 白色
.theme_white {
    .theme( // 主题主色
        #FFFFFF,
        // 主题高亮主色
        #4F79EF,
        // 全局文本主色
        rgba(0, 0, 0, 0.6),
        // 全局标题主色
        rgba(0, 0, 0, 0.9),
    )
}


// 黑色
.theme_dark {
    .theme( // 主题主色
        #242424,
        // 主题高亮主色
        #4F79EF,
        // 全局文本主色
        rgba(255, 255, 255, 0.6),
        // 全局标题主色
        rgba(255, 255, 255, 0.9),
    )
}

theme.less

/**
    主题样式通用文件
*/
.theme(@theme-global-bg: rgba(8, 30, 61, 1), // 主题主颜色
    @primary-color: #70f7ff, // 主题高亮主色
    @global-text-color: #70f7ff, // 全局文本主色
    @global-title-color: #ffffff, // 全局标题主色
) {


    // 全局文字主色
    .theme-global-text-color {
        color: @global-text-color !important;
    }


    // 全局标题颜色
    .theme-global-title-color {
        font-weight: 400;
        color: @global-title-color !important;
    }


    // 全局关键色
    .theme-primary-color {
        color: @primary-color !important;
    }
    // 全局主背景色
    .theme-global-bg {
        background: @theme-global-bg !important;
    }
}

2、 在main.js中引入 clolor.less

import './assets/theme/color.less'; // global style

3、在项目初始化执行

// 初始化主题
 var bodyClass = localStorage.getItem('themeColor') ? localStorage.getItem('themeColor') : 'theme_default';
  document.body.className = bodyClass;

4、 主题切换

//  主题列表
colorList: [
        { key: '工业风', color: '#234A74', type: 'theme_default' },
        { key: '白色系', color: '#ffffff', type: 'theme_white' },
        { key: '黑色系', color: '#242424', type: 'theme_dark' },
      ],

主题切换

changeColor(type) {
      const currentThemeColor= localStorage.getItem('themeColor') ? localStorage.getItem('themeColor') : 'theme_default';
      if (currentThemeColor!== type) {
        document.body.className = type;
        localStorage.setItem('themeColor',type)
      }
    },