visualizer: chrome devtools dark mode

[pavelvasev]

When devtools are in dark mode, extension screen is unreadable (black words on black background).
Devtools settings -> Preferences -> Appearance -> Theme: Dark.

[mreinstein]

a cool idea! I'm curious how you detect if the devtools are being rendered in dark mode or not? Is there a css declaration or global js variable?

[chriscoderdr]

I found out how to determine if Chrome's DevTools are in dark mode, but it’s not straightforward from a page itself.

chrome.devtools.panels.themeName

This property reveals the color theme set in the user's DevTools settings, with possible values being default and dark. This feature has been available since Chrome 59.

Here's the source for more information: Chrome DevTools Panels API

[mreinstein]

I've been thinking about ditching chrome devtools in favor of building a custom in-page UI. See #31 for details. This might be a bit of an undertaking but it would solve a lot of chrome plugin related issues, make it work in other browsers, and just generally be simpler/less code.

Do you have thoughts on this?

[chriscoderdr]

I've been thinking about ditching chrome devtools in favor of building a custom in-page UI. See #31 for details. This might be a bit of an undertaking but it would solve a lot of chrome plugin related issues, make it work in other browsers, and just generally be simpler/less code.

Do you have thoughts on this?

Sounds like a good direction! Building a custom in-page UI could definitely help with compatibility and reduce some Chrome-specific quirks. Just as a side note, though—most browsers these days, like Edge, are Chromium-based and support Chrome extensions, so we’ve got pretty solid compatibility already. But I totally see the appeal of having everything in-page and browser-agnostic. Excited to see where you take it!

[mreinstein]

we’ve got pretty solid compatibility already.

That's true, but there's a still a pretty complicated architecture of message passing and splitting of the app into multiple scripts which makes it somewhat complicated. A basic element would make this a lot easier. :)

Excited to see where you take it!

Shall I take that to mean you're not interested in working on this? : )

[chriscoderdr]

we’ve got pretty solid compatibility already.

That's true, but there's a still a pretty complicated architecture of message passing and splitting of the app into multiple scripts which makes it somewhat complicated. A basic element would make this a lot easier. :)

Excited to see where you take it!

Shall I take that to mean you're not interested in working on this? : )

Haha, yeah, you got it! I think it’s a cool idea and definitely has potential, but I’m pretty tied up with another project right now, so I can’t commit any time to it at the moment. I’ll keep it in mind for down the road, though—appreciate you asking!

[mreinstein]

I’m pretty tied up with another project right now, so I can’t commit any time to it at the moment

No worries, I'm in the same situation. I'm looking forward to doing this at some point. I just haven't heard from anyone on how useful this tool would be, or if anyone is using the existing plugin and finding it lacking. :)

[mreinstein]

btw not sure what you're building but you might find simillarly useful modules here: https://www.npmjs.com/org/footgun

More data oriented, purely functional modules that work together but are limited in scope. Slowly working torwards a complete framework.