@mixin light { --link-color: #3371cf; --link-visited: #594288; --primary-accent: rgb(0, 123, 255); --primary-accent-transparent: rgba(0, 123, 255,0.25); --primary-accent-text: #fff; --ui-background: #fff; --ui-text: #111; --ui-text-muted: #666; --ui-text-bold: #000; --ui-overlay: #ddd; --ui-overlay-text: var(--ui-text); --ui-border: #ddd; --ui-error: hsl(0, 80%, 50%); } @mixin dark { --link-color: #8fb1df; --link-visited: #a089d4; --primary-accent: rgb(0, 123, 255); --primary-accent-transparent: rgba(64, 156, 255, 0.45); --primary-accent-text: #fff; --ui-background: #212121; --ui-text: #eee; --ui-text-muted: #999; --ui-text-bold: #fff; --ui-overlay: #333; --ui-overlay-text: var(--ui-text); --ui-border: #ddd; --ui-error: hsl(0, 80%, 50%); } :root { @include light; } @media (prefers-color-scheme: dark) { :root { @include dark; } } body.dark-mode { @include dark; } body.light-mode { @include light; }