Skip to content

Instantly share code, notes, and snippets.

@neuhaus

neuhaus/lightdark.html

Last active October 7, 2025 13:34
Show Gist options
  • Save neuhaus/8430c945de1b94589cf556f6c081dbb8 to your computer and use it in GitHub Desktop.
Save neuhaus/8430c945de1b94589cf556f6c081dbb8 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Minimal example using different colours for a button, depending on the light / dark theme of the OS. No Javascript.
Raw
lightdark.html
<!DOCTYPE html>
<head>
<title>Button with light/dark complementary colours</title>
<style>
html {
color-scheme: light dark;
}
:root {
--button-base-hue: 210; /* blue */
--button-s: 100%;
--button-l: 50%;
--button-hue: var(--button-base-hue);
}
button {
background-color: hsl(var(--button-hue), var(--button-s), var(--button-l));
transition: filter 0.2s ease, background-color 0.2s ease;
}
button:hover { filter: brightness(1.2); }
button:active { filter: brightness(0.8); }
@media (prefers-color-scheme: dark) {
:root {
--button-hue: calc(var(--button-base-hue) + 180); /* shift to complementary colour */
}
}
</style>
</head>
<body>
<p>Toggle between light and dark mode in your operating system.</p>
<button>Click<br>me now!</button>
</body>
</html>
@neuhaus
Copy link
Author

neuhaus commented Oct 7, 2025 •
edited
Loading

This code defines a single colour and then derives the colours for hover and active states and a complementary colour for dark mode.
Note that if you try this on jsfiddle.net, it will not work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment