Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve contrast of the code on dark theme #59

Open
ffigiel opened this issue Mar 15, 2024 · 2 comments
Open

Improve contrast of the code on dark theme #59

ffigiel opened this issue Mar 15, 2024 · 2 comments

Comments

@ffigiel
Copy link
Contributor

ffigiel commented Mar 15, 2024

๐Ÿ‘๏ธ The current syntax highlighting theme in the code editor makes the text difficult to read on dark mode. I wanted to improve it, but we didn't have a candidate for the new theme.

Today I felt bored/curious, and things happened. I wrote a lil python script to collect colors from the biggest standardized colorscheme resource I know and draw some candidates. The script just takes as weighted list of colors and scores how close the colors in the theme are to the input colors. (also, it converts the colors HSLuv before scoring to keep results relevant to humans)

๐ŸŽ›๏ธ I ran this with various weights/colors from our branding and here are my notes for the top results:

  • base16-material-palenight happens to exactly use the "Underwater Blue" color as the background, so it's pretty much a drop-in replacement for the current dark code theme. Also, it could be adapted to use the Faff Pink and Unnamed Blue colors as it has very similar colors there.

  • If we perhaps wanted to redesign the page a little bit and use a floating box for the code, like on the website instead of plain divider lines, base16-chalk is using the same Blacker color. It also features #f5f5f5 as the light mode background, which is the same background color for code on the docs sites
    image

  • base16-railscats has the most compatible grays

  • base16-snazzy and base16-rebecca often appeared in the top results

  • (honorable mention), base16-mellow-purple was the closest to Faff Pink ๐Ÿ˜‰

๐Ÿ‘‰ Let me know if it's any useful and what the next steps would be. I'm happy to share the script too but I doubt you'd find it as interesting as I did ๐Ÿ˜†

@lpil
Copy link
Member

lpil commented Mar 17, 2024

All those themes use colours very different from the Gleam colours. We'll need something that has the same feeling as the current themes being used.

Sorry that's not very useful, I don't know much about how visuals work

@blksnk
Copy link
Contributor

blksnk commented Mar 17, 2024

The first issue that comes to mind with the current syntax highlighting support is the fact that the colours do not adapt based on the applied theme (light / dark mode). Regardless of what colour scheme we end up using, we need it to have both a light and a dark variant.

I like the way the rust book allows its readers to change colour schemes on the fly. Maybe we could offer something similar, with a couple options that fit the current theme's vibe while offering some level of customisation.

Upon searching for some themes, I happened to find VsCode Themes, a place to compare some popular colour schemes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants