mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-09-16 15:52:25 +03:00
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:
parent
63a0adaa6e
commit
11f395f65f
5 changed files with 74 additions and 14 deletions
|
@ -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%);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue