Skip to content

Conversation

@shinenelson
Copy link
Contributor

@shinenelson shinenelson commented Jan 18, 2021

for prefers-color-scheme: dark @media query
and [data-color-mode: auto]

  1. LINKED ISSUES:
    Further improvements to Dark mode #3806 (comment)

  2. TEST ENVIRONMENT:

    • Dark Mode is enabled for GitHub
    • System-wide dark mode is enabled
      • some way where the <html> tag has data-color-mode: auto
  3. STEPS TO TEST

    1. Show Whitespace
      • open any source file
      • confirm whether whitespace indicators are displayed
    2. Conflict Markers
      • open a pull request with merge conflicts
      • confirm whether the ⚠️ sign is darker
    3. Reaction Avatars
      • open any issue page
      • react on any comment
      • confirm whether there are incorrect white borders on the reaction
        emoji or the reaction avatars

for `prefers-color-scheme: dark` @media query
and `[data-color-mode: auto]`

reference : refined-github#3806 (comment)
Copy link
Member

@fregante fregante left a 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');
Copy link
Member

@fregante fregante Jan 18, 2021

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

Screen Shot 7

Screen Shot 6

Screen Shot 5

Screen Shot 4

@fregante fregante added the bug label Jan 18, 2021
@fregante fregante changed the title extend support for dark mode Improve automatic dark mode support Jan 18, 2021
@shinenelson shinenelson requested a review from fregante January 19, 2021 13:11
@fregante
Copy link
Member

Rather than duplicating the selector and color we should prefer existing variables

This isn't resolved in conflict-marker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

2 participants