纯JS实现主题切换教程
2025-10-10 14:33:36
0浏览
收藏
最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《纯JS实现主题与模式切换教程》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~
概述
在现代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.
关键点：
- 元素初始时带有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项目。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~
微信对方删除你怎么判断？方法全解析
- 上一篇
- 微信对方删除你怎么判断？方法全解析
- 下一篇
- 腾讯文档如何插入视频？
查看更多
最新文章
-
- 文章 · 前端 | 1星期前 | 定时器 · 前端 · 性能排查 · 接口请求 · 轮询 · setInterval · setInterval 页面可见性 clearInterval 前端轮询 请求堆积 定时器清理
- 前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查
- 490浏览 收藏
-
- 文章 · 前端 | 1星期前 | 前端 · 搜索框 · AbortController · 接口请求 · 状态管理 · Fetch AbortController 前端搜索 请求乱序 旧响应覆盖
- 前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底
- 295浏览 收藏
-
- 文章 · 前端 | 1星期前 | 前端 · 性能优化 · cls · 懒加载 · Core Web Vitals · 前端 图片懒加载 IntersectionObserver CLS 布局稳定
- 前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查
- 128浏览 收藏
-
- 文章 · 前端 | 1星期前 | 工程化 · 前端 · javascript · css · 弹窗 · 前端 z-index 遮罩层 stacking context Portal 弹窗层级
- 前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范
- 350浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
查看更多
AI推荐
-
- ljg-skills
- ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
- 1756次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！
- 1690次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。
- 1629次使用
-
- 剧云
- 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。
- 1828次使用
-
- 万象有声
- 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！
- 1813次使用
查看更多
相关文章
-
- JavaScript函数定义及示例详解
- 2025-05-11 502浏览
-
- CSS变量简化按钮悬停效果技巧
- 2026-05-31 501浏览
-
- JavaScript符号类型详解与应用
- 2026-05-31 501浏览
-
- HTML剪贴板复制粘贴怎么用
- 2026-05-26 501浏览
-
- data-*属性详解：HTML数据存储与DOM操作技巧
- 2026-05-25 501浏览
