随着黑暗模式的流行，许多网站开始提供黑暗模式选项。实现黑暗模式需要添加大量的 CSS 和 JavaScript 代码，如果您的网站有多个主题，则需要编写许多类似的代码。 这就是为什么我们要介绍 dark-mode-cli 这个 npm 包。这是一个可以帮助您快速将黑暗模式添加到网站中的 npm 包。
安装
在开始之前，您需要确保已经安装了 Node.js 和 npm（Node.js 包管理器）。
使用以下命令来安装 dark-mode-cli：
npm install -g dark-mode-cli
以上命令将全局安装 dark-mode-cli 包。
使用
要使用 dark-mode-cli 包，在您的项目根目录中创建一个 CSS 文件来存储关于黑暗模式的样式，例如 styles-dark.css。这个文件将包含黑暗模式下的样式。
然后，在您的 HTML 页面中将样式表链接到您的页面上：
<link rel="stylesheet" href="styles.css">
接下来，使用 dark-mode-cli 创建一个新的 CSS 文件，以包含和覆盖黑暗模式下的样式。使用以下命令：
dark-mode init
这将创建一个名为 styles-dark-mode.css 的新样式表文件，您可以在其中添加黑暗模式下的样式。
在您的 HTML 页面中添加以下脚本，以根据用户的系统首选项或手动切换来启用或禁用黑暗模式：
<script src="node_modules/dark-mode-cli/dark-mode.js"></script>
现在，您已经设置了 dark-mode-cli，接下来启用黑暗模式。
启用黑暗模式
使用以下命令来启用黑暗模式：
dark-mode enable
这将启用黑暗模式，并将应用程序的外观更改为黑暗模式。
您可以在以上命令中包含以下选项：
--source: 要更改的 CSS 文件的路径。默认情况下，它会寻找名称为styles-dark-mode.css的文件在您的项目根目录下。--target: 以什么样的命名方式创建新样式表。默认情况下，它将在原始文件所在的目录中创建名为styles.css-dark的新文件。--no-backup: 在创建新文件时，使用此选项不会创建原始 CSS 文件的备份。--watch: 允许dark-mode-cli在更改样式表时自动重新编译生成新的 CSS 文件。
禁用黑暗模式
使用以下命令来禁用黑暗模式：
dark-mode disable
这将禁用黑暗模式，并将应用程序的外观更改为白色主题。
深入学习
dark-mode-cli 是基于 PostCSS，cssnano 和 autoprefixer 构建的。 PostCSS 是一个 CSS 处理器工具，让开发者可以为其项目开发自己的 PostCSS 插件。 dark-mode-cli 使用 PostCSS 插件通过操作 CSS 样式来启用和禁用黑暗模式。
你也可以创建自己的 PostCSS 插件，并在 dark-mode-cli 中使用自定义插件。
指导意义
dark-mode-cli 让黑暗模式的实现变得更加容易，避免了开发者需要编写复杂的 CSS 和 JavaScript 代码来实现黑暗模式。它是一个可以帮助您提高网站访问性能和用户体验的工具。
通过 dark-mode-cli 的学习，您还可以了解到 PostCSS 工具和插件的使用方法，提高您的工作效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de17d