CSS实现暗黑模式

最新推荐文章于 2024-07-10 16:57:20 发布

代码有点萌

最新推荐文章于 2024-07-10 16:57:20 发布

阅读量768

点赞数 16

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_61281255/article/details/139151586

版权

暗黑模式

在这里插入图片描述

代码

<!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 中保存用户的选择。