在 Next JS 应用程序中默认启用暗模式答案

【问题标题】：Enable dark mode by default in Next JS application在 Next JS 应用程序中默认启用暗模式
【发布时间】：2022-08-10 05:18:34
【问题描述】：

我的 Next JS 应用程序中有 isDarkMode 和 handleDarkMode 函数

在 Header 组件中，我有一个切换按钮，允许用户从浅色切换到深色

<ThemeContainer>
            <label className=\"theme js-theme\">
              <span className=\"theme__icon\" onClick={() => handleDarkMode()}>
                <svg className=\"icon icon-theme-light\">
                  <use xlinkHref=\"#icon-theme-light\"></use>
                </svg>
                <svg className=\"icon icon-theme-dark\">
                  <use xlinkHref=\"#icon-theme-dark\"></use>
                </svg>
              </span>
            </label>
</ThemeContainer>

但是，我希望在用户第一次访问该网站时默认设置暗模式按钮 - 有什么线索可以实现吗？

非常感谢！

你好维克多！ “我希望默认设置暗模式按钮”是什么意思？您的意思是默认启用灯光模式吗？
你好！我希望默认启用暗模式 - 现在，它是默认启用的亮模式 :) 谢谢！
你好！你不能在文档初始化时调用handleDarkMode 函数吗？（至于首次访问时设置的默认主题，您可以查看本地存储）
嗨，艾丽西！谢谢您的回答！好吧，我真的不知道该怎么做……有什么想法吗？非常感谢...
@EricQvarnström 对不起，忘了提你！

标签： html css node.js reactjs next.js

【解决方案1】：

你可以使用 useEffect 钩子，没有依赖数组，所以它在页面加载时执行，或者简单地使用 window.onload 函数，但由于你使用的是 react，所以使用 useEffect 更容易：

 import {useEffect} from "react"
    
    useEffect(() => {
      handleDarkMode();
    }, []
)

【讨论】：