Turn Any Site Dark with One CSS Line: How Filter Invert & Hue‑Rotate Work
This article shows how a single CSS rule using the filter property with invert(1) and hue‑rotate(180deg) can instantly give any website a decent dark‑mode appearance, explains the underlying colour transformations, and provides simple fixes for media elements that get unintentionally inverted.
We all know implementing a full dark‑mode theme usually requires maintaining two sets of colour variables and switching them with JavaScript, which is a lot of work.
But there is a method that needs only one line of CSS to give any website a decent dark mode instantly.
One CSS line
Add the following line to your CSS file, or inject it directly into the <html> tag via the browser’s dev tools:
html {
filter: invert(1) hue-rotate(180deg);
}That’s it – the whole page instantly switches to dark mode.
The trick relies on the CSS filter property, using two filter functions: invert() and hue‑rotate().
1. invert(1) : colour inversion
The invert() function flips all colours of an element; invert(1) means 100 % inversion. For example, white (#FFFFFF) becomes black (#000000), black becomes white, and blue (#0000FF) becomes its opposite yellow (#FFFF00).
2. hue‑rotate(180deg) : hue rotation
The hue‑rotate() function rotates every colour 180° on the colour wheel, correcting the colour distortion introduced by invert(). After an invert() and a hue‑rotate(180deg), a colour returns to a hue close to the original, only lighter or darker.
Example: blue → invert → yellow → hue‑rotate → a shade of blue again.
Thus the combination flips black‑white while restoring other colours to a harmonious dark theme.
Side effects and fixes
The method also inverts images, videos and <iframe> elements, making them look odd.
Fix: apply the same filter a second time to those elements that should not be filtered.
For elements that need exemption, re‑apply the filter once more:
This “filter‑twice” trick lets media elements display normally in dark mode.
The one‑line CSS hack is clever but not a production‑grade best practice.
It is best suited for personal projects, documentation sites, blogs, or quick dark‑mode toggles via browser extensions.
For projects that require fine‑tuned branding and user experience, use CSS custom properties together with the prefers-color-scheme media query for a controllable, high‑quality dark mode.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JavaScript
Provides JavaScript enthusiasts with tutorials and experience sharing on web front‑end technologies, including JavaScript, Node.js, Deno, Vue.js, React, Angular, HTML5, CSS3, and more.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.