概述
在现代web应用中，提供个性化的用户体验至关重要，其中主题和模式切换是常见的需求。本教程将展示如何利用纯javascript、css变量和html的类属性，构建一个动态切换页面主题（如“企业”、“离子”、“iti”主题）和显示模式（深色/浅色模式）的系统。这种方法不依赖任何框架，易于理解和实现，尤其适用于需要生成离线单页html文件的场景。
核心概念
实现主题与模式切换主要依赖以下几个核心概念：
- CSS变量（Custom Properties）: 定义全局或局部可重用的样式值，如颜色、字体等。通过修改这些变量的值，可以实现统一的样式更新。
- HTML类属性: 通过为HTML元素（通常是或更高级别的容器）添加或移除特定的CSS类，来应用不同的样式规则。
- JavaScript事件监听: 监听用户交互事件（如选择框的change事件或按钮的click事件），并在事件触发时执行相应的逻辑来修改元素的类属性。
- 元素作为样式控制中心: 将主题和模式相关的类直接应用于元素，可以确保整个页面都能响应这些样式的变化。
HTML结构
首先，我们需要一个基本的HTML结构，包含一个用于选择主题的下拉列表和一个用于切换深浅模式的按钮。
元素将作为我们应用主题和模式类的主要目标。选择一个主题
当前主题：empresas
Nostrud nostrud excepteur mollit anim. Sint proident officia anim eu pariatur laboris excepteur amet Lorem Lorem commodo consequat ullamco. Pariatur aute ut aliqua aliquip consectetur ea.
立即学习“Java免费学习笔记（深入）”；
关键点：
- 元素初始时带有voxel-theme-empresas和vscode-dark类，以及data-vscode-theme-kind属性，这定义了页面的初始主题和模式。
元素（id="page-title"）将用于动态显示当前主题名称。
CSS样式定义
接下来，我们定义不同主题和模式的CSS样式。我们将使用CSS变量来管理颜色，并通过类选择器将其应用于
元素。/* 定义主题相关的CSS变量 */
/* Empresas 主题 */
.voxel-theme-empresas {
--ids_color_action_primary_base: #ec7000;
--ids_color_darktBg_base: #001e4f;
--ids_color_lightBg_base: #fde9d7;
}
/* Ion 主题 */
.voxel-theme-ion {
--ids_color_action_primary_base: #a7ce2e;
--ids_color_darktBg_base: #133134;
--ids_color_lightBg_base: #efface;
}
/* Iti 主题 */
.voxel-theme-iti {
--ids_color_action_primary_base: #fe3386;
--ids_color_darktBg_base: #2b374a;
--ids_color_lightBg_base: #fcefef;
}
/* 全局基础样式 */
body {
font-family: Arial, sans-serif;
font-size: large;
transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}
h1 {
color: var(--ids_color_action_primary_base); /* 使用主题主色 */
}
/* 深浅模式样式 */
/* 浅色模式 */
.vscode-light {
background-color: var(--ids_color_lightBg_base);
color: var(--ids_color_darktBg_base);
}
/* 深色模式 */
.vscode-dark {
background-color: var(--ids_color_darktBg_base);
color: var(--ids_color_lightBg_base);
}关键点：
- 每个主题类（如.voxel-theme-empresas）定义了一组CSS变量，这些变量控制了该主题下的主色、深色背景和浅色背景。
- 深色模式类（.vscode-dark）和浅色模式类（.vscode-light）使用这些CSS变量来设置背景色和文本颜色。
- h1元素直接使用--ids_color_action_primary_base变量，确保其颜色随主题变化。
- body上添加了transition属性，使模式切换时颜色变化更加平滑。
JavaScript交互逻辑
最后，我们编写JavaScript代码来处理用户交互，动态修改
元素的类。document.addEventListener('DOMContentLoaded', () => {
// 获取相关DOM元素
const themeSelect = document.getElementById('theme-select');
const modeToggleButton = document.getElementById('mode-toggle-button');
const bodyElement = document.body;
const pageTitle = document.getElementById('page-title');
// 定义模式常量
const LIGHT_MODE_CLASS = 'vscode-light';
const DARK_MODE_CLASS = 'vscode-dark';
// 1. 初始化页面状态 (可选，但确保与HTML初始状态同步)
// 如果HTML中已经设置了初始类，这里可以省略，或者用于从localStorage恢复状态
// 假设HTML中已设置初始类，这里仅更新标题
const initialTheme = bodyElement.className.split(' ')[0];
if (initialTheme && initialTheme.startsWith('voxel-theme-')) {
pageTitle.textContent = `当前主题：${initialTheme.replace('voxel-theme-', '')}`;
themeSelect.value = initialTheme; // 确保下拉框选中正确的初始值
}
// 2. 主题选择器事件处理
themeSelect.addEventListener('change', event => {
const selectedThemeClass = event.target.value; // 获取选中的主题类名
const currentClasses = bodyElement.className.split(' '); // 获取当前body的所有类
// 找到当前的模式类（例如：vscode-dark 或 vscode-light）
let currentModeClass = '';
if (currentClasses.includes(LIGHT_MODE_CLASS)) {
currentModeClass = LIGHT_MODE_CLASS;
} else if (currentClasses.includes(DARK_MODE_CLASS)) {
currentModeClass = DARK_MODE_CLASS;
}
// 更新body的类：移除旧的主题类，添加新的主题类，并保留模式类
// 注意：这里假设主题类总是第一个，模式类总是第二个。更健壮的方法是遍历并移除所有voxel-theme-开头的类。
const newClasses = [];
currentClasses.forEach(cls => {
if (!cls.startsWith('voxel-theme-')) {
newClasses.push(cls);
}
});
newClasses.unshift(selectedThemeClass); // 将新主题类添加到最前面
bodyElement.className = newClasses.join(' '); // 更新body的类
pageTitle.textContent = `当前主题：${selectedThemeClass.replace('voxel-theme-', '')}`; // 更新标题显示
});
// 3. 模式切换按钮事件处理
modeToggleButton.addEventListener('click', () => {
const currentClasses = bodyElement.className.split(' '); // 获取当前body的所有类
const currentThemeClass = currentClasses.find(cls => cls.startsWith('voxel-theme-')); // 找到当前的主题类
let newModeClass;
if (bodyElement.classList.contains(DARK_MODE_CLASS)) {
// 当前是深色模式，切换到浅色模式
newModeClass = LIGHT_MODE_CLASS;
bodyElement.setAttribute('data-vscode-theme-kind', LIGHT_MODE_CLASS);
} else {
// 当前是浅色模式（或没有模式），切换到深色模式
newModeClass = DARK_MODE_CLASS;
bodyElement.setAttribute('data-vscode-theme-kind', DARK_MODE_CLASS);
}
// 更新body的类：保留主题类，更新模式类
bodyElement.className = `${currentThemeClass} ${newModeClass}`;
});
});JavaScript代码详解：
- DOM元素获取: 首先通过document.getElementById获取到需要操作的HTML元素，如主题选择框、模式切换按钮和元素。
- 常量定义: 定义LIGHT_MODE_CLASS和DARK_MODE_CLASS常量，避免魔法字符串，提高代码可读性和维护性。
-
主题选择处理 (themeSelect.addEventListener('change', ...)):
- 当用户从下拉列表中选择一个新主题时，change事件触发。
- 获取当前元素的所有类。
- 遍历这些类，移除所有以voxel-theme-开头的主题类。
- 将新选中的主题类添加到类列表中。
- 将更新后的类列表重新赋值给bodyElement.className。
- 同时更新h1元素的文本，显示当前主题。
-
模式切换处理 (modeToggleButton.addEventListener('click', ...)):
- 当用户点击切换按钮时，click事件触发。
- 获取当前元素的所有类，并找到当前的主题类（以voxel-theme-开头）。
- 检查是否包含DARK_MODE_CLASS。
- 如果包含，则切换到浅色模式，将newModeClass设置为LIGHT_MODE_CLASS。
- 如果不包含，则切换到深色模式，将newModeClass设置为DARK_MODE_CLASS。
- 更新的data-vscode-theme-kind属性，这有助于在某些情况下同步状态。
- 通过模板字符串${currentThemeClass} ${newModeClass}，重新组合主题类和模式类，并赋值给bodyElement.className。
注意事项与总结
- className与classList: 示例代码使用了className属性来整体替换元素的类字符串。className的优点是简单直接，但缺点是需要手动处理类字符串的解析和重组。另一种方法是使用classList API（add, remove, toggle, contains），它提供了更细粒度的类操作，避免了字符串操作的复杂性。在本例中，由于主题和模式类是独立的且通常只有两个，使用className进行替换是可行的。对于更复杂的类管理，classList通常是更好的选择。
- 初始状态: 确保HTML中元素的初始类与JavaScript代码的逻辑保持一致，或者在JavaScript加载后通过代码设置一个默认状态。
- CSS变量的继承: CSS变量具有继承性，定义在:root（或html）上的变量可以被所有子元素访问。在本教程中，我们将主题变量直接定义在.voxel-theme-*类中，并通过将这些类应用于来使其作用于整个文档。
- *`data-属性**: 示例中使用了data-vscode-theme-kind`属性来存储当前的模式状态。虽然CSS不直接使用它，但它可以在JavaScript中作为状态管理的一种方式，或者供其他脚本/工具读取。
- 代码健壮性: 在主题切换逻辑中，通过find方法查找当前主题类比简单地假设它在数组的第一个位置更健壮，可以避免因类顺序变化导致的错误。
通过以上步骤，您就可以使用纯JavaScript、HTML和CSS变量，构建一个功能完善且易于扩展的动态主题和模式切换系统。这种方法简洁高效，适用于各种Web项目。
