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

myzjeezk 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(143)

我在我的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>

然而，我想黑暗模式按钮被默认设置为当用户访问网站的第一次-任何线索，我如何才能实现这一点？
非常感谢！

reactjs

来源：https://stackoverflow.com/questions/71844026/enable-dark-mode-by-default-in-next-js-application

2条答案

按热度按时间

k4emjkb11#

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

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

赞(0）回复(0）举报 2023-04-20

mgdq6dx12#

我只是简单地在html标签上添加了dark类，比如<Html className="dark">。我还尝试使用useEffect，但它不起作用，因为它在dom已经加载后执行回调。

赞(0）回复(0）举报 2023-04-20

我来回答

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

2条答案

相关问题

热门标签

最新问答