Get CSS color-changes when using "Auto Dark Mode" in Chrome

Question

I turned on the flag 'Auto Dark Mode for Web Contents' in Chrome using experimental features via chrome://flags entered in omnibox. Then my website is automatically turned into "dark mode".

Inspected colors are inverted somehow

When I inspect an element through the developer tools, the colors say they are the original but they are inverted in some way.

I'm am only trying to see what my browser is emulating as "dark mode" for complex CSS statements like

background-image:-webkit-repeating-radial-gradient(center center,rgba(212,214,235,.2),rgba(212,214,235,1) 3px,transparent 1px,transparent 100%);

The emulator does this nicely and I just need the CSS codes for this to start developing my own Dark Mode for certain areas. This would save lots of time, as they seem to be adjusted "perfectly".

Being able to get the default "Dark Mode" generated through Chrome would save users LOTS of time and gives us a starting point to "customize" further.

Questions

• How can I get the CSS color that the buttons were inverted to?
• Is there a way to inspect the element's that have been converted - tool?

Answer 1

Depends on what you're trying to do. If you just want to check a color on your end, there are various utilities that can do that; try searching "pick color from screen" in DuckDuckGo or Google.

If you want to programmatically detect/inspect the changes that your site's visitors see, don't expect to succeed - obscure settings like this are often deliberately hidden to prevent device fingerprinting (edit: not that it answers your question, but it turns out you can at least detect that Auto Dark Mode is in effect). Your best bet is to use prefers-color-scheme in your CSS to control the effects of dark mode yourself.