Dark Mode in One Line of Code!

By  on  

Dark mode has seemingly become the desired visual mode for websites and mobile apps alike. Dark mode is easier on the eyes, especially for those like me who like to burn the midnight oil by coding and reading tutorials. Unfortunately not all websites offer dark mode, so it's up to me to remedy the situation.

Though it's not a true "dark mode", you can use CSS' filter to create dark mode of your own:

html {
  filter: invert(1);
}

Inverting colors completely via 1 will make that light-themed website much more comfortable on your eyes. It's important to realize that developers shouldn't consider this a long-term solution, as it's a quite lazy remedy and doesn't lend well to branding.

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Incredible Demos

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

Discussion

  1. Nice trick !

    I would add exactly the same on all images with

    img {
    filter: invert(1);
    }

    Then you are even closer to a dark mode ;)

  2. Adilbim

    I just tried it here and it worked, Thanks for the info.

    here is the code I used:

    document.querySelector('html').style.filter = 'invert(1)'

  3. Alex

    I love filter for this! You can also make the inversion less harsh by adding to the filter list:

    /* Use hue-rotate for optional color adjustment */
    html { filter: invert(1) contrast(0.95) saturate(0.5) hue-rotate(180deg);
    
  4. Daniel

    Never EVER use this trick other than for a quick preview.

    CSS filters on large areas are really bad for scrolling performance.

  5. This isn’t quite dark mode. This is just an invert which makes images look like crap. Still, neat trick.
    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!