preface

Dark mode seems to have become a necessary visual mode for both web and mobile applications. Our eyes are more adapted to dark mode, especially for those of us who like to code and read tutorials in the middle of the night. Unfortunately, not all sites offer dark mode, and this article will turn it on with a single line of code.

The solution

Although this is not really “dark mode”, you can use CSS Filter to create your own dark mode.

html {
  filter: invert(1); } // Or just type document in console.querySelector('html').style.filter = 'invert(1) 'Copy the code

This will make it more comfortable to look at some light-themed sites by completely reversing the colors.

It should be noted that web developers should not see this as a long-term solution, as it is a very lazy remedy.

addfilter listMake optional color adjustments

/* Use hue-rotate for optional color adjustment */
html { filter: invert(1) contrast(0.95) saturate(0.5) hue-rotate(180deg); }
Copy the code

The effect

Take the Gold Nuggets website for example.

  • Before the adjustment:

  • After the adjustment

  • The color is softened and adjusted

After a simple adjustment of one line of code, in addition to the head compared to the underworld, the other look and feel of a lot more comfortable.

Reference documentation

  • Dark Mode in One Line of Code! (davidwalsh.name)