Moment For Technology

Add dark mode to your website quickly

Posted on Aug. 8, 2022, 5:10 p.m. by Sahil Upadhyay
Category: The front end Tag: css

Nowadays, mobile phones, computers and other devices are everywhere, with screens accompanying our work and life anytime and anywhere. Dark mode makes browsing easier in many scenarios, from working long hours at the computer to "playing with your phone" before going to bed. Adding dark mode to your website is easy, and only takes a few lines of CSS.

Without further ado, let's begin

In modern browsers, the ASPic-color-scheme CSS media feature is used to detect whether users have set the system's theme colors to bright or dark.

grammar

  • No-preference indicates that the system does not know the user's options in this respect. In the context of Boolean values, the result is false.
  • Light indicates that the user has informed the system that they have chosen to use an interface with a light-colored theme.
  • Dark indicates that the user has informed the system that they have chosen to use an interface with a dark theme.

Specific browser compatibility is as follows, in today's high version of the browser compatibility is ok.

This allows you to use a media query to see if the system is in dark mode.

@media (prefers-color-scheme: dark) {
  /* Dark mode style handling */
}
Copy the code

Then, the next step is to use CSS black magic to add to the page, turning black to white, white to black.

Go dark magic:

@media (prefers-color-scheme: dark) {
  /* Dark mode style handling */
  html {
    filter: invert(1) hue-rotate(180deg); }}Copy the code

There is no instant dark mode, but there is a small problem in the middle, which will be solved later.

Let's look at what this line of CSS means.

Invert: Invert color scheme. Black turns white, white turns black, and so do all colors. Values are 0 to 1.

Hue -rotate: adjusts the hue. Here is an example:

The hue-rotate filter supports deG and other CSS3 units, such as turn and radian rad.

hue-rotate(90deg)   /* 90 degree rotation */
hue-rotate(.5turn)       /* rotate 180 degrees */
hue-rotate(3.142 rad)     /* 3.142 radians, approximately one circle, i.e. 360 degrees */
Copy the code

In the above example, the IMG doesn't need to be flipped, just keep it as it is. Modify the code as follows.

@media (prefers-color-scheme: dark) {
  html.img { 
      filter: invert(1) hue-rotate(180deg); }}Copy the code

Now it's normal.

Try it on your phone:

One last word:

This scheme is suitable for exhibitive sites, simple page elements, no complex dynamic effect of the site. This effect, while simple to implement in a few lines of code, needs to be used with caution in a production environment. In the case of complex page elements, this is not recommended! Or one page at a time to slowly adapt it.

In addition, I also opened a personal public account, welcome to pay attention to!!

Wo" Welcome to pay attention! Stick to it if you like!
Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.