diff options
| author | Stefan Kreutz <mail@skreutz.com> | 2021-09-11 11:35:45 +0200 |
|---|---|---|
| committer | Stefan Kreutz <mail@skreutz.com> | 2021-09-11 11:35:45 +0200 |
| commit | 395d0bdc6977e699e2f9d9276c9a8fe342cbd99e (patch) | |
| tree | e797496b705f3969f0062738999a32d6f12ecc25 | |
| parent | 593383d947d9a73d5e1da2ed6adac7a9d9392f4f (diff) | |
| download | blog-395d0bdc6977e699e2f9d9276c9a8fe342cbd99e.tar | |
Add dark theme
Thereby change color space from rgb(a) to hsl to make lightness
explicit.
| -rw-r--r-- | css/site.css | 24 |
1 files changed, 17 insertions, 7 deletions
diff --git a/css/site.css b/css/site.css index 5f2626a..a2ffb90 100644 --- a/css/site.css +++ b/css/site.css @@ -1,11 +1,21 @@ :root { - --foreground-color: rgba(0, 0, 0, .8); - --background-color: rgb(255, 255, 255); - --link-color: rgb(33, 86, 165); - --accent-color: rgb(186, 57, 37); - - --light-gray: rgba(0, 0, 0, .03); - --dark-gray: rgba(0, 0, 0, .3); + --foreground-color: hsl(0, 0%, 20%); + --background-color: hsl(0, 0%, 100%); + --link-color: hsl(216, 67%, 39%); + --accent-color: hsl(8, 67%, 44%); + --light-gray: hsl(0, 0%, 97%); + --dark-gray: hsl(0, 0%, 70%); +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-color: hsl(0, 0%, 100%); + --background-color: hsl(0, 0%, 20%); + --link-color: hsl(216, 67%, 55%); + --accent-color: hsl(8, 67%, 44%); + --light-gray: hsl(0, 0%, 25%); + --dark-gray: hsl(0, 0%, 50%); + } } html { |