Select dark mode by default

[fsproru]

Hi @Mister-Hope,

Thanks for putting together this amazing theme! We're looking into using the dark theme only.

Is there a way we can specify dark mode to be on by default?

Best,
Alex

[Mister-Hope]

Currently, no.

Here is a possible workaround:

1. Disable the darkmode feature by setting themeConfig.darkmode: 'disable'
2. Add a clientRootMixin with a mounted lifetime to add theme-dark class on body.

export default {
  mounted(){
    document.body.classList.add('theme-dark');
  }
}

I may support this in the next version, but I will take a careful look on letting the SSR render the dark-theme by default after setting an optin while remaining the rest feature working.

[Mister-Hope]

I cannot catch up with an idea.

It has to work on SSR.

And here is the document:

I can only handle the render result of div.theme-container in theme.

If I try to add classes or attributes on this div to control the css vars, that will make the global UI appearance fail in darkmode.

If I want to modify body or div.app, I have to do it in mounted, and that won't change the SSR. So you will get a light page when rendering, then it turns to black (A very bad experience)

If you have any idea on how to implement this feature, welcome to comment. If you don't know either, you can try the workaround I described above.

[fsproru]

Was thinking of adding another config option to darkmode called enabled. And adding some code in mounted for that component to call this.setDarkmode(true) if configDarkmode === “enabled”. That should go through the same code path as if the user would click on the darkmode button in the UI. Let me know if that would work. Was looking into making a PR and wasn’t sure how to build the theme to test or make a release.