-
Notifications
You must be signed in to change notification settings - Fork 66
Open
Description
Loving to browse websites that support automatic dark/light theme detection, I suggest to also add this functionality.
Usually the easiest way I do it on my websites is through the Dark Reader JavaScript library.
Example:
<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.51/darkreader.js"></script>
<script>
DarkReader.setFetchMethod(window.fetch);
// Enable when the system color scheme is dark.
DarkReader.auto({
brightness: 100,
contrast: 90,
sepia: 10
});
</script>Adding the above somewhere into the <head> of an HTML page will automatically switch to dark mode if the user has configured his system or browser to be in dark mode.
In addition, adding the following invert setting to selectively invert images on the website, too:
// Enable when the system color scheme is dark.
DarkReader.auto({
brightness: 100,
contrast: 90,
sepia: 10
},
// https://github.com/darkreader/darkreader/discussions/7577#discussioncomment-1768436
// https://www.w3schools.com/cssref/css_selectors.asp
{ invert: ['img[src*=".png"]'] });My suggestion is to also add something like the above to support dark mode on idownvotedbecause.
If including an external library is too far away from the project's policy, one could also relatively easy write some custom CSS code to support an auto dark mode.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels