Loading CSS via prefered-color-scheme

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!

2022 No rights reserved.
3D Heart