Add toggle to use browser's preferred theme (#224)

* Add Auto theme that uses browser's preferred color scheme

This will use dark mode automatically if the browser requests it.

* fixup! Add Auto theme that uses browser's preferred color scheme

* Use a toggle to use system theme
This commit is contained in:
Gregory Anders 2022-01-03 06:16:43 -07:00 committed by GitHub
parent 63a0adaa6e
commit 11f395f65f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 14 deletions

View file

@ -202,8 +202,7 @@
--bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
}
.dark-theme,
.butter-theme {
@mixin dark-mode() {
/* background color | --bg-[background type]: value */
--bg-surface: hsl(208, 8%, 20%);
--bg-surface-transparent: hsla(208, 8%, 20%, 0);
@ -290,6 +289,17 @@
--font-secondary: 'Inter', 'Roboto', sans-serif;
}
.dark-theme,
.butter-theme {
@include dark-mode();
}
@media (prefers-color-scheme: dark) {
.system-theme {
@include dark-mode();
}
}
.butter-theme {
/* background color | --bg-[background type]: value */
--bg-surface: hsl(64, 6%, 14%);