Dark mode can't be deactivated

[zunkelty]

When you disable darkMode in theme.config.js, I expect Nextra to be in light mode only. However, when you activate prefers-color-scheme: dark, the setting is overridden and the page is shown in dark mode. This is a problem if you have explicitly turned off dark mode before. The error is due to next-themes that automatically detects such settings and sets the color scheme to dark.

My suggestion: Dark mode is an opt-out feature which means that if darkMode is disabled, no theming logic whatsoever is active. It doesn't make sense to include next-themes still (and use it'sThemeProvider) when dark mode is deactivated.

Unfortunately, right now the option to disable dark mode is not how you expect it to be (and probably not how it's wanted?).

(I'm on version 2.0.0-alpha.54 if that makes any difference)

[D3Portillo]

Hello @zunkelty , Nextra depends on a theme key in localStorage to do the theming for dark/light modes.

If you add darkMode: false to config but manually do localStorage.setItem("theme", "dark") it'll display in dark mode.

Hope this helps. And it'll be awesome if you validate that after doing localStorage.setItem("theme", "light") the error persists : )

[smakosh]

Running into the same issue on the following project: https://github.com/smakosh/ontwik-ui

darkMode is turned off and default theme is set to light here: https://github.com/smakosh/ontwik-ui/blob/master/apps/public-docs/theme.config.js#L16

Still I'm getting dark mode when visiting the docs website: https://ontwik-ui.smakosh.com/

[erikmoyaers]

You can always show the page in light mode by setting the localStorage theme to 'light' whenever the localStorage theme has a different value. And only render the page after localStorage is set to 'light'.

in _app.js:

export default function Nextra({ Component, pageProps }) {
    const [canRender, setCanRender] = useState(false)

    useEffect(() => {
        if (window.localStorage.getItem("theme") !== "light") {
            window.localStorage.setItem("theme", "light")
        }
        setCanRender(true)
    }, [])

    return (
        canRender ? <Component {...pageProps} /> : <></>
    )
}

This is obviously a workaround but it might be useful to some.

[dimaMachina]

Let’s track fixing this unexpected behavior here https://github.com/shuding/nextra/issues/1389