【亲测免费】 Darkmode.js 安装与使用指南

2026-01-16 09:39:03作者：管翌锬

一、项目目录结构及介绍

当你从 GitHub 克隆了 Darkmode.js（https://github.com/sandoche/Darkmode.js.git）项目后，你会看到以下主要目录和文件：

目录结构概览

/
├── dist                     # 包含构建后的文件，包括 JS 和 CSS 文件
│   ├── darkmode.css        # 暗色模式的 CSS 文件
│   └── darkmode.min.js     # 构建后的最小化 JS 文件
├── src                      # 包含源码文件
│   └── index.ts            # TypeScript 源码主入口文件
└── examples                 # 示例代码目录，用于展示如何集成 Darkmode.js 到不同项目中
    ├── html                # HTML 示例
    ├── react               # React 示例
    ├── vue                 # Vue 示例
    ...

目录详细说明

dist
这个目录包含了编译完成且已经压缩过的最终文件，可以直接应用于生产环境。
src
这是源码存放的位置，使用 TypeScript 编写，以便进行类型检查和增强开发体验。
examples
这个目录包含了不同的框架或语言如何集成 Darkmode.js 的示范性代码。

二、项目的启动文件介绍

在 Darkmode.js 中，“启动”并不意味着像应用程序那样运行一个进程，而是指将其集成到你的项目中。最常见的“启动”过程是在HTML文件中引入darkmode.min.js文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 其他头标签 -->
</head>
<body>
    <!-- 页面内容 -->

    <script src="path/to/dist/darkmode.min.js"></script>
    
    <!-- 初始化 Darkmode.js -->
    <script>
      new Darkmode().showWidget();
    </script>
</body>
</html>

上述代码展示了如何在HTML中引入darkmode.min.js并初始化 Darkmode.js。showWidget()函数将在页面上生成一个用于切换暗色模式的小部件。

对于那些使用现代JavaScript模块加载机制（例如ESM、CommonJS等）的项目，可以使用如下方式导入和初始化 Darkmode.js：

import { Darkmode } from "path/to/dist/darkmode.esm.js"; // 对于 ESM
// 或
const Darkmode = require("path/to/dist/darkmode.cjs"); // 对于 CommonJS

const dm = new Darkmode();
dm.showWidget();

三、项目的配置文件介绍

虽然Darkmode.js本身不提供专门的配置文件供用户修改，但你可以通过构造函数传递参数来定制其行为。以下是如何创建一个带有自定义选项的新实例：

const options = {
  bottom: '64px',
  right: 'unset',
  left: '32px',
  time: '0.5s',
  mixColor: '#fff',
  backgroundColor: '#fff',
  buttonColorDark: '#100f2c',
  buttonColorLight: '#fff',
  saveInCookies: false,
  label: '',
  autoMatchOsTheme: true
};

const darkmode = new Darkmode(options);
darkmode.showWidget();