Syntax highlighting theme

[sang-yeo]

Hi team,
Do we have any guidance around syntax highlighting theme? Based on my quick study I found out that Twilio's using multiple themes throughout Console and beyond. Please see attached image.

My team is planning to design a new syntax highlighting theme for Functions and TwiML Bins based on our colors(would be awesome if we can scale this) and love to get feedback from the Design Systems Team.

[kelseycavitt]

Hi @sang-yeo!

We currently don't have formal guidance around syntax highlighting, other than it should be accessible and color blind friendly.

However, we do have a ticket in our current sprint to be building the code block component. We're using Night Owl, an open source, accessible, color blind friendly theme.

So, you could use Night Owl for your product. Or if you're planning on designing a new theme, you could contribute it to Paste for all of Twilio to use that is accessible and color blind friendly as well. Happy to chat about this more in an office hour! Let us know what you think!

Also, here are some related GitHub discussions:
#877
#1951

Thanks Sang!

[sang-yeo]

Thanks for your quick answer @kelseycavitt. Is there reason why we decided to use the Nigh Owl theme?

I'd like to contribute this to Paste and we can start with my products such as Functions and TwiML Bins :)

[TheSisb]

Hey @sang-yeo,

We're selecting Night Owl to start with because that theme is accessible and highly rated. Here's an excerpt from their VSCode Plugin:

Color choices have taken into consideration what is accessible to people with colorblindness and in low-light circumstances. Decisions were also based on meaningful contrast for reading comprehension [...]

Source

Making a coding theme is a large undertaking. This seemed like a good place to start in order to move quickly.