如何轻松地将黑暗模式添加到您的网站-js教程-PHP中文网

How to Easily Add Dark Mode to Your Website

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

第 1 步：设置 HTML

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

登录后复制

此按钮将触发切换模式。

第 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，该过程非常相似，但您将在组件内处理事情。操作方法如下：

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

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

import React, { useState } from 'react'; function App() { const [darkMode, setDarkMode] = useState(false); const toggleDarkMode = () => { setDarkMode(!darkMode); }; return (   
 ); } export default App;

登录后复制

在此示例中：

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

深色模式 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; }

登录后复制

本地存储：

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

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 (   
 ); } export default App;

登录后复制

这是发生的事情：