Dark mode with light-dark()
CSS
:root {
color-scheme: light dark;
--surface: light-dark(#ffffff, #14161a);
--text: light-dark(#16181d, #eef0f4);
--accent: light-dark(#2457d6, #8ab4ff);
}
body {
background: var(--surface);
color: var(--text);
}
a {
color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}