vue项目主题切换

文章介绍了如何在项目中创建一个基于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)
      }
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值