Darkmode.js 配置指南：如何设置默认主题为浅色模式

Darkmode.js 是一个轻量级的 JavaScript 库，能够为网站快速添加暗黑模式切换功能。本文将详细介绍如何通过配置选项实现默认显示浅色模式的效果。

核心配置原理

Darkmode.js 通过初始化时的配置对象来控制其行为。要实现默认浅色模式，关键在于两个配置项：

1. autoMatchOsTheme - 控制是否自动匹配操作系统主题
2. saveInCookies - 决定是否将用户选择保存在本地

完整配置示例

以下是实现默认浅色模式的完整配置代码：

const options = {
  bottom: '32px',                  // 按钮距离底部位置
  right: '32px',                   // 按钮距离右侧位置
  left: 'unset',                   // 按钮距离左侧位置
  time: '0.3s',                    // 主题切换过渡时间
  mixColor: '#fff',                // 混合颜色
  backgroundColor: '#fff',         // 浅色模式背景色
  buttonColorDark: '#100f2c',      // 暗黑模式按钮颜色
  buttonColorLight: '#fff',        // 浅色模式按钮颜色
  saveInCookies: true,             // 在Cookie中保存用户选择
  label: '🌒',                      // 暗黑模式按钮图标
  autoMatchOsTheme: false          // 禁用自动匹配系统主题
};

关键配置项详解

1. autoMatchOsTheme
   设置为 false 时，Darkmode.js 不会自动检测系统主题偏好，而是使用默认的浅色模式。

2. backgroundColor
   定义了浅色模式的背景颜色，设置为白色(#fff)确保初始状态为浅色。

3. saveInCookies
   启用后，用户的选择会被保存在本地，下次访问时会保持之前的设置。

实现步骤

1. 创建配置对象，设置 autoMatchOsTheme 为 false
2. 初始化 Darkmode 实例时传入配置对象
3. 调用 showWidget() 方法显示切换按钮

注意事项

• 如果之前已经访问过网站并选择了暗黑模式，可能需要清除浏览器缓存才能看到效果
• 配置中的颜色值可以根据网站设计进行调整
• 按钮位置参数可以根据实际布局需求修改

通过以上配置，网站将始终以浅色模式作为默认主题，同时保留用户手动切换的能力。这种实现方式既保证了用户体验的一致性，又提供了足够的灵活性。