轻松掌握！5分钟學會 CSS3 实现主题切换的秘籍

2023-07-04 03:53:51

使用 CSS 变量进行主题切换：轻松更改网站的外观

摘要

CSS 变量是强大的工具，可让您轻松自定义和管理网站的样式。通过使用 CSS 变量，您可以轻松切换网站的主题，从而实现不同的视觉效果。本文将指导您逐步了解如何使用 CSS 变量进行主题切换，并提供一个示例代码和常见问题解答部分。

了解 CSS 变量

CSS 变量允许您在样式表中存储和使用值。这意味着您可以轻松更改网站的整体外观，而无需更改大量代码。要定义 CSS 变量，您需要使用 :root 选择器。

例如：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #ffffff;
}

上述代码定义了三个 CSS 变量：--primary-color、--secondary-color 和 --background-color。您可以使用这些变量来存储网站的主要颜色、次要颜色和背景颜色。

使用 CSS 变量进行主题切换

要使用 CSS 变量进行主题切换，您需要在您的样式表中使用 var() 函数。此函数允许您使用 CSS 变量的值。

例如：

body {
  color: var(--primary-color);
}

上述代码将 body 元素的文本颜色设置为 --primary-color 变量的值。当您更改 --primary-color 变量的值时，body 元素的文本颜色也会随之更改。

示例代码

以下是一个示例代码，演示如何使用 CSS 变量进行主题切换：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      --background-color: #ffffff;
    }

    body {
      color: var(--primary-color);
      background-color: var(--background-color);
    }

    h1 {
      color: var(--secondary-color);
    }

    button {
      background-color: var(--primary-color);
      color: var(--background-color);
    }
  </style>
</head>
<body>
  <h1>CSS 变量主题切换</h1>
  <p>这是一个演示 CSS 变量主题切换的示例。</p>
  <button>切换主题</button>

  <script>
    const button = document.querySelector('button');

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