Since the beginning on CodePen, our default syntax highlighting theme on CodePen has been our take on “Twilight”. I’m not even sure what the original canonical source of Twilight is, but just about everywhere that offers syntax highlighting themes has some version of it.

In addition to the default Twilight, we have a total of 6 dark and 6 light themes to choose from in your settings.

Now we have one more one each side!

These are entirely new and hand-crafted by our own Klare Frank. They are somewhat based on the colors from CodePen’s own branding and design system colors.

High contrast dark
High contrast light


All the colors have been designed to pass WCAG AAA color contrast guidelines.

But I don’t really need a high contrast theme as my vision is pretty good…

That’s cool, me too. Sometimes I even worry that picking a high-contrast theme will be too intense for me and I’d prefer something more subtle. But that’s not the case here at all, I’ve switched to using the dark theme myself and I find it entirely pleasing.

I’d highly recommend trying them out, as you may find out, as I have, that they are extremely nice to work in!


We haven’t flipped over to one of them as the default theme for new users, but we just might! We’d love to tweak them if you see any bugs or have suggestions.