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

Default tab bar theme mixes light and dark backgrounds (interferes with some responsive favicons) #387

Open
kaelig opened this issue May 7, 2020 · 0 comments
Open

Default tab bar theme mixes light and dark backgrounds (interferes with some responsive favicons) #387

kaelig opened this issue May 7, 2020 · 0 comments

Comments

@kaelig
Copy link

kaelig commented May 7, 2020 •
edited
Loading

The default theme (in light mode) shows tabs with a mix of light and dark backgrounds. This interferes with responsive favicons built to respond to light/dark mode and expect a consistent lightness for tab backgrounds.

Light mode

As seen below, dark monochrome icons such as the GitHub favicon and the square one I've created for the example (both responsive), don't contrast well on a dark background.

  • active tab: light background
  • inactive tab: dark background

Screen Shot 2020-05-07 at 10 59 40 AM

Dark mode

All tabs are dark, allowing responsive icons to contrast well in both active and inactive tabs.

Screen Shot 2020-05-07 at 11 02 35 AM

Light mode with light theme

The light theme brings us very close to what I would expect (high contrast and similar backgrounds across tabs):

Screen Shot 2020-05-07 at 11 08 01 AM

Code to reproduce:

index.html

<!DOCTYPE html>
<title>Responsive favicon</title>
<link rel="icon" href="favicon.svg" />

favicon.svg

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <style>
    rect {
      fill: black;
    }
    @media (prefers-color-scheme: dark) {
      rect {
        fill: white;
      }
    }
  </style>
  <rect width="32" height="32" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kaelig and others