- **正确答案**：主题切换通常是通过前端技术实现的，主要包括 CSS 变量、JavaScript 控制状态以及存储用户偏好（如 localStorage）。其核心原理是根据用户的操作或系统设置动态加载或修改页面样式表，从而实现不同主题的视觉效果切换。 - **解答思路**：主题切换的基本流程可以分为以下几个步骤： 1. **定义多个主题样式**：通常使用 CSS 或 CSS 预处理器（如 SASS、LESS）为每种主题定义一套颜色变量和样式规则。 2. **检测用户选择或系统偏好**：可以通过按钮点击事件或者浏览器的 `prefers-color-scheme` 媒体查询来获取当前需要的主题。 3. **动态修改样式**：通过 JavaScript 修改 DOM 元素的类名，或者直接更新 `` 标签的 `href` 属性以加载不同的 CSS 文件；更现代的方式是使用 CSS 变量统一管理颜色值，并在运行时动态更改这些变量。 4. **持久化用户选择**：使用 `localStorage` 或 Cookie 保存用户的主题偏好，在每次页面加载时读取并应用该主题。 - **深度知识讲解**： **1. CSS 变量（CSS Custom Properties）** CSS 变量允许我们在 CSS 中定义可重用的变量，例如颜色、字体大小等。它们可以在整个文档中被引用，并且可以在运行时通过 JavaScript 动态修改。示例： ```css :root { --primary-color: #007bff; --background-color: #ffffff; } .dark-theme { --primary-color: #0056b3; --background-color: #121212; } ``` 在 HTML 中只需切换 body 的 class 即可： ```html ``` **2. JavaScript 控制逻辑** 通过 JS 监听点击事件或系统暗色模式变化，并修改对应的 class 或 CSS 变量。示例代码： ```javascript function setTheme(theme) { document.body.className = theme; localStorage.setItem('theme', theme); } // 页面加载时读取主题 window.onload = () => { const savedTheme = localStorage.getItem('theme') || 'light-theme'; setTheme(savedTheme); }; ``` **3. 响应式设计与系统偏好** 使用媒体查询可以自动适配系统默认的外观设置（如深色/浅色模式）： ```css @media (prefers-color-scheme: dark) { :root { --background-color: #121212; --primary-color: #0056b3; } } ``` **4. 持久化机制** 使用 `localStorage` 是最常见的方式，它比 cookie 更适合存储简单的键值对，并且不会随请求发送到服务器端，提高了性能。 **5. 性能优化** - 合理使用懒加载（Lazy Load）CSS 文件 - 将主题样式模块化，按需加载 - 使用 CSS-in-JS 技术（如 styled-components）动态注入样式 **6. 扩展应用场景** - Web 应用中的夜间模式 - 多品牌支持（白标方案） - 用户个性化定制（如企业后台系统） - **示例代码（完整流程）**： ```html Theme Switcher

Hello, Themed World!

``` 这个示例展示了如何通过 CSS 变量 + JS 控制 + localStorage 来实现一个完整的主题切换功能。

小厂前端面经（二）

全站热榜

创作者周榜