Auto color theme without JavaScript

[kdkasad]

I would really like to have a JavaScript-free site. The only thing preventing that at this point is the theme toggler (and search, but I'll just disable that).

I think it would be a good idea to move the check for the browser's preferred color scheme to the CSS file instead of running it as a script. That way if the user has disabled scripts, their preferred color scheme can still be used.

This would be a bit tricky to pull off, though, since the theme toggle button (if enabled) would need to override the CSS rule for the color scheme.

First idea (not ideal; see second idea below)

My idea at least for now is, only if the theme toggle button is disabled and theme is auto, then use only CSS rules to detect the browser's preferred color scheme. This would involve removing the folllowing (lines 32-29) from layouts/partials/header.html:

{{- /*  theme-toggle is disabled and theme is auto  */}}
{{- else if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark"))}}
<script>
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

And adding the following to assets/css/theme-vars.css:

{{- if (and (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark")) .Site.Params.disableThemeToggle) }}
@media (prefers-color-scheme: dark) {
    :root {
        --theme: #1d1e20;
        --entry: #2e2e33;
        --primary: rgba(255, 255, 255, 0.84);
        --secondary: rgba(255, 255, 255, 0.56);
        --tertiary: rgba(255, 255, 255, 0.16);
        --content: rgba(255, 255, 255, 0.74);
        --hljs-bg: #2e2e33;
        --code-bg: #37383e;
        --border: #333;
    }
    .list {
        background: var(--theme);
    }
}
{{- end }}

Implementation at kdkasad@f706372bffcd124ae94ac60fccf4a40e707806a8

Second idea

It might actually be better to add the CSS shown above in a <noscript> element if theme is set to auto. That way it doesn't matter if the theme toggle button is enabled or not; it won't work anyways if JS is disabled.

Implementation at kdkasad@786c944d2e92f29a0e67ac8e904e30c2b70a1c69

@adityatelange what do you think of these ideas, and do you have any better solutions?

[adityatelange]

@kdkasad I think I had previously pushed out 2nd one (noscript) before few months, but due to some glitch forced pushed to solve it, although it seems fine to me now ..

[kdkasad]

I've tested it a bit and nothing appears to break. I'll open a PR for it.