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
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Introducing MooTools ScrollSidebar

    How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I've created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you...

  • By
    Dijit’s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...

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!