React.js项目如何将dark mode设置为默认开启模式？

问题根因 #

• 大小写不匹配：你给useState的初始值是大写开头的'Dark'，但toggleMode中的判断条件是和全小写的'dark'做比对，两者不相等，导致初始状态判断逻辑失效。
• 初始化未应用样式：你只在切换模式的函数里写了修改页面样式的逻辑，页面首次加载时不会自动执行这段逻辑，哪怕初始值正确，暗黑模式的样式也不会自动生效。

修复方案 #

首先确保你已经从react中导入了useEffect钩子：

import React, { useState, useEffect } from 'react';

修正后的完整逻辑如下：

// 1. 修正初始值为全小写，和判断逻辑保持一致
const [mode, setMode] = useState('dark'); 

// 抽离公共样式设置逻辑，避免重复代码
const setModeStyle = (currentMode) => {
  if (currentMode === 'dark') {
    document.body.style.backgroundColor = '#283037';
    document.title = 'News Monk - Dark Mode';
  } else {
    document.body.style.backgroundColor = '#ffffff';
    document.title = 'News Monk - Light Mode';
  }
}

// 2. 组件挂载时自动执行样式初始化，页面加载默认显示暗黑模式
useEffect(() => {
  setModeStyle(mode);
}, []);

const toggleMode = () => {
  const newMode = mode === 'dark' ? 'light' : 'dark';
  setMode(newMode);
  setModeStyle(newMode);
}

可选优化（持久化用户选择） #

如果希望用户下次访问时保留上次切换的模式，可以结合localStorage做持久化存储：

// 初始化时优先读取本地存储的主题，没有则默认暗黑模式
const [mode, setMode] = useState(localStorage.getItem('news_monk_theme') || 'dark'); 

const toggleMode = () => {
  const newMode = mode === 'dark' ? 'light' : 'dark';
  setMode(newMode);
  setModeStyle(newMode);
  // 切换时存储用户选择到本地
  localStorage.setItem('news_monk_theme', newMode);
}

内容的提问来源于stack exchange，提问作者Deb