Low‑Cost Dark Mode Implementation Using Pure CSS :checked, +/~ Selectors and Filter Functions
This article explains how to create a website‑wide dark mode switch with only HTML and CSS by using an invisible checkbox as a toggle, the :checked pseudo‑class together with +/~ sibling selectors, and CSS filter functions like invert() and hue‑rotate() to transform colors, images and media without any JavaScript.
The concept of dark mode originated from macOS Mojave, which provides both light and dark skins; the author adopts the dark skin for better eye health on phones, tablets and computers.
Idea : use a single button (an <input type="checkbox"> ) to toggle between light and dark themes. When the button is unchecked the site stays in light mode; when checked the :checked state triggers sibling selectors (+ or ~) to apply CSS filters to the main content.
Key selectors :
:checked – matches a selected form element.
+ – selects the immediately adjacent sibling.
~ – selects any following sibling.
The toggle is implemented with an <input class="ios-switch" type="checkbox"> element. When it is checked, the following sibling elements (e.g., <header> , <div> ) receive filter: invert(1) hue-rotate(180deg) , turning the page dark while preserving the original hue of images and media.
<body>
<input class="ios-switch" type="checkbox">
<div class="main">网站主体</div>
</body>CSS implementation (SCSS shown and compiled to CSS):
.btn {
border-radius: 31px;
width: 102px;
height: 62px;
background-color: #e9e9eb;
}
.ios-switch {
position: relative;
appearance: none;
cursor: pointer;
transition: all 100ms;
@extend .btn;
&::before { /* background */ }
&::after { /* knob */ }
&:checked {
background-color: #5eb662;
&::before { transform: scale(0); }
&::after { transform: translateX(40px); }
& ~ header,
& ~ div { filter: invert(1) hue-rotate(180deg); }
}
}
.ios-switch ~ header,
.ios-switch ~ div { background-color: #fff; transition: all 300ms; }For media elements (images, videos) that also need inversion, a rule such as the following is added:
img, video, .logo, .icon, .jubao-con {
filter: invert(1) hue-rotate(180deg);
}To exclude certain elements from the dark filter, a class .exclude can be defined and applied to those elements.
.exclude { filter: invert(1) hue-rotate(180deg); }The final compressed CSS that can be placed inside a <style> tag in the <head> is provided, making the solution easy to copy‑paste.
Optimization & Summary : The pure‑CSS solution relies on three core techniques – the :checked pseudo‑class, sibling selectors (+/~), and CSS filter functions – to achieve a full‑site dark mode without JavaScript, offering low maintenance, good compatibility and a sleek visual effect.
Sohu Tech Products
A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.
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.