webhintio / hint

💡 A hinting engine for the web
https://webhint.io/
Apache License 2.0
3.63k stars 685 forks source link

[extension-browser] UX: Colors are not accessible in FF dark mode #1504

Closed ststimac closed 5 years ago

ststimac commented 6 years ago

Running Firefox Developer tools in dark mode:

webhint-dark-theme-ff

The code results are not accessible due to color contrast. A short term solution would just make the code container box white, but that's also incredibly harsh contrast-wise.

I will work on getting some color codes for the intial dark theme for @antross

molant commented 6 years ago

We are using highlightjs so maybe there's a theme that can be used for dark mode.

antross commented 6 years ago

Yes, highlightjs has themes we can use for dark mode as a quick fix (right now we're just using the default theme for both light/dark which is the root of the issue). The options even include some light/dark pairings such as "solarized-light" and "solarized-dark".

That said, longer term I'd like to see us create our own light/dark syntax themes to align with the coloring used in the Sources/Debugger tabs for the browser we're running in. Bonus points if we can convince all our target browsers to expose their theme colors through a common API, injected CSS variables, etc.

antross commented 6 years ago

@ststimac I fixed this by including an explicit highlight.js dark theme for now: image

Any objections to closing this issue?