// 默认的主题颜色
@background: var(--background, #f5f7fd);
@background-img: var(--background-img, white);
@header-background-img: var(--header-background-img, url("https://code-nav.top/statics/img/ssr/bg-boy.jpg"));
// 导出变量
:export {
  name: "less";
  background-img: @background-img;
  header-background-img: @header-background-img;
  background: @background;
}

model.ts

// 定义主题色变量值
export const themes:any = {
  theme0: {
    'background-img': `none`,
    'header-background-img':`url("https://code-nav.top/statics/img/ssr/bg-boy.jpg")`,
    'background': '#f5f7fd'
  },
  theme1: {
    'background-img': `none`,
    'header-background-img':`url("https://code-nav.top/statics/img/ssr/bg-girl.jpg")`,
    'background': '#f5f7fd'
  }
};

theme.ts

import { themes } from './model';
// 修改页面中的样式变量值
const changeStyle = (obj:any) => {
  for (let key in obj) {
    document
      .getElementsByTagName('body')[0]
      .style.setProperty(`--${key}`, obj[key]);
  }
};
// 改变主题的方法
export const setTheme = (themeName:any) => {
  const themeConfig = themes[themeName];
  changeStyle(themeConfig);
};

文件结构如下图：

3.vite.config.ts配置

需要将我们定义的variable.less在css预处理器中配置噢。

import path from 'path';
import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    /* CSS 预处理器 */
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#2186FB',
          // 配置我们定义的less样式变量
          hack: `true; @import (reference) "${path.resolve('./src/styles/variable.less')}";`
        },
        javascriptEnabled: true
      }
    }
  }
});

至此所有配置完成，现在我们准备使用吧！

三、如何使用

1.样式表变量替换样式

在我们需要设置主题色的地方将我们的变量引入，如我们需要添加一个背景色，则直接给颜色属性后面值设置为变量即可，如下图：

2.设置主题切换函数

这样我们就实现了默认的颜色变量渲染。想要实现多主题切换，需要在切换主题的函数内，调用主题切换函数，也就是上文中的theme.ts中的setTheme函数。如下图：

源码：

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
// 引入设置主题函数
import{ setTheme } from '../styles/theme';
interface MenuInfo {
  key: string;
  keyPath: string[];
  item: any;
  domEvent: MouseEvent;
}
export default defineComponent({
  name: 'Skin',
  components: {
    DownOutlined
  },
  setup() {
    // 主题切换函数
    const handleMenuClick = async (e: MenuInfo) => {
      setTheme(e.key);
      localStorage.setItem('theme', e.key);
    };
    onMounted(() => {
      // 主题本地存储持久化
      const theme = localStorage.getItem('theme');
      if (theme) {
        setTheme(theme);
      }
    });
    return {
      handleMenuClick
    };
  }
});
</script>

当我们使用切换功能时，若看到body设置了less颜色变量则设置成功，如下图：

如果你到了这一步，那代表你已经主题切换功能完美实现啦！恭喜恭喜！

用户体验度又上升啦！YYDS！

欢迎在评论区交流。

如果文章对你有所帮助，

❤️关注+点赞❤️鼓励一下

！博主会持续更新。。。。

主题切换功能在线体验以及原文链接：

https://code-nav.top/article/951

原文链接：https://blog.csdn.net/chaoPerson/article/details/131409443

一、需求

二、如何配置

1.安装依赖less

2.创建less变量和函数

variable.less