前端主题切换方案

theme: smartblue

前端开发中，主题切换逐渐成为一种常见需求。用户可能希望根据自己的喜好、习惯或者场景需求进行主题切换，例如切换日间与夜间模式。本文主要介绍如何在前端实现主题切换，以及一些应用实例。

一、CSS变量

CSS变量是一种实现主题切换的便捷方法。通过在CSS中定义变量，可以方便地修改主题颜色，例如：

  :root {
  --primary-color: #42b983;
  --secondary-color: #35495e;
}

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

在JavaScript中，可以通过修改CSS变量的值实现主题切换：

  function switchTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.style.setProperty('--primary-color', '#1c2022');
    document.documentElement.style.setProperty('--secondary-color', '#ffffff');
  } else {
    document.documentElement.style.setProperty('--primary-color', '#42b983');
    document.documentElement.style.setProperty('--secondary-color', '#35495e');
  }
}

二、CSS类名切换

另一种实现主题切换的方法是使用不同的CSS类名。首先，需要在CSS中定义各个主题的样式：

  .light-theme {
  --primary-color: #42b983;
  --secondary-color: #35495e;
}

.dark-theme {
  --primary-color: #1c2022;
  --secondary-color: #ffffff;
}

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

接下来，在JavaScript中通过切换元素的类名来实现主题切换：

  function switchTheme(theme) {
  const root = document.documentElement;

  if (theme === 'dark') {
    root.classList.add('dark-theme');
    root.classList.remove('light-theme');
  } else {
    root.classList.add('light-theme');
    root.classList.remove('dark-theme');
  }
}

三、CSS预处理器

CSS预处理器（如Sass、Less等）提供了更多灵活性，可以通过变量、混合（mixin）等特性实现主题切换。例如，使用Sass定义主题样式：

  $light-primary-color: #42b983;
$light-secondary-color: #35495e;

$dark-primary-color: #1c2022;
$dark-secondary-color: #ffffff;

@mixin theme($primary-color, $secondary-color) {
  .button {
    background-color: $primary-color;
    color: $secondary-color;
  }
}

.light-theme {
  @include theme($light-primary-color, $light-secondary-color);
}

.dark-theme {
  @include theme($dark-primary-color, $dark-secondary-color);
}

与CSS类名切换方法相似，在JavaScript中切换元素的类名即可实现主题切换。

四、应用示例

1. 本地存储

在实际应用中，用户可能希望浏览器记住他们的主题选择。这时，我们可以将用户的主题选择保存在 localStorage中。在页面加载时，检查 localStorage中是否有用户的主题选择，如果有，则应用相应的主题。以下是一个简单的示例：

  function saveThemeToLocalStorage(theme) {
  localStorage.setItem('theme', theme);
}

function getThemeFromLocalStorage() {
  return localStorage.getItem('theme');
}

function applyTheme(theme) {
  const root = document.documentElement;

  if (theme === 'dark') {
    root.classList.add('dark-theme');
    root.classList.remove('light-theme');
  } else {
    root.classList.add('light-theme');
    root.classList.remove('dark-theme');
  }
}

// 页面加载时，应用主题
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = getThemeFromLocalStorage();
  if (savedTheme) {
    applyTheme(savedTheme);
  } else {
    // 如果没有保存的主题，可以应用默认主题
    applyTheme('light');
  }
});

// 主题切换按钮
document.getElementById('switch-theme').addEventListener('click', () => {
  const currentTheme = getThemeFromLocalStorage();

  if (currentTheme === 'dark') {
    applyTheme('light');
    saveThemeToLocalStorage('light');
  } else {
    applyTheme('dark');
    saveThemeToLocalStorage('dark');
  }
});

2. 自定义主题

除了提供预定义的主题外，还可以允许用户自定义主题。例如，通过输入框获取用户自定义颜色，并实时应用主题。以下是一个简单的示例：

  <label for="primary-color">Primary color:</label>
<input type="color" id="primary-color" value="#42b983">

<label for="secondary-color">Secondary color:</label>
<input type="color" id="secondary-color" value="#35495e">

<button id="apply-custom-theme">Apply custom theme</button>

  function applyCustomTheme(primaryColor, secondaryColor) {
  document.documentElement.style.setProperty('--primary-color', primaryColor);
  document.documentElement.style.setProperty('--secondary-color', secondaryColor);
}

document.getElementById('apply-custom-theme').addEventListener('click', () => {
  const primaryColor = document.getElementById('primary-color').value;
  const secondaryColor = document.getElementById('secondary-color').value;

  applyCustomTheme(primaryColor, secondaryColor);
});

五、总结

本文介绍了三种前端主题切换方案：CSS变量、CSS类名切换和CSS预处理器。同时，也探讨了如何在实际应用中实现主题切换的功能，例如本地存储用户的主题选择和允许用户自定义主题。

在实践中，可以根据项目的具体需求选择合适的主题切换方案。例如，如果项目中已经使用了CSS预处理器，那么可以考虑使用相应的预处理器特性来实现主题切换。如果项目对浏览器兼容性要求较高，可以选择CSS类名切换方案。而如果希望实现更简洁的代码和更好的性能，CSS变量是一个不错的选择。