当前位置：首页 > VUE

vue less实现主题切换

2026-02-24 04:28:08VUE

Vue 项目中实现 Less 主题切换

安装依赖 确保项目已安装 less 和 less-loader，用于解析 Less 文件。若未安装，可通过以下命令安装：

npm install less less-loader --save-dev

定义主题变量 在 src/styles 目录下创建主题文件，例如 theme.less，定义变量：

// 默认主题
@primary-color: #1890ff;
@background-color: #f5f5f5;

// 暗色主题
[data-theme="dark"] {
  @primary-color: #001529;
  @background-color: #000;
}

全局引入 Less 文件 在 main.js 或入口文件中全局引入主题文件：

vue less实现主题切换

import '@/styles/theme.less';

动态切换主题 通过修改 document.documentElement 的 data-theme 属性实现切换：

// 切换至暗色主题
document.documentElement.setAttribute('data-theme', 'dark');

// 切换回默认主题
document.documentElement.removeAttribute('data-theme');

组件中使用主题变量 在 Vue 组件的 <style> 标签中直接使用 Less 变量：

vue less实现主题切换

<style lang="less">
.button {
  background-color: @primary-color;
  color: white;
}
</style>

进阶：多主题管理 对于多主题场景，可通过动态加载不同 Less 文件实现：

创建多个主题文件如 theme-light.less 和 theme-dark.less。

通过 JavaScript 动态切换加载的主题文件：

function loadTheme(themeName) {
const link = document.getElementById('theme-style');
if (link) link.remove();
const newLink = document.createElement('link');
newLink.id = 'theme-style';
newLink.rel = 'stylesheet';
newLink.href = `/path/to/theme-${themeName}.less`;
document.head.appendChild(newLink);
}

注意事项