需分别配置cursor编辑器暗黑模式与react项目ui暗黑模式：第一步设workbench.preferreddarktheme为cursor-dark或vs-dark，开启window.autodetectcolorscheme可随系统切换；第二步tailwind设darkmode为'class'，在body加初始类并用document.documentelement.classlist.toggle('dark', isdarkmode)激活；第三步用use-dark-mode hook，显式声明storagekey避免与cursor存储冲突；第四步对echarts等js渲染组件，需监听主题变化并重初始化实例，引入echarts/theme/dark.js启用内置暗黑主题。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中开发React项目时实现暗黑模式，需兼顾编辑器自身主题与项目内UI主题的双重适配——前者影响你写代码时的视觉舒适度，后者决定用户最终看到的页面效果。两者互不干扰，但配置逻辑完全不同。
第一步：设置Cursor编辑器本身的暗黑模式
打开Cursor → 点击左下角齿轮图标 → 选择「Settings」→ 在左侧搜索栏输入 【workbench.preferredDarkTheme】 → 在右侧下拉菜单中选择 cursor-dark 或 vs-dark。
这一步直接修改 settings.json 文件，是Cursor底层Electron架构识别的主题标识符，选错值（比如填成 dark）会导致主题加载失败且无报错提示。
若想让Cursor随系统自动切换，开启 window.autoDetectColorScheme 并设为 true；该开关依赖操作系统级 prefers-color-scheme 信号，Windows 10/11、macOS Mojave+、Linux GNOME/KDE 均支持。
第二步：在React项目中启用Tailwind CSS暗黑模式
确保项目已安装Tailwind并完成基础配置（tailwind.config.js 中 darkMode: 'class' 或 'media'）。推荐用 'class' 模式，便于手动控制。
在 index.html 的 标签上添加初始类名：（启用暗黑）或 （禁用），后续由JS动态切换。
在 src/index.tsx 或 main.tsx 中包裹根组件时，注入一个全局主题类管理器：
document.documentElement.classList.toggle('dark', isDarkMode) —— 这句必须执行，否则Tailwind的 dark: 变体无法生效，仅靠 类名不够。
第三步：用use-dark-mode Hook实现跨标签页同步切换
运行 npm install use-dark-mode 安装依赖。
创建自定义Hook useAppTheme.ts：
import useDarkMode from 'use-dark-mode';
export const useAppTheme = () => { const darkMode = useDarkMode(false, { classNameDark: 'dark', classNameLight: 'light', storageKey: 'app-theme-preference' }); return { ...darkMode };};
关键点：【storageKey必须显式声明】，否则默认键名 darkMode 会与Cursor编辑器的本地存储冲突，导致浏览器多个标签页间状态错乱。
在组件中调用：const { value: isDark, toggle } = useAppTheme();，然后绑定按钮 onClick={toggle} 即可。
第四步：适配ECharts等非CSS渲染组件
对于图表、Canvas、SVG等依赖JS逻辑渲染的组件，不能只靠CSS类名切换。
在 useEffect 中监听 isDarkMode 变化，重新初始化图表实例：
useEffect(() => { const chart = echarts.init(domRef.current, isDarkMode ? 'dark' : 'default'); // ... setOption return () => chart.dispose();}, [isDarkMode]);
注意：echarts内置的 'dark' 主题需额外引入 echarts/theme/dark.js，否则传参无效。
