Dark mode theme

[mad-briller]

Hey there, me again!

It would be great if Doctum supported a dark mode theme out of the box.

Many modern documentation sites etc. ship with the ability for either the user to toggle the theme or for it to respect the user's preference using the prefers-color-scheme media query.

Would this be difficult to achieve in Doctum by default? I looked into the css in use and it seems that the theme was generated using a bootstrap theme generation utility, it would be possible to generate an alternate theme that is dark and then swap these out at run-time, but you would lose the ability to use the media query provide the user with their preference.

Another approach is to replace all color values with css variables and re-assigning those inside the media query:

:root {
  --bg-primary: #fff;
 }
 
@media (prefers-color-scheme: dark) {
  :root {
  --bg-primary: #000;
 }
}

This secondary approach would probably require a lot more work as it would require changing the theme generated by the external tool, and making everything a css variable, but it would provide the best user experience and require no javascript to modify classes or swap out script tags.

Let me know if you have any thoughts, and thanks for your time.

[williamdes]

Hey, thank you for letting me know !

I bet a 3third solution would be overriding colors for each element in a @media (prefers-color-scheme: dark) { query in the main css file. To be tried ;)

https://caniuse.com/?search=prefers-color-scheme

[williamdes]

This is some start to make something correct

@media (prefers-color-scheme: dark) {
    body {
        background-color: #242222;
    }
    #control-panel {
        background: #242222;
    }
    #api-tree {
        background: linear-gradient(to bottom, #242222, #242222 50%, #303133 50%, #303133);
        background-size: 100% 56px;
        color: #fff;
    }
    #api-tree a {
        color: #fff;
    }
    #site-nav.navbar-default {
        background-color: #242222;
    }
    #site-nav.navbar-default .navbar-brand,
    #site-nav.navbar-default .navbar-nav > li > a {
        color: #fff;
    }
}