Dark Theme by Default

[moonymachine]

I've got my docfx generated site well underway. I'm using v2.64.0 and the modern template. I'm wondering how to configure the dark theme as the default setting when a new user comes to the site for the first time. The popup menu on the lower right hand corner of the site works great for setting the preferred theme, but I would like for the dark theme to be the default setting. Is there a way to easily configure that?

[VaclavElias]

That is interesting development around Dark Theme as it looks very good. I would recommend to wait, and keep it as opt-in because the theming is done by Bootstrap 5.3, and it is currently Alpha 3, I think they are still catching lots of bugs and processing lots of opinions how this should work.

The JavaScript which is controlling the theme is currently set as opt-in, maybe if Bootstrap 5.3 is out of alpha and stable, the default could be rather auto, so at least it goes dark for those who have Windows/System settings set as dark theme.

But my fellow devs from the Stride community also expressed wish to keep the Dark Theme as default, because it looks very good so maybe we could have such an option eventually 🙂. I can imagine, that some devs would like to have just Dark Theme.

[ghost]

As per @moonymachine's request, it would be really helpful to know how to switch on Dark Mode as the default for new visitors - I completely accept that keeping the default for new Docfx projects as "Light" makes sense while everything stabilises, but it would be very helpful to know how to force the switch if that is what you want to do now, accepting the risks, etc.

Can anyone post some basic instructions? Even if it means hacking on a file in between "metadata" and "build" steps...?

[yufeih]

Docfx default to auto which respects user's browser setting. Users theme preferences are stored in localStorage, customize the template to execute localStorage.setItem('theme', 'dark') before docfx.js should do the trick.

[moonymachine]

I'm going to go ahead and defer to your knowledge on this one and accept it as the answer, even though I have not tried it. As a Unity game dev, all of this web development is a bit out of my wheel house. Thank you to everyone for your assistance, and thank you to the maintainers for keeping up development on this repo!

[wilkinson-steve]

In case it helps, here is how I implemented @yufeih's suggestion. I have a custom template (see #8540 (comment) if you don't already) to which I added a main.js which looks like this:

// Set 'dark' theme as the default instead of 'auto'
function setTheme(theme) {
    localStorage.setItem('theme', theme)
  }

function initTheme() {
    setTheme(localStorage.getItem('theme') || 'dark')
  }

initTheme();

Note that if the page has already been served to the browser in question, you may need to remove the localStorage entry. You can do this from the browser's Developer Tools Console window by entering localStorage.removeItem('theme') and refreshing the page.

HTH.