Dark Mode Example

创作时间:

作者:

@小白创作中心

Dark Mode Example

引用

CSDN

https://blog.csdn.net/weixin_61281255/article/details/139151586

暗黑模式已成为现代网页设计中的常见功能，它不仅能够提升用户体验，还能在低光环境下保护用户视力。本文将通过两个具体的代码示例，详细介绍如何使用CSS和JavaScript实现网页的暗黑模式切换功能。

代码示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <style>
        body {
            background-color: #ffffff;
            color: #000000;
            transition: background-color 0.3s, color 0.3s;
        }
        body.dark-mode {
            background-color: #121212;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <button id="toggle-theme">Toggle Theme</button>
    <script>
        const toggleButton = document.getElementById('toggle-theme');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            const isDarkMode = document.body.classList.contains('dark-mode');
            localStorage.setItem('dark-mode', isDarkMode);
        });
        // Load the saved theme from localStorage
        const savedTheme = localStorage.getItem('dark-mode');
        if (savedTheme === 'true') {
            document.body.classList.add('dark-mode');
        }
    </script>
</body>
</html>

通过JavaScript来动态切换暗黑模式和普通模式。使用localStorage保存用户的选择，以便用户刷新页面或重新访问时仍然保持其选择。

代码示例二

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<style>
  :root {
    --background-color: #ffffff;
    --text-color: #000000;
  }
  [data-theme="dark"] {
    --background-color: #121212;
    --text-color: #ffffff;
  }
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
  }
</style>
</head>
<body>
  <h1>Hello, World!</h1>
  <button id="toggle-theme">Toggle Theme</button>
  <script>
    const toggleButton = document.getElementById('toggle-theme');
    toggleButton.addEventListener('click', () => {
      const currentTheme = document.documentElement.getAttribute('data-theme');
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
    });
    // Load the saved theme from localStorage
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-theme', savedTheme);
    }
  </script>
</body>
</html>

通过结合CSS变量和JavaScript，可以实现更灵活的主题切换，并使用CSS变量来管理颜色。

data-theme属性详解

当元素具有data-theme="dark"属性时，CSS变量的值会改变，背景颜色为深色（#121212），文字颜色为白色（#ffffff）。

data-theme是一个自定义HTML属性，用于存储与主题相关的信息。在你的例子中，它被用来指示当前的主题是“light”还是“dark”。CSS可以通过属性选择器[attribute-name]获取和应用特定属性值的样式。

`data-theme`详细解释

HTML中的data-theme属性：

data-theme="light"：这是一个自定义数据属性，初始值为 “light”。
当该属性的值为 “dark” 时，表示页面处于暗黑模式。

CSS属性选择器：

[data-theme="dark"]：这是一个CSS属性选择器，用于选择所有具有data-theme="dark"属性的元素。
当data-theme="dark"时，应用--background-color: #121212和--text-color: #ffffff。

JavaScript的功能：

读取和设置data-theme属性：通过document.documentElement.setAttribute('data-theme', currentTheme)来设置根元素的data-theme属性。
切换主题：当按钮被点击时，读取当前的data-theme属性，切换其值，并更新到localStorage中保存用户的选择。

热门推荐

适度饮酒，享受生活：清香型白酒的健康饮用法则