Add Dark Mode to Your Web Page With One Line of CSS 🌓

I wanted to add dark mode to my blog(currently in development). So I searched and searched and searched for a simple solution. I am going to introduce my own idea. I later found 2 articles that gave some pointers but their solutions are somewhat incomplete. The solution is CSS filters! Dark mode has too many names: Light-on-dark Black mode Dark mode Dark theme Night mode There is a silly way to do this. .dark { background-color: black; /* from white to black */ color: white; /* from black to white */ } Then write your HTML. ... Hello World! ... ... This works finely for examples. In production websites, there are too many styled items like buttons, alerts, modals etc. When you try to style them all for dark mode, you end up with something like: body { background-color: ...; color: ...; } .btn { background-color: ...; color: ...; } .btn.primary { background-color: ...; color: ...; } ... ... .dark { background-color: ...; color: ...; } .dark .btn { background-color: ...; color: ...; } .dark .btn.primary { background-color: ...; color: ...; } ... ... Doing this doubles the size of your CSS Stylesheet. What is the solution to reduce the size of the stylesheet??? Here comes the Superman of CSS. CSS variables(CSS custom properties)!!! Define theme colors as CSS variables. :root { --text-color: black; --bg-color: white; } .dark { --text-color: white; --bg-color: black; } Then use variables to set colors body, .dark { background-color: var(--bg-color); color: var(--text-color); }

.btn { background-color: var(--bg-color); color: var(--text-color); } .btn.primary { background-color: var(--bg-color); color: var(--text-color); } ... ... This works fine. But I am a developer(as a hobby). Not a designer. Which colors should I use in light theme and dark theme?. That’s when I found . It uses the CSS to enable dark mode for web pages. It's complex and has some issues. Instead of using JavaScript, anyone can use in CSS to enable dark theme. The following example explains how works. Darkmode.js mix-blend-mode: difference; mix-blend-mode mix-blend-mode: difference; light-theme-color = rgb(x, y, z) dark-theme-color = rgb(255-x, 255-y, 255-z) It converts the color of links from blue to odd yellow color. light-theme-color = rgb(0, 0, 238) = blue dark-theme-color = rgb(255-0, 255-0, 255-238) = rgb(255, 255, 17) = yellow After a few days of tinkering, I got an idea. Queue CSS filters! Use to enable dark mode. invert filter .dark { filter: invert(100%); } Then add a class to the tag. .dark html ... This method won't work without text color and background color. Set to on the and tags. height 100% html body html, body { color: #222; background-color: #fff; height: 100%; } is same as . But simpler. invert(100%) mix-blend-mode light-theme-color = rgb(x, y, z) dark-theme-color = rgb(255-x, 255-y, 255-z) A downside to this method is that it has the same issue with links being yellow in dark mode. To fix this we should do something like this .dark { filter: invert(100%) hue-rotate(180deg); } changes the color on the hue wheel to the opposite color on the hue wheel. Here is the hue wheel. hue-rotate(180deg) The following example explains how works for link color. filter: invert(100%) hue-rotate(180deg); light-theme-color = rgb(0, 0, 238) = blue inverted-color = rgb(255-0, 255-0, 255-238) = rgb(255, 255, 17) = yellow = hsl(60, 100%, 53%) hue-rotated-color = hsl(270, 100%, 53%) = light-blue This filter is applied to images too. So images look ugly. To remove that filter on images, use the filter again. So, the same filter applied to the image twice. and . inverse(100%) X inverse(100%) = inverse(0) hue-rotate(180deg) X hue-rotate(180deg) = hue-rotate(0) .dark, .dark img { filter: invert(100%) hue-rotate(180deg); } Do the same thing for other media elements. .dark, .dark img, .dark picture, .dark video, .dark canvas { filter: invert(100%) hue-rotate(180deg); } Create a class named to apply when you need to apply dark theme to media elements. nofilter .nofilter { filter: none !important; } Then use in HTML nofilter It looks smooth with some . transition html, img, picture, video, canvas { transition: filter 0.3s ease-in-out; } How can I know the preference of the user?. There is a CSS media query to do this. @media (prefers-color-scheme: dark) { html, img, picture, video, canvas { filter: invert(100%) hue-rotate(180deg); } } I want to create a dark mode toggle button and store user preference or automatically detect user preference. is perfect for storing preferences. Use to check if the current theme matches the user’s preference. localstorage window.matchMedia if ( localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } This is my toggle button, with an SVG The button is rounded and transparent. button { background: transparent; border: transparent; border-radius: 50%; cursor: pointer; } And finally, a JavaScript function to toggle dark mode. let toggleDark = () => { let result = document.documentElement.classList.toggle("dark"); localStorage.theme = result ? "dark" : "light"; }; Final Example Now, I am going to introduce a minimal subset of the above code as the tricky one-liner. This code is enough for many sites. .dark, .dark img { filter: invert(100%) hue-rotate(180deg); } Final Demo This is an advanced demo. https://codepen.io/ksenginew/pen/gOxVzXM First published here