Two-liner for dark mode with beautiful code highlighting

[sirkadirov]

Hi! As you may know, Stoplight Elements has a hidden dark theme inside, but there's no info about it in the docs. Also, there's no option to trigger theme change when your device theme changes, and some elements of Stoplight are not adapted to dark mode.

So... here's a two-lliner to solve this 😃:

<!-- Place this after Stoplight Elements stylesheet and a script, in the page HEAD -->
<link rel="stylesheet" href="https://cdn.statically.io/gh/sirkadirov/stoplight-elements-auto-theme@main/styles.css?v=2">
<script src="https://cdn.statically.io/gh/sirkadirov/stoplight-elements-auto-theme@main/script.js?v=2"></script>

I hope that this would help someone who loves Stoplight as I am, but wants to have a darker version of it.

How I done that?

As Stoplight Elements uses Prism.js for code highlighting under the hood, I thought it would be great to adapt a dark version of the Nord theme for use with Stoplight. Used an amazing work from the official Prism.js themes repository to achieve this; also included a simple script that I published here earlier, fixed the resize panel color, and here we are, dark mode switching for Stoplight Elements finally arrived: https://github.com/sirkadirov/stoplight-elements-auto-theme 🎉

Showcase

[joshk]

This is really awesome! Thank for sharing!

I would love for there to be a theme switcher somewhere, but hopefully that will arrive when a dark theme is officially supported.

[sirkadirov]

Thanks! Maybe I'll add it later, because I also miss this feature :)