-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Improve automatic dark mode support #3903
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
Conversation
for `prefers-color-scheme: dark` @media query and `[data-color-mode: auto]` reference : refined-github#3806 (comment)
de9613d to
ae1b421
Compare
fregante
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rather than duplicating the selector and color we should prefer existing variables
|
|
||
| [data-rgh-whitespace='space'] { | ||
| background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba(36,41,46,25%)"/%3E%3C/svg%3E'); | ||
| background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba(128, 128, 128, 50%)"/%3E%3C/svg%3E'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is what @silverwind had initially suggested #3772, a color that sits right in the middle and works for both. I took these comparative screenshots but I don't remember which one is before and which is the after, but they're almost identical anyway
This isn't resolved in |




for
prefers-color-scheme: dark@media queryand
[data-color-mode: auto]LINKED ISSUES:
Further improvements to Dark mode #3806 (comment)
TEST ENVIRONMENT:
<html>tag hasdata-color-mode: autoSTEPS TO TEST
emoji or the reaction avatars