在前端开发中，我们经常需要在网站或应用中添加黑暗模式（Dark Mode）选项，让用户可以根据自己的喜好选择浅色或深色主题来使用网站。此时，npm 包 use-dark-mode 就是一个非常好用的工具，它可以帮助我们实现黑暗模式功能。
安装和使用
使用 npm 安装 use-dark-mode：
npm install use-dark-mode
然后，我们就可以在代码中使用它了：
import useDarkMode from 'use-dark-mode'; const [isDarkMode, setIsDarkMode] = useDarkMode(false);
useDarkMode 是一个 React Hook，它返回一个数组，第一个元素表示当前是否为黑暗模式，第二个元素是一个函数，用于设置是否开启/关闭黑暗模式。
配置选项
我们也可以向 useDarkMode() 函数传递一些可选的配置选项来使它适应我们的需求。
classNameDark和classNameLight：当网站开启黑暗模式时将应用的 CSS 类名。element：当需要设置 HTML 元素的样式时，可传入带有data-属性的元素。onChange：当主题改变时调用的回调函数。
示例代码：
const [isDarkMode, setIsDarkMode] = useDarkMode(false, {
classNameDark: 'dark-mode',
classNameLight: 'light-mode',
element: document.documentElement,
onChange: () => {
console.log('主题已改变');
}
});在网站中应用黑暗模式
我们可以在 HTML 文件的 <head> 标签中添加以下样式，来使得网站可以轻松地支持黑暗模式：
-- -------------------- ---- -------
---- -- ---- ---------- ----- ---
------- -----------------------
---------------------------------------------- ----------------------------- -- ---------
------------- - ---------- -
--- ----------- - ----------------------------------------
--- ---------- - ----------------------------- --- -------
-- ------------ ----------
------------------- - -----------
--
-------- ------------------ -
--- --------- - ---------------------
-- ----------- -
---------------------------------------------- --------
----------------------------- --------
- ---- -
---------------------------------------------- ---------
----------------------------- ---------
-
------------------------- -- -------- -------------
-
---------其中，.theme-switch 是黑暗模式开关的 class 名称。
我们还可以在网站的 CSS 文件或单独的样式文件中定义黑暗模式的样式。例如：
-- -------------------- ---- ------- -- ------ -- ---- - ----------------- ----- ------ ----- - -- ---- -- ---------- ---- - ----------------- ----- ------ ----- -
这样，当用户点击黑暗模式开关时，你的网站就会实现黑暗模式啦！
总结
在本文中，我们介绍了如何使用 npm 包 use-dark-mode 的基本用法和配置选项，还演示了如何应用黑暗模式。在实际项目中，我们应该根据自己的需求来使用它，以提高用户体验和网站质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/use-dark-mode