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

Implement auto dark mode in CSS #2440

Closed
atjn opened this issue Sep 21, 2024 · 3 comments
Closed

Implement auto dark mode in CSS #2440

atjn opened this issue Sep 21, 2024 · 3 comments
Assignees
Labels
A-Style Area: Style (CSS, etc.) A-Theme Area: Theme C-enhancement Category: Enhancement or feature request

Comments

@atjn
Copy link

atjn commented Sep 21, 2024

Problem

Currently, the page will load with a default light style, then JS will take over and if it detects that it is in "auto theme" mode and that the browser is in dark mode, it replaces the light colors with dark colors. This causes a few problems:

  • If the internet connection is slow, the page will display the light colors first, destroying the dark mode user's eyes.
  • If the user has JS disabled or if it breaks in any way, they will never be able to have dark mode support.

Proposed Solution

You can use CSS media queries to perform the dark mode check inside the CSS.

Notes

Related: #1504

@atjn atjn added the C-enhancement Category: Enhancement or feature request label Sep 21, 2024
@ehuss ehuss added A-Style Area: Style (CSS, etc.) A-Theme Area: Theme labels Sep 21, 2024
@atjn
Copy link
Author

atjn commented Sep 21, 2024

This was apparently already implemented in #1069 but has regressed since then. I plan on submitting a bug fix soon.

@atjn
Copy link
Author

atjn commented Sep 21, 2024

@rustbot claim

@ehuss
Copy link
Contributor

ehuss commented Nov 2, 2024

I'm going to close as I think this should be resolved by #2454.

@ehuss ehuss closed this as completed Nov 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Style Area: Style (CSS, etc.) A-Theme Area: Theme C-enhancement Category: Enhancement or feature request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants