6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven components designed for dark screens rather than inverted from light ones: a button set with tinted primaries, cards that rise with lighter surfaces, dark form fields, an app sidebar, status alerts with desaturated colours, a modal and a chart card.
Primary, secondary and ghost buttons tuned for a dark background: the primary uses a lighter tint of the brand colour with dark text, because saturated colours on near-black vibrate and white text on them often fails contrast.
On dark backgrounds elevation is shown by lighter surfaces and a faint top border highlight, since shadows barely show. The card uses three greys for page, card and inset area, and text in two tones for hierarchy.
Inputs on a dark surface that are darker than the surface, with a border light enough to find, placeholder text that still passes contrast and a bright focus ring. Native controls get color-scheme: dark so their own parts match.
A dark sidebar where the current item is shown with a subtle lighter background and a coloured icon, rather than a bright block that would dominate a dark screen. Inactive items are dimmer but still pass contrast.
Status colours from a light theme glare on dark backgrounds. These alerts use deep tinted backgrounds with light, desaturated text in the same hue, which keeps the meaning of green, amber and red without the glow.
View code
<div class="dku5"><p class="ok"><b>Deployed.</b> Version 4.2 is live.</p><p class="warn"><b>Heads up.</b> Certificate expires in 9 days.</p><p class="err"><b>Failed.</b> Build 812 has 2 errors.</p></div>
A modal on a dark interface: the dialog is lighter than the page so it reads as raised, the backdrop darkens the page further, and the destructive button uses a softened red. It is a native dialog with focus handling built in.
View code
<div class="dku6"><button class="open">Remove member</button><dialog aria-labelledby="dku6h"><h3 id="dku6h">Remove Jonas?</h3><p>He will lose access to 4 projects.</p><div><button class="c">Cancel</button><button class="r">Remove</button></div></dialog></div>
var d = document.querySelector('.dku6 dialog');
document.querySelector('.dku6 .open').onclick = function () { d.showModal(); };
d.querySelectorAll('button').forEach(function (b) { b.onclick = function () { d.close(); }; });
07. Dark Chart Card
Dark UIData
A chart card for dark dashboards: gridlines barely visible, bars in one bright accent with the latest bar highlighted, and labels in a muted grey. Each bar is a list item carrying its value as hidden text.
On dark backgrounds, shadows disappear, so raised surfaces get lighter backgrounds and a faint top highlight. Use three or four surface greys in steps.
Desaturate the brand
Fully saturated colours vibrate on near-black. Use lighter, softer tints of your brand and status colours, with dark text on filled buttons.
Avoid pure black and white
Very dark grey backgrounds and off-white text reduce glare and halation, while still passing contrast comfortably.
Let native parts match
Set color-scheme: dark so scrollbars, date pickers and select menus use their dark versions too.
Frequently asked questions
Is dark mode just inverted colours?
No. Inverting breaks hierarchy and colour meaning; dark UI needs its own palette.
How do I switch between light and dark?
See the dark mode variables and toggles collections for the theme system and controls.
What contrast should dark text use?
The same WCAG 4.5:1 for body text; check light text against each surface grey.