search

Matsuuu / web-component-devtools

Web Component DevTools is a Browser Extension enhancing the development experience of Web Component developers
https://matsuuu.github.io/web-component-devtools/
MIT License
131 stars 3 forks source link

[Feature Request]: CSS: prefers-color-scheme and firefox vars #26

Closed bennypowers closed 2 years ago

bennypowers commented 3 years ago

Which browser are you using?

FireFox

Is your feature request related to a problem? Please describe.

  1. Plugin styles should match firefox dev tools. They are built with wc and CSS custom properties. For example, the dev tools main toolbar uses a css var called --theme-toolbar-hover for the main toolbar tabs.
  2. Plugin should match the browser's colour scheme (i.e. dark mode support)

Describe the solution you'd like I haven't looked into the chrome side, but i suggest defining colours in terms of firefox vars with chrome fallbacks, e.g.

background: var(--theme-body-background, var(--whatever-chrome-uses, inherit))

Describe alternatives you've considered compile a different bundle for ff, but that's :sad-face:

Additional context inspecting FF devtools' styles is easy, just launch ff on any page, open dev tools, then hit ⌘-⇧-⌥-i

note the default sans-serif font

Screen Shot 2021-08-04 at 11 21 47
Matsuuu commented 3 years ago

Cheers Benny!

From the beginning I've wanted to make the devtools styling match how other devtools look like, while not creating separate styles per browser.

But this kind of improvement is well welcome in this, and especially since it'll be done with css variables.

As you said yourself, compile a different bundle for ff, but that's :sad-face: is something that we want to avoid, so I'm all up for creating the styles with css variables with chrome fallbacks :)

I'll look into this a bit and will gladly give some pointers as soon as I've gotten my refactor done

Matsuuu commented 2 years ago

An implementation of dark mode is shipping with 0.1.11.

Chrome doesn't have that much of a easy time to access the variables as the instances run in iframes. I'll do some further research on custom styling in v.1.12, but I'll close this for now :)