Dark Mode Example

创作时间:

作者:

@小白创作中心

Dark Mode Example

引用

CSDN

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

暗黑模式（Dark Mode）是现代网页设计中的一个重要功能，它不仅能够提升用户的视觉体验，还能在低光环境下减少眼睛疲劳。本文将通过两个具体的代码示例，详细介绍如何使用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="dark" 属性时，CSS变量的值会改变，背景颜色为深色（#121212），文字颜色为白色（#ffffff）。

data-theme 这个属性是需要在js那里定义的，只有定义之后才可以识别到。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 中保存用户的选择。

热门推荐

从生活方式入手：如何通过饮食与运动预防骨骼疾病？