Eldar Gezalov

April 30, 2021

Auto Dark Mode for my Website

website-mode.png

Recently, I have redesigned my website with Blocs 4.2 beta, so it gets the perfect score on GTMetrix and PageSpeed. During the redesign process, I have changed the theme of my website back to 'Light'.

I am not completely happy with the light theme, because I like to use a dark mode on my devices. So, how do I make my website look great both with dark and light modes?

The answer is prefers-color-scheme media query, which allowed me to add the support for automatic switching between the dark and light theme.