在前端项目里，通过JS切换link标签的href属性来加载不同的主题CSS文件，是实现多主题动态切换的常用方案。这种方式不需要复杂的CSS变量配置，只需要提前准备好不同主题的CSS文件，通过控制link标签的指向就能完成主题切换。
实现原理
页面中引入CSS文件通常会使用<link>标签，该标签的href属性决定了加载的CSS文件路径。我们可以通过JS获取对应的link标签，动态修改其href属性值，让浏览器加载不同主题的CSS文件，从而实现页面样式的整体切换。
基础实现步骤
1. 准备多套主题CSS文件
首先我们需要提前准备好不同主题的CSS文件，比如默认主题default-theme.css和深色主题dark-theme.css，两个文件里定义相同的类名，但是样式属性值不同。
default-theme.css内容示例：
/* 默认主题样式 */
.page-container {
background-color: #ffffff;
color: #333333;
}
.btn {
background-color: #1890ff;
color: #ffffff;
}
dark-theme.css内容示例：
/* 深色主题样式 */
.page-container {
background-color: #1f1f1f;
color: #e5e5e5;
}
.btn {
background-color: #177ddc;
color: #e5e5e5;
}
2. 页面中配置主题link标签
在HTML的<head>区域添加一个用于加载主题样式的link标签，并且给它设置一个唯一的id方便后续获取，初始href指向默认主题文件。
<head>
<meta charset="UTF-8">
<title>主题切换示例</title>
<link id="theme-link" rel="stylesheet" href="default-theme.css">
</head>
3. 编写JS切换逻辑
通过JS获取id为theme-link的link标签，修改其href属性为对应主题的CSS文件路径即可完成切换。
// 获取主题link标签
const themeLink = document.getElementById('theme-link');
// 切换主题的函数
function switchTheme(themeName) {
if (themeName === 'dark') {
themeLink.href = 'dark-theme.css';
} else {
themeLink.href = 'default-theme.css';
}
// 将当前主题存储到localStorage，刷新页面后保持主题状态
localStorage.setItem('current-theme', themeName);
}
// 页面加载时读取存储的主题，默认使用默认主题
window.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('current-theme') || 'default';
switchTheme(savedTheme);
});
4. 添加切换触发按钮
在页面中添加按钮，点击时调用切换主题的函数即可。
<body>
<div class="page-container">
<button class="btn" onclick="switchTheme('default')">默认主题</button>
<button class="btn" onclick="switchTheme('dark')">深色主题</button>
</div>
</body>
注意事项
- 主题CSS文件的路径需要正确，避免出现404加载失败的情况，如果项目使用了构建工具，需要注意打包后的文件路径变化。
- 切换主题后如果希望刷新页面保持当前主题，需要将主题标识存储到
localStorage或者sessionStorage中，页面加载时读取存储的值进行初始化。 - 如果主题CSS文件较大，切换时可能会有短暂的样式闪烁，可以在link标签加载完成后再显示页面内容，或者提前预加载主题CSS文件。
- 多套主题的CSS文件中，相同类名的样式定义需要覆盖完整，避免出现部分样式没有切换的问题。
适用场景
这种通过JS切换link标签实现主题切换的方案，适合主题数量不多、主题样式差异较大的场景，实现成本低，不需要依赖额外的CSS预处理工具或者CSS变量特性，兼容性也比较好，支持大部分主流浏览器。
CSS主题切换JS操作link标签动态加载CSS前端主题配置修改时间：2026-06-30 03:03:26