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.

Sign up for GitHub

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

Jump to bottom

Implement dark mode via light-dark() fn #8559

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Implement dark mode via light-dark() fn #8559

wants to merge 1 commit into from

Conversation

Turbo87
Copy link
Member

@Turbo87 Turbo87 commented Apr 29, 2024

This implements a dark mode for the user interface, based on the system theme setting. The color-scheme CSS attribute could eventually be overridden if the user does not want to use the system setting.

Examples

Screen Shot 2024-04-29 at 14 34 30
Screen Shot 2024-04-29 at 14 34 42
Screen Shot 2024-04-29 at 14 34 51
Screen Shot 2024-04-29 at 14 35 16
Screen Shot 2024-04-29 at 14 35 42
Screen Shot 2024-04-29 at 14 35 49
Screen Shot 2024-04-29 at 14 36 02

@Turbo87 Turbo87 added C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works A-frontend 🐹 labels Apr 29, 2024
@Turbo87 Turbo87 requested a review from a team April 29, 2024 12:48
@Turbo87
Copy link
Member Author

Turbo87 commented Apr 29, 2024

looks like I might have to double check that the PostCSS plugin is working correctly (see Percy), but this should still be available for review. I hope I didn't forget any pages...

also, do we require a user override button to ship this or can we ship this without one?

@eth3lbert
Copy link
Contributor

I would expect a color scheme toggle button to be included with this PR. This would allow users who don't want this change to simply switch back to the light theme.

@Turbo87 Turbo87 marked this pull request as draft April 29, 2024 15:56
@bors
Copy link
Contributor

bors commented Apr 30, 2024

☔ The latest upstream changes (presumably 16b9eab) made this pull request unmergeable. Please resolve the merge conflicts.

@bors
Copy link
Contributor

bors commented Apr 30, 2024

☔ The latest upstream changes (presumably 748e265) made this pull request unmergeable. Please resolve the merge conflicts.

@Turbo87
styles: Implement dark mode via light-dark() fn
e939287 
This implements a dark mode for the user interface, based on the system theme setting. The `color-scheme` CSS attribute could eventually be overridden if the user does not want to use the system setting.
@eth3lbert
Copy link
Contributor

I've implemented a simple dark mode toggle that can switch between light, dark, and system. Feel free to cherry-pick or modify it as needed if you find it helpful in any way. eth3lbert@0dc59e4

image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
A-frontend 🐹 C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works
Projects
crates.io team meetings
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@Turbo87 @eth3lbert @bors