I am not sure why this qualifies as a front page article. To achieve color schemes in CSS only follow these steps.<p>1) Remove ALL color information from your CSS files and relocate that into a new CSS file only for color information. That is your default color scheme.<p>2) In that color scheme file prefix each rule with the same class name, possibly <i>colorDefault</i>.<p>3) Create a second color only CSS file with dark colors. This is your dark color scheme. Change the <i>colorDefault</i> class name to something else, possibly: <i>colorDark</i>.<p>4) Include those color files in your site using either media queries from the primary CSS or link tags in the HTML.<p>5) Finally add class name <i>colorDefault</i> to your HTML body tag. Use JavaScript to change that one class name as the user selects a different color scheme on user interaction.<p>Here is an example:<p><a href="https://github.com/prettydiff/share-file-systems/tree/master/lib/css">https://github.com/prettydiff/share-file-systems/tree/master...</a>
> It was pretty sure, that dark mode can only be implemented using JS<p>I used this in the 90's:<p>`<body bgcolor="#000000">`<p>You needed it to really appreciate the sparks from animated fire gifs.
Ain't there yet but soon we should be able to do this without CSS<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...</a>
CSS only theme toggles are possible by utilizing a checkbox and placing the body content below the checkbox in a container element. Then adding a transparent label element that controls the checkbox state somewhere else on the page and styling a pseudo-button however one likes below the label.<p>Then in CSS setting both the <i>prefers-color-scheme</i> media queries but also configuring how the colors should react when the checkbox state is changed. So if a user has <i>prefers-color-scheme:light</i> then when the theme switcher is clicked it styles the page the opposite (example selector: <i>.theme-switch:checked ~ .pagebody</i>). Can also add such styling as a default outside of media queries, too, for browsers that don't recognize <i>prefers-color-scheme</i>.<p>Saving the state across pages however requires some JS but just wanted to comment that CSS-only toggles are possible.
It’s ironic it says that the user should set the theme themselves via their OS because the author doesn’t like to use buttons on sites to do it.<p>The vast majority of users don’t know how to do that. I’m sure the vast majority of that group couldn’t really explain themes as a concept.
I'm pretty sure with all new CSS features theme toggle could be implemented without JS, but in that case it probably wouldn't reflect your current setting.
There's also:<p>`color-scheme: light dark`<p>which automatically switches the color scheme of default html elements depending on the preferred color scheme. No theming required!<p><a href="https://garrit.xyz/posts/2023-04-12-instant-dark-theme" rel="nofollow noreferrer">https://garrit.xyz/posts/2023-04-12-instant-dark-theme</a>
Very simple CSS only example, including JS-free toggling:<p><a href="https://codepen.io/theprojectsomething/pen/oNQYqRw" rel="nofollow noreferrer">https://codepen.io/theprojectsomething/pen/oNQYqRw</a><p>Note: Could be simplified with the :has selector but it isn't currently supported in Firefox.
I just used CSS variables at my portfolio [0]. I just don't feel like adding a toggle in it to switch between light/dark mode adds something of special value in this case.<p>[0] <a href="https://miler.codeberg.page/" rel="nofollow noreferrer">https://miler.codeberg.page/</a>
I implemented a dark mode on all of my websites. It has become so much easier with CSS variables. Just change the colour variables and the whole website goes dark.<p>The biggest challenge is images. You have to mind images with transparent backgrounds, as well as SVG icons with a fixed colour.
Sadly this isn't the best way to do it because you have no option to switch back to light scheme unless you manually do it in your System settings.
Uses SCSS which seems outdated.<p>Why not simply use native CSS variables? Worth pointing out since this is a post about doing something in a simple way.