less-全局动态修改主题颜色

木木王布乂

已于 2023-04-23 17:10:16 修改

阅读量1.1k

点赞数 2

文章标签：前端 css html5 less vue

于 2023-04-23 16:39:41 首次发布

本文链接：https://blog.csdn.net/qq_40133610/article/details/130324788

版权

使用less-全局动态修改主题颜色

引入less

npm install less less-loader --save

新建theme文件夹

在theme文件夹中新建global.less

@primaryColor: var(--primaryColor,255,255,255);
@primaryTextColor: var(--primaryTextColor,74,144,226);

// 背景颜色
.primaryColor {
  background: rgba(@primaryColor);
}
// 字体颜色
.primaryTextColor {
  color: rgba(@primaryTextColor);
}

在theme文件夹中新建model.ts

interface ThemeConfig {
    primaryColor: string,
    primaryTextColor: string
}

interface THemes {
    [key: string]: ThemeConfig
}

export const themes: THemes = {
    // 默认主题
    default: {
        primaryColor: `${255}, ${255},${255}`,
        primaryTextColor: `${74}, ${144},${226}`,
    },
    // 暗黑主题
    dark: {
        primaryColor: `${0},${0},${0}`,
        primaryTextColor: `${255},${255},${255}`,
    },
};

在theme文件夹中新建index.ts

import { themes } from "./model";


interface ThemeConfig {
    primaryColor: string,
    primaryTextColor: string
}

// 修改页面中的样式变量值
const changeStyle = (obj: ThemeConfig) => {
    for (let key in obj) {
        // @ts-ignore
        document.body.style.setProperty(`--${key}`, obj[key]);
    }
};
// 改变主题的方法
export const setTheme = (themeName: string) => {
    // @ts-ignore
    const themeConfig = themes[themeName];
    changeStyle(themeConfig);
};

// 自定义主题颜色
export const customTheme = () => {
    const themeConfig = {
        primaryColor: `0,0,0`,
        primaryTextColor: `49,49,49`,
    }
    changeStyle(themeConfig);
}

在main.ts引入global.less

import './theme/global.less'

在测试页面使用

<template>
	<div class="primaryColor primaryTextColor" @click="setColor">测试</div>
</template>
<script setup lang="ts" name="HelloWorld">
import { setTheme } from "@/theme/index";
let a:string = 'default';
const setColor = () =>{
    a = a=='default'?'dark':'default';
    setTheme(a);
}
</script>
<style scoped lang="less">

</style>