Systemwide dark/lightmode settings are becoming an standard in most Operating Systems like Android, iOS, MacOS, Manjaro and many many more. So why not use it on your Website or in your Webapp?
CSS-Media Queries
To check whether the user prefers the dark mode, a CSS3 feature called Media Queries is used. Media Queries are quite powerful, not only you can check for the preferred color-scheme. They are also used for responsive design based on the screen-size or specific styles for the printed versions.
CSS-Variables
For easy changes to the color theme you can utilize CSS Variables. You can define them like that.
html {
--variable-1: #dfdfdf;
--variable-2: url(https://example.com/example.png)
}
To use them just use var(<varname>) where you want the value to be inserted.
React to the setting
To activate the different themes we will put following code in our CSS file
html {
--color: #42464c;
--background: #f8f8f8;
}
@media (prefers-color-scheme: dark) {
html {
--color: #dfdfdf;
--background: #333435;
--color-subtitle: #ddd;
}
}
If the user activated darkmode the second definition will overrule the first one and the variables change, and so does your page.