Skip to content

Please add an automatic dark mode #155

@UweKeim

Description

@UweKeim

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions