feat: add auto dark/light theme support to starter config via prefers-color-scheme
#213
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This update introduces automatic theme synchronization with the system's dark/light mode using the CSS media query `prefers-color-scheme`. It replaces hardcoded colors with CSS variables and adds root-level light/dark definitions, ensuring the UI adapts dynamically based on user system settings. As a user on Windows 11 with an auto-scheduler for dark mode (based on sunset/sunrise), I often found it frustrating that the default zebar preset didn’t follow the system theme. This small but meaningful change makes zebar feel much more native and integrated into the daily flow. Tested on Windows, but the change is CSS-standard-based, so it should work on macOS and Linux as well.
|
📝Note: This is a replacement for #211 (which used an automatically generated branch name |
styles.cssstyles.css
|
This is super cool, thanks for putting this together! The CSS vars should make it easier for people to theme their colors as well 🙌 Apologies for getting around to reviewing this so late. I've been working on and off on a major v3 version bump which has a bunch of changes, but it's finally good to go. I'll get this PR included in a beta release of v3 later today. Btw for a lot of OSS projects, the branch names for PR's usually don't matter since we squash the commits anyways. |
styles.cssprefers-color-scheme
|
🎉 This PR is included in version 3.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ Add automatic dark/light theme support via
prefers-color-schemeThis update adds system theme synchronization to zebar using the CSS media query prefers-color-scheme.
Now, zebar will automatically adapt to your operating system's light or dark mode — no manual toggling required.
🎨 What changed
prefers-color-scheme: lightandprefers-color-scheme: dark.--text-size--icon-size🧠 Motivation
As a Windows 11 user with auto dark mode based on sunset/sunrise, I’ve always found it frustrating that the default zebar preset didn’t follow the system theme.
This small but meaningful tweak makes zebar feel more native, more modern, and better integrated into the daily workflow.
Also, there was previously no convenient way to customize font or icons size. With the new variables, it's now a little bit easier to adjust the UI to our preferences.
✅ Compatibility
🔄 Related
This might be an alternative way to partly resolve #203.
📸 Demo
Before (always dark mode)
before.mp4
After (auto light/dark)
after.mp4
Thanks for creating and maintaining glazewm & zebar 🙌