How do I accurately match the current devtools theme?

[Warren Halderman]

Regarding the `chrome.devtools.panels.setThemeChangeHandler((theme) => { ... })` method, in the devtools settings:

• "auto" maps to the OS preference and sets the theme as either "dark" or "default."
• "light" confusingly maps to "default" in the handler, but correctly changes the base devtools appearance.
• "dark" correctly maps to "dark" in the handler and correctly changes the base devtools appearance.

With this setup, there appears to be no way of correctly mapping to the light theme, since the "light" theme setting maps to "default" in the handler, and "default" is "light" or "dark" depending on the OS. Is there any workaround?

[Oliver Dunk]

Hi Warren,

Could you clarify what you are looking to do?

We don't currently have this API documented, but from what I can see:

• "default" is essentially the light theme, and means either the user has the "auto" preference and light mode or the explicit light preference
• "dark" is the dark theme

That's definitely not completely intuitive so I will look at updating the documentation.

Thanks,

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/803a912c-fe7a-4881-a1fb-4181ed39ff90n%40chromium.org.

[Warren Halderman]

Hi Oliver,

I'm certainly walking on thin ice by using an undocumented API. 🙂

Yes, the main issue is that selecting "light" returns "default" in the handler, but the "default" theme does *not* always map to "light" -- it maps to whatever the OS preference is.

OS-level "dark" color scheme preference:

• (Devtools option) -> (theme passed to handler)
• "default" -> "dark"
• "light" -> "default" (so, "dark"?...)
• "dark" -> "dark"

OS-level "light" color scheme preference:

• "default" -> "default"
• "light" -> "default" (although inaccurate, this works since the OS is set to "light" as well)
• "dark" -> "dark"

Although updating the documentation is fine, I think there's a valid issue in the code with "light" returning "default" and not "light"

It's also possible I'm doing something incorrectly, and if so, please let me know!

In any case, thank you for your help!

[Warren Halderman]

Never mind, I found the source of my confusion.

I was also using the window object passed to the devtools.createPanel callback to check prefers-color-scheme using matchMedia.

That always matched the OS, but in devtools, "default" always matched "light". 😵‍💫

Thanks again!

[Oliver Dunk]

Got it - thanks so much for confirming! That matches what I was seeing as well so it seems like we've figured this out.

I'll work on getting the documentation updated.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB