样式控制不同主题的页面切换：轻松搞定！

如今，人们对个性化和定制化的需求日益增长，网页设计也不例外。用户希望能够根据自己的喜好来定制网站的主题，以获得更舒适和愉悦的浏览体验。而作为网页设计师，我们有责任满足用户的需求，并提供尽可能多的主题选项。

在本文中，我们将向您展示如何使用CSS来控制不同主题的页面切换。您将学习如何使用媒体查询@media (prefers-color-scheme: light | dark)来查看用户是否开启了夜间模式，并使用:root的CSS变量来设置整个网站的主题。

使用媒体查询检测用户是否开启夜间模式

媒体查询是一种CSS技术，允许您根据某些条件来应用样式。在我们的例子中，我们将使用媒体查询来检测用户是否开启了夜间模式。

@media (prefers-color-scheme: dark) {
  /* 在这里设置夜间模式的样式 */
}

上面的代码将匹配所有开启了夜间模式的设备，并应用您在代码块中设置的样式。您可以使用任何CSS属性来设置样式，例如背景颜色、文本颜色、边框颜色等。

使用:root的CSS变量设置整个网站的主题

:root是CSS中的一个特殊选择器，它代表整个文档的根元素。您可以使用:root的CSS变量来设置整个网站的主题，包括文本颜色、背景颜色、边框颜色等。

:root {
  --text-color: #333;
  --background-color: #fff;
  --border-color: #000;
}

上面的代码设置了三个CSS变量：--text-color、--background-color和--border-color。您可以使用这些变量来设置整个网站的文本颜色、背景颜色和边框颜色。

根据用户选择切换主题

现在，我们已经了解了如何检测用户是否开启了夜间模式，以及如何使用:root的CSS变量来设置整个网站的主题。接下来，我们将把这两个技术结合起来，根据用户选择来切换主题。

<button id="theme-toggle">切换主题</button>

<script>
  const themeToggle = document.getElementById('theme-toggle');

  themeToggle.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');
  });
</script>

上面的HTML代码创建了一个按钮，当用户点击这个按钮时，将触发一个JavaScript函数。这个JavaScript函数将向HTML元素添加或删除.dark-theme类，从而切换网站的主题。

.dark-theme {
  --text-color: #fff;
  --background-color: #000;
  --border-color: #fff;
}

上面的CSS代码设置了.dark-theme类的样式，当用户点击切换主题按钮时，将应用这些样式，从而将网站的主题切换为夜间模式。

总结

在本文中，我们向您展示了如何使用CSS来控制不同主题的页面切换。您学习了如何使用媒体查询@media (prefers-color-scheme: light | dark)来查看用户是否开启了夜间模式，并使用:root的CSS变量来设置整个网站的主题。通过将这两个技术结合起来，您可以根据用户选择来切换主题，从而为用户提供更个性化和定制化的浏览体验。