Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
No theme classes, no localStorage, no toggle wired to a click handler. color-scheme: light dark tells the browser this page renders either way, and light-dark() picks the right value per property — so the page follows the operating system on its own. The demo flips the container's own color-scheme so you can watch both halves without touching system settings.
This UI trick demonstrates how to implement a fully automatic light and dark mode theme using only CSS, leveraging the `color-scheme` property and the `light-dark()` function. It elegantly switches themes based on the user's operating system preference, requiring zero JavaScript and preventing any flash of unstyled content on load.
Generate an entire color palette—including shades, tints, and interactive states—from a single brand color using CSS's `color-mix()` function. This enables effortless re-theming of components by simply updating one CSS variable.