dark mode by default

[ats1999]

Description

How can i keep dark mode by default

Link to Reproduction

https://www.dsabyte.com

Steps to reproduce

1. Go here
   when the website loads, the first white background appears then dark.

Chakra UI Version

latest

Browser

chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

My theme config

import { extendTheme } from "@chakra-ui/react"

const config = {
  initialColorMode: "dark",
  useSystemColorMode: false,
}

const theme = extendTheme({ config })

export default theme

So, you can see that the dark mode is enabled by default, but it's not appearing.

Users can only enable dark mode after clicking on the dark mode button.

[primos63]

It is set to Dark Mode, but you are experiencing an already known issue per the documentation

There are some solutions others have come up with. I cannot vouch for their effectiveness.
Here's one solution no-flash-chakra

[ats1999]

@primos63

I have already gone through the documentation. I am using nextjs to generate the pages on the server. So, why not chakra-ui generate the dark mode on the server instead of generating light mode pages.

This way theme config will get preference and if default theme is light then light pages will be generated, if default theme is dark then dark pages will be generated.

[primos63]

Hydration. SSR does not produce a static page. You'll note that when you load or refresh the page your text shifts because of the astronaut image loading. Did you implement what was suggested above the previous doc link I sent? It's about SSR and flashing.

For server-side rendered sites, e.g. in Next.js, you may want to know the color preference of a user upfront so you can avoid rendering the initial color mode and then changing it during hydration (so-called flashing).

[ats1999]

It's about SSR and flashing.

I am using SSG not SSR.

. Did you implement what was suggested above the previous doc link I sent?

Not yet!

[no-yan]

The current situation is that you need help debugging your site.
If you need more help, I suggest you move to the discussions and submit your repo or code there.

[ats1999]

What is the use of the prop initialColorMode: "dark" in theme. Am I assuming that if initialColorMode is dark then for the first time when user loads the page, then it should load dark version of the website. But anyway, it's loading light version of the page, until users toggle the theme.

[jeevansurendran]

@ats1999 one possible reason why this issue still exists for you is that at one point during development the chakra-ui set a flag in your local storage stating that the theme was light, you can maybe remove this flag and check if the website loads directly to the dark mode or not.

[ats1999]

@ats1999 one possible reason why this issue still exists for you is that at one point during development the chakra-ui set a flag in your local storage stating that the theme was light, you can maybe remove this flag and check if the website loads directly to the dark mode or not.

Hey, it's loading the dark theme, but still it's flashing.

[jeevansurendran]

maybe override your HTML to the color you want, manually and let chakra take care of it later on?

[ats1999]

maybe override your HTML to the colour you want, manually and let chakra take care of it later on?

This way, I need to customize everything, including text, heading, box, shadow, etc..

[anubra266]

@ats1999 if the only issue you're having is the slight flashing, the core team is working on that issue, please bear with them.

[Boniqx]

Was this fixed already? We are using ssg and having the same issue

[VivekKumar2380]

Having same error what they're doing