Dark theme for the blog

Posted on March 18, 2021

I have opinions that claim that there is no scientific evidence to assure that a dark theme is better for reading or that it reduces eye fatigue. It may not be true, but now a light theme is to bright for my eyes. So, I decided that it was time for my blog to also a dark theme. Hope you like it.

Ahora, voy a explicar brevemente cómo lo implementé:

Tailwind CSS, in its docs, shares a piece of code on how to implement it manually:

if (
  localStorage.theme === 'dark' ||
  (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

With this, when dark theme is selected, dark class is automatically added to the html root element:

<html class="dark"></html>

If not, it removes the class in case of existing:

<html class></html>

Now, you only need to use the dark class in your styles.

Share on: TwitterFacebook

If you want to support the blog and the experiments, you can do it with PayPal or Buy me a coffee. Appreciate your support! :-)