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 | |
| parent | 882418e4786e7789348554fbe71324b00eae7754 (diff) | |
| download | ArKa-Blog-b1a864045353ec4db00a042bc3372a4997fda547.tar.gz ArKa-Blog-b1a864045353ec4db00a042bc3372a4997fda547.zip | |
Adding light & dark mode depending from browser theme
| -rw-r--r-- | assets/css/style.css | 39 | ||||
| -rw-r--r-- | templates/index_template.html | 2 | ||||
| -rw-r--r-- | templates/page_template.html | 2 |
3 files changed, 35 insertions, 8 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 diff --git a/templates/index_template.html b/templates/index_template.html index 5a80edc..c8cd6ae 100644 --- a/templates/index_template.html +++ b/templates/index_template.html @@ -44,7 +44,7 @@ <!-- Bas de page --> <hr> <footer> - <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p> + <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p> <!-- Réseaux sociaux--> <div id="social"> diff --git a/templates/page_template.html b/templates/page_template.html index 5adfb02..8374367 100644 --- a/templates/page_template.html +++ b/templates/page_template.html @@ -41,7 +41,7 @@ <!-- Bas de page --> <hr> <footer> - <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p> + <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p> <!-- Réseaux sociaux--> <div id="social"> |