如何轻松地将黑暗模式添加到您的网站

嘿！因此，如果您像我一样并且喜欢整个黑暗模式氛围，您可能会考虑将其添加到您的网站中。只需一点 CSS 和 JavaScript 即可轻松设置。我是这样做的。

第 1 步：设置 HTML

首先，您需要一个按钮或开关，用户可以单击该按钮或开关在浅色和深色模式之间切换。我在这个例子中使用了一个简单的按钮（如果需要，您可以使用图标）：

<button id="dark-mode-toggle">Toggle Dark Mode</button>

此按钮将触发切换模式。

第 2 步：添加浅色和深色模式的 CSS

接下来，您需要定义浅色模式和深色模式的外观。在 CSS 中，您将设置默认样式（这将是您的浅色模式），然后添加一个覆盖这些样式的深色模式类。

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

这是发生的事情：

• 灯光模式（默认）：正文为白色背景和黑色文字。我添加了一个过渡，以使模式之间切换时的变化更加平滑。
• 深色模式： .dark-mode 类将背景更改为深灰色，将文本更改为白色。

第 3 步：使用 JavaScript 在模式之间切换

现在是我们让按钮实际执行某些操作的部分。每当单击按钮时，这段 JavaScript 就会切换主体上的 .dark-mode 类。

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

这是一个细分：

• 切换类：单击按钮时，我们会在主体上切换 .dark-mode 类。这会改变浅色和深色模式之间的样式。
• 保存首选项：我通过将用户的首选项保存在 localStorage 中添加了一些额外内容。这意味着，如果他们选择深色模式，即使他们离开并返回网站，它也会保持这种状态。

第 4 步：在页面加载时加载用户首选项

为了确保网站以用户喜欢的模式加载，您需要在页面加载时检查 localStorage 并相应地设置模式。

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

如果您使用 React，该过程非常相似，但您将在组件内处理事情。操作方法如下：

1. 设置深色模式的状态和 CSS 类：

使用 React 的 useState 来管理暗模式状态，并将适当的类应用于您的根元素：

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={toggleDarkMode}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

在此示例中：

• darkMode 状态决定深色模式是否处于活动状态。
• toggleDarkMode 函数可打开和关闭深色模式。

1. 深色模式 CSS：

将 .dark-mode 类添加到您的 CSS 中，就像以前一样：

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. 本地存储：

如果您希望主题偏好持续存在，您可以添加以下小调整：

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={() => setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

这是发生的事情：

• 初始状态： darkMode 的初始状态是根据 localStorage 中存储的值设置的。
• 效果挂钩： useEffect 挂钩会在暗模式更改时保存当前主题首选项。

就是这样！这是一种向 React 应用程序添加暗模式的更简单方法，不会使事情变得过于复杂。

以上是如何轻松地将黑暗模式添加到您的网站的详细内容。更多信息请关注PHP中文网其他相关文章！