You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
๐๏ธ 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
๐ 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 ๐
The text was updated successfully, but these errors were encountered:
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
๐๏ธ 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
![image](https://private-user-images.githubusercontent.com/4096683/313029293-61a06f49-6464-4e50-8626-1cb787903a14.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0Nzk0ODIsIm5iZiI6MTcyNTQ3OTE4MiwicGF0aCI6Ii80MDk2NjgzLzMxMzAyOTI5My02MWEwNmY0OS02NDY0LTRlNTAtODYyNi0xY2I3ODc5MDNhMTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDRUMTk0NjIyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmQ4ZjMwZGM4MjdkYWIyYTlmMDc4NjI1MDNmYmNkMzQ4ZmQyMjQyZmEzZDZlNDZhZGYyNjQ0MDNlODNlNjMxZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.jpd3UG9-EaIE3MdhfYR32djVwJd5Aiuq1mLwVTIGx2c)
#f5f5f5
as the light mode background, which is the same background color for code on the docs sitesbase16-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 ๐
The text was updated successfully, but these errors were encountered: