From 084aa94c3b4451a07848aabb9910e7b60f78e8c1 Mon Sep 17 00:00:00 2001 From: Arya Kiran Date: Wed, 17 Jul 2024 17:56:14 +0530 Subject: [PATCH] add dark mode toggle (closes #38) --- public/css/style.css | 109 +++++++++++++------------------------------ views/header.html | 59 +++++++++++++++++++++-- 2 files changed, 88 insertions(+), 80 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index f70d54e..966174c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,28 +1,6 @@ /*General theming*/ -.dark-mode { - --bg-color: #222; - --fg-color: #f8f9fa; - --button-fg: #010000; - --textarea-focus-border: #e5ebff; - --textarea-bg: var(--bg-color); - --select-border: #ccc; - --select-bg: #2f2f2f; - --select-fg: #b2b2b2; -} - -.light-mode { - --bg-color: #ffedd5; - --fg-color: #000000; - --button-fg: #fbe9e7; - --textarea-focus-border: #261f1e; - --textarea-bg: #fff4e6; - --select-border: #888888; - --select-bg: #fff; - --select-fg: #2f2f2f; -} - -body { +:root, :root.dark { /* Global Values */ --main-border-color: #b2b2b2; --accent-color: #f57c00; @@ -39,13 +17,40 @@ body { --select-border: #ccc; --select-bg: #2f2f2f; --select-fg: #b2b2b2; +} + +@media (prefers-color-scheme: light) { + :root { + --bg-color: #ffedd5; + --fg-color: #000000; + --button-fg: #fbe9e7; + --textarea-focus-border: #261f1e; + --textarea-bg: #fff4e6; + --select-border: #888888; + --select-bg: #fff; + --select-fg: #2f2f2f; + } +} + +:root.light { + --bg-color: #ffedd5; + --fg-color: #000000; + --button-fg: #fbe9e7; + --textarea-focus-border: #261f1e; + --textarea-bg: #fff4e6; + --select-border: #888888; + --select-bg: #fff; + --select-fg: #2f2f2f; +} + +body { font-family: sans-serif; margin: 20px auto; line-height: 1.5em; max-width: 1000px; font-size: 1rem; - background-color: #222; - color: #f8f9fa; + background-color: var(--bg-color); + color: var(--fg-color); padding: 0 10px; hyphens: auto; } @@ -144,6 +149,7 @@ button { border: none; border-radius: 4px; background: var(--accent-color); + color: var(--button-fg); } button:hover { @@ -249,6 +255,8 @@ button:hover { border-left: 2px solid var(--accent-color); /* The rgba is the same value as above, but with a 0.25 opacity */ box-shadow: 2px 2px 0px 0px var(--select-shadow); + background-color: var(--select-bg); + color: var(--select-fg); } .center-area { @@ -314,54 +322,3 @@ div.definitions { div.translations { grid-area: translations; } - -@media (prefers-color-scheme: light) { - body { - --bg-color: #ffedd5; - --fg-color: #000000; - --button-fg: #fbe9e7; - --textarea-focus-border: #261f1e; - --textarea-bg: #fff4e6; - --select-border: #888888; - --select-bg: #fff; - --select-fg: #2f2f2f; - background-color: var(--bg-color); - color: var(--fg-color); - } - - .options { - background-color: var(--bg-color); - box-shadow: 0 2px 4px var(--engine-options-shadow); - border: 1px solid var(--select-border); - } - - .selected-option { - border: 1px solid var(--select-border); - color: var(--fg-color); - } - - /* Theming for buttons and text areas*/ - textarea { - border: 2px solid var(--textarea-border); - background-color: var(--textarea-bg); - color: var(--fg-color); - } - - textarea:focus { - border-color: var(--textarea-focus-border); - outline: 1px solid var(--textarea-focus-border); - } - - select, - .nice-select .nice-select-dropdown, - .nice-select, - .nice-select-search { - background-color: var(--select-bg); - color: var(--select-fg); - } - - button, - #url { - color: var(--button-fg); - } -} diff --git a/views/header.html b/views/header.html index d01dfd6..dac63c4 100644 --- a/views/header.html +++ b/views/header.html @@ -14,18 +14,69 @@ - - + + - +
- +
+