前言
diurnal 是一个基于 Node.js 的 npm 包，它可以帮助前端开发者在浏览器中切换夜间和白天模式。本文将详细介绍如何安装和使用 diurnal 包，并提供示例代码以帮助读者更好的学习，在日后的前端开发中更快地实现夜间模式的功能。
安装
安装 diurnal 很简单，只需要在命令行中输入以下代码即可：
npm install diurnal
然后在你的 JavaScript 文件中引入 diurnal 包：
import Diurnal from "diurnal";
如果你还没有配置 Babel，那么你可以通过下面的代码引入：
const Diurnal = require("diurnal");初步使用
创建一个 Diurnal 实例非常简单。只需使用类似下面的代码：
const diurnal = new Diurnal();
然后，你需要编写一个用于用户在浏览器中切换模式的函数：
function toggleMode() {
if (diurnal.mode === "day") {
diurnal.setMode("night");
} else {
diurnal.setMode("day");
}
}现在你可以使用这个函数来切换模式了。例如，你可能会将它连接到按钮上：
<button onclick="toggleMode()">切换模式</button>
点击按钮时，就会切换浏览器中的模式。
参数和选项
diurnal 包有一些可选的参数和选项，可以让你更好地控制它的行为。
参数
selector
selector 参数用于指定要添加样式的元素。如果没有指定，那么默认情况下会将样式添加到 body 元素上。
const diurnal = new Diurnal({
selector: "#content",
});选项
onChange
当用户切换浏览器中的模式时，可以执行一个回调函数。这通常用于控制页面上的其他元素。
-- -------------------- ---- -------
----- ------- - --- ---------
--------- ------ -- -
----- ------- - --------------------------------
-- ----- --- ------ -
------------------- - -------
- ---- -
------------------- - -------
-
--
---在这个示例中，我们使用 jQuery 选择器获取了一个带有 'mode' 类的元素，并根据模式更改了文本内容。
transition
transition 选项用于指定模式的转换速度，以毫秒为单位。默认情况下，转换速度为 100 毫秒。
const diurnal = new Diurnal({
transition: 200,
});dayClass 和 nightClass
dayClass 和 nightClass 选项分别用于指定白天模式和夜间模式的类名称。默认情况下，dayClass 和 nightClass 分别为'diurnal-day' 和 'diurnal-night'。
const diurnal = new Diurnal({
dayClass: "white-border",
nightClass: "black-bg",
});mode
mode 选项用于指定初始模式。默认情况下，初始模式为 'day'。
const diurnal = new Diurnal({
mode: "night",
});示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- ------------
------- --------------
------ ------- ---- ----------------------------------
----- ------- - --- ---------
--------- -----------
--------- -----------
----------- -----------
--------- ------ -- -
----- ------- - --------------------------------
-- ----- --- ------ -
------------------- - -------
- ---- -
------------------- - -------
-
--
---
-------- ------------ -
-- ------------- --- ------ -
-------------------------
- ---- -
-----------------------
-
-
---------
-------
-------- -
------- ------
-------- -----
---------------- -------
------------ -------
---------- ----
-
--------- -
----------------- ------
------ ------
-
--------- -
----------------- ------
------ ------
-
--------
-------
------
---- ------------------
----- --------------------
------
---- -------------
--------------
------- ------------------------------------
------
-------
-------结论
教程到此结束，通过本文，你已经了解了如何使用 diurnal 包在浏览器中切换夜间和白天模式。同时，你也学习到了一些高级用法和选项，用于更好地控制 diurnal 包的行为。下一步，我们鼓励你将 diurnal 应用于具体开发中，通过实际项目经验来深入研究它的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d770e