After learning about prefers-color-scheme and how to implement Dark Mode within your website. I also found out that you're able to load different CSS files depending on the users choice of Light or Dark mode.

This comes in very handy, when you're build a site that uses syntax highlighting such as pygments you're able to find some CSS pygment files on Github. Like these ones.

I have a light syntax theme and dark syntax theme on this site, I can switch between the two by doing the following:

<link
    rel="stylesheet"
    href="{{ site.url }}{{ site.baseurl}}/css/tomorrow-light.css"
    media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)"
/>
<link
    rel="stylesheet"
    href="{{ site.url }}{{ site.baseurl}}/css/dracula.css"
    media="(prefers-color-scheme: dark)"
/>

Using media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" to load a style sheet, when the user is in Light Mode and then using media="(prefers-color-scheme: dark)" when they're in Dark mode.

I found this neat trick after watching this tutorial by DesignCourse. You can read more about prefers-color-scheme here

Having my CSS set up like this, allows the highlighted code on the site to keep in theme with the color scheme. Nioce!