diff options
| author | Haishan <[email protected]> | 2021-06-13 15:20:12 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2021-06-13 18:26:30 +0800 |
| commit | c78dbcf8f89072dc9c2fa8ba81e2cf5a80218cd7 (patch) | |
| tree | 1801b2954623c3b6710ba769836e5c25a68cf65a /src/components/Root.scss | |
| parent | aad1d2681e4415add1ab440159bf1253b5b34d8e (diff) | |
Support switch theme on backend config page
Diffstat (limited to 'src/components/Root.scss')
| -rw-r--r-- | src/components/Root.scss | 20 |
1 files changed, 16 insertions, 4 deletions
diff --git a/src/components/Root.scss b/src/components/Root.scss index 83d4171..55198ab 100644 --- a/src/components/Root.scss +++ b/src/components/Root.scss @@ -68,12 +68,12 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; } -body, -body.dark { +@mixin dark { --color-background: #202020; --color-background2: rgba(32, 32, 32, 0.3); --color-bg-card: #2d2d2d; @@ -100,8 +100,7 @@ body.dark { --select-border-color: #040404; --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); } - -body.light { +@mixin light { --color-background: #eee; --color-background2: rgba(240, 240, 240, 0.3); --color-bg-card: #fafafa; @@ -129,6 +128,19 @@ body.light { --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); } +// we don't have a "system" or "auto" mode now +// it's just not make sense to have these yet +// @media (prefers-color-scheme: dark) {} +// @media (prefers-color-scheme: light) {} + +:root[data-theme='dark'] { + @include dark; +} + +:root[data-theme='light'] { + @include light; +} + .flexCenter { display: flex; align-items: center; |