diff options
| author | Oxbian <got.dacs@slmail.me> | 2023-06-26 21:00:25 +0200 |
|---|---|---|
| committer | Oxbian <got.dacs@slmail.me> | 2023-06-26 21:00:25 +0200 |
| commit | b1a864045353ec4db00a042bc3372a4997fda547 (patch) | |
| tree | 55fa5658a33180e6c19f57d9c69b05cb694fd51f /assets/css/style.css | |
| parent | 882418e4786e7789348554fbe71324b00eae7754 (diff) | |
| download | ArKa-Blog-b1a864045353ec4db00a042bc3372a4997fda547.tar.gz ArKa-Blog-b1a864045353ec4db00a042bc3372a4997fda547.zip | |
Adding light & dark mode depending from browser theme
Diffstat (limited to 'assets/css/style.css')
| -rw-r--r-- | assets/css/style.css | 39 |
1 files changed, 33 insertions, 6 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 6340c1b..6582834 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -12,10 +12,10 @@ /* Light mode */ --light-bg: #ffdab9; --light-text: #0d0d0d; - --light-link: white; - --light-link-bg: white; - --light-title: white; - --light-quote-border: white; + --light-link: black; + --light-link-bg: #f08080; + --light-title: #f08080; + --light-quote-border: #6a040f; /* Default mode */ --bg-color: var(--dark-bg); @@ -24,8 +24,6 @@ --link-bg-color: var(--dark-link-bg); --title-color: var(--dark-title); --quote-border: var(--dark-quote-border); - --switch-icon: var(--dark-switch-icon); - --switch-text: var(--dark-switch-text); } /* Body */ @@ -143,6 +141,7 @@ footer li a color: var(--link-color); } +/* Responsive design */ @media screen and (max-width: 600px) { body { @@ -156,4 +155,32 @@ footer li a flex-direction: column; gap: 0.5rem; } +} + +/* Night mode */ +@media (prefers-color-scheme: dark) +{ + :root + { + --bg-color: var(--dark-bg); + --text-color: var(--dark-text); + --link-color: var(--dark-link); + --link-bg-color: var(--dark-link-bg); + --title-color: var(--dark-title); + --quote-border: var(--dark-quote-border); + } +} + +/* Day mode */ +@media (prefers-color-scheme: light) +{ + :root + { + --bg-color: var(--light-bg); + --text-color: var(--light-text); + --link-color: var(--light-link); + --link-bg-color: var(--light-link-bg); + --title-color: var(--light-title); + --quote-border: var(--light-quote-border); + } }
\ No newline at end of file |