Custom syntax highlighting for Twine 2 stylesheet

I have a minor visual impairment which usually doesn’t affect my ability to use the Twine 2 desktop editor. However, there’s one specific color Twine 2 uses which I effectively cannot see: the CSS id selector color in the stylesheet.

I’m only being allowed to upload one image, so here’s an edit to show what it looks like from my perspective; the blue text is rendered illegible.


I would use light mode, but that’s even worse with my visual impairment; I can’t focus my eyes long enough to read it comfortably.

What would really help me would be the option to change the colors used in CSS syntax formatting in the Twine 2 editor. Is there anything I can do to solve this? I’ve been running into simple errors that take forever to solve because I can’t read the text in my editor.

Woo, yeah, foreground color of #3300AA and background color of #262626 is a total failure on the accessibility color contrast checker. That’s a color contrast ratio of 1.24:1, when 3:1 is the bare minimum recommended for large text, and 4.5:1 is the bare minimum for normal text.

I’ve opened issue #611:Color contrast problems for people with colorblindness issues” at the Twine issues section on GitHub regarding this problem.

For what it’s worth, it looks like there are some editor improvements planned for Twine v2.4.0.

In the meantime, I’d recommend copying the text out of Twine and pasting it into some other editor, like VSCode, which not only will be easier to read, but also has extensions which can be installed to help work with CSS and JavaScript. Once you have it edited and working there, you can just copy-and-paste it into the Twine editor.

Hope that helps! :slight_smile:

1 Like

That’s very helpful! I’m glad to know it’s not just me. I’ll look into VSCode for now, but thank you for passing it on!