Auto Dark Mode Website with prefers-color-scheme – CSS Tutorial


as we have mentioned in previous video
dark mode is one of the upcoming web design trend in 2020 so in this tutorial
we are going to show you how to make your website switch to dark mode
automatically using only CSS today let’s check it out so here’s my website
running on local server currently it has light color scheme in this tutorial
we’re going to use a new CSS media query feature calls prefers-color-scheme it
will detect the current operating system color setting and enable set of CSS
rules accordingly we need to change the header and body background to gray and
these text to white so let’s start with the CSS these are
current CSS rules related to our change first let’s define preferred-color-scheme for our light theme I’m going to copy the rules to set the
title text color to gray and then copy the rules that set the
background to white now you won’t see any change because we
are using the same colors with the original but if you open the inspector
you will see that our new CSS is now working next let’s define colors for our dark
mode we can reuse the same code and change the color only we’ll change the text color to white and background to gray and that’s it now let’s see if I change my window
setting the dark theme now couple of things we need to be
careful first you will see that I still keep the original CSS color setting
this is to provide fallback support for old browsers prefers-color-scheme is now
working on all major browsers thanks to the latest version of Edge that is based
on Chromium still there is IE and some users who haven’t update their browsers
second is you need to always place the code after the original this because we
are using the same selector and the next one will override a previous one unless
you want to use !important or adding extra class and that’s all for this tutorial hope you guys enjoy if you loved this video
don’t forget to subscribe our channel for more thanks for watching see you
next time bye

9 Comments

Add a Comment

Your email address will not be published. Required fields are marked *