gleam-lang / language-tour

šŸ‘©šŸ½ā€šŸ’» Learn Gleam in your browser
https://tour.gleam.run/
82 stars 62 forks source link

Improve contrast of the code on dark theme #59

Open ffigiel opened 6 months ago

ffigiel commented 6 months ago

šŸ‘ļø 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:

šŸ‘‰ 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 commented 6 months ago

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 commented 6 months ago

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