vue项目主题切换

原创已于 2023-04-14 10:20:01 修改 · 756 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #编辑器 #github

于 2023-04-14 10:12:55 首次发布

文章介绍了如何在项目中创建一个基于Less的动态主题系统。首先在assets目录下创建theme文件夹和color.less文件，定义不同主题的颜色变量。然后在main.js中引入color.less作为全局样式。接着，通过初始化函数设置body类名以应用主题。最后，提供了主题切换的逻辑，允许用户在工业风暗色系、白色系和黑色系之间切换，主题选择会存储在localStorage中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 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)
      }
    },