Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Please add an automatic dark mode #155

Open
UweKeim opened this issue Jun 28, 2022 · 0 comments
Open

Please add an automatic dark mode #155

UweKeim opened this issue Jun 28, 2022 · 0 comments

Comments

@UweKeim
Copy link

UweKeim commented Jun 28, 2022

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/[email protected]/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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant