如何将Docusaurus页面默认设置为深色模式

要把Docusaurus的默认显示模式从浅色切换为深色，只需修改项目配置文件即可，步骤如下：

• 修改配置文件
  打开项目根目录下的docusaurus.config.js，找到themeConfig节点，添加或更新colorMode配置项：

  module.exports = {
    // 其他已有配置...
    themeConfig: {
      // 其他主题配置...
      colorMode: {
        defaultMode: 'dark', // 设置默认模式为深色
        respectPrefersColorScheme: false, // 可选：忽略系统颜色偏好，强制使用默认设置
        // 若想禁用模式切换按钮，可取消下面注释
        // disableSwitch: true,
      },
    },
  };
  

  说明：

  • defaultMode设为'dark'即可将默认显示模式改为深色
  • respectPrefersColorScheme设为false时，会完全遵循你设置的默认模式，忽略用户的系统颜色偏好；如果设为true，当用户系统偏好深色时也会匹配，但默认仍为你设置的深色
  • 若不需要用户手动切换模式，可开启disableSwitch隐藏切换按钮

• 验证修改效果
  重启Docusaurus开发服务器（执行npm run start），刷新页面后就能看到页面默认以深色模式加载了。

内容的提问来源于stack exchange，提问作者Candido De Manchuria