From cdc6dc418fdce09ac30f937dc0137558f3c1e223 Mon Sep 17 00:00:00 2001 From: rramiachraf <51409801+rramiachraf@users.noreply.github.com> Date: Sat, 9 Mar 2024 21:40:20 +0100 Subject: [PATCH] feat: add theme toggler on client side --- static/script.js | 33 ++++++++++++++++++++++- style/annotation.css | 8 +++--- style/error.css | 14 +++++----- style/footer.css | 6 ++--- style/home.css | 22 +++++++-------- style/lyrics.css | 64 ++++++++++++++++++++++---------------------- style/main.css | 6 ++--- style/navbar.css | 33 ++++++++++++++++++----- style/search.css | 30 ++++++++++----------- views/navbar.templ | 22 ++++++++++++++- 10 files changed, 149 insertions(+), 89 deletions(-) diff --git a/static/script.js b/static/script.js index cecad3b..65bffdd 100644 --- a/static/script.js +++ b/static/script.js @@ -6,7 +6,7 @@ function showAbout() { fullAbout.classList.toggle("hidden") } -[fullAbout, summary].forEach(item => item.onclick = showAbout) +fullAbout && [fullAbout, summary].forEach(item => item.onclick = showAbout) document.querySelectorAll("#lyrics a").forEach(item => { item.addEventListener("click", getAnnotation) @@ -36,3 +36,34 @@ function getAnnotation(e) { } } } + +window._currentTheme = localStorage.getItem("_theme") || "light" +setTheme(window._currentTheme) + +const themeChooser = document.getElementById("choose-theme") +themeChooser.addEventListener("click", function() { + if (window._currentTheme === "dark") { + setTheme("light") + } else { + setTheme("dark") + } +}) + +function setTheme(theme) { + const toggler = document.getElementById("ic_fluent_dark_theme_24_regular") + switch (theme) { + case "dark": + toggler.setAttribute("fill", "#fff") + localStorage.setItem("_theme", "dark") + document.body.classList.add("dark") + window._currentTheme = "dark" + return + case "light": + toggler.setAttribute("fill", "#181d31") + localStorage.setItem("_theme", "light") + document.body.classList.remove("dark") + window._currentTheme = "light" + return + + } +} diff --git a/style/annotation.css b/style/annotation.css index ee9ed07..8a197db 100644 --- a/style/annotation.css +++ b/style/annotation.css @@ -26,9 +26,7 @@ padding-left: 1em; } -@media (prefers-color-scheme: dark) { - .annotation { - background-color: #272d44; - color: inherit; - } +.dark .annotation { + background-color: #272d44; + color: inherit; } diff --git a/style/error.css b/style/error.css index 6036ede..95fff45 100644 --- a/style/error.css +++ b/style/error.css @@ -20,12 +20,10 @@ text-align: center; } -@media (prefers-color-scheme: dark) { - #error h1 { - color: #eee; - } - - #error p { - color: #ddd; - } +.dark #error h1 { + color: #eee; +} + +.dark #error p { + color: #ddd; } diff --git a/style/footer.css b/style/footer.css index b09f0f6..80fbe81 100644 --- a/style/footer.css +++ b/style/footer.css @@ -41,8 +41,6 @@ footer a:hover { } } -@media (prefers-color-scheme: dark) { - footer { - background-color: #fec260; - } +.dark footer { + background-color: #fec260; } diff --git a/style/home.css b/style/home.css index fdd34bf..a766d32 100644 --- a/style/home.css +++ b/style/home.css @@ -37,16 +37,14 @@ color: #222; } -@media (prefers-color-scheme: dark) { - #home h1 { - color: #eee; - } - - #home p { - color: #ddd; - } - - #search-input { - background-color: #ddd; - } +.dark #home h1 { + color: #eee; +} + +.dark #home p { + color: #ddd; +} + +.dark #search-input { + background-color: #ddd; } diff --git a/style/lyrics.css b/style/lyrics.css index 25cec9d..a527a86 100644 --- a/style/lyrics.css +++ b/style/lyrics.css @@ -95,41 +95,41 @@ display: none; } +.dark #lyrics { + color: #ccc; +} + +.dark #lyrics a { + background-color: #272d44; + color: inherit; +} + +.dark #lyrics a:hover { + background-color: #32384f; +} + +.dark #metadata h1 { + color: #ddd; +} + +.dark #metadata h2, +.dark #credits p { + color: #eee; +} + +.dark #title { + color: #ddd; +} + +.dark #about p, +.dark #credits summary { + color: #ccc; +} + @media screen and (max-width: 1080px) { #metadata { align-items: center; + text-align: center; } } -@media (prefers-color-scheme: dark) { - #lyrics { - color: #ccc; - } - - #lyrics a { - background-color: #272d44; - color: inherit; - } - - #lyrics a:hover { - background-color: #32384f; - } - - #metadata h1 { - color: #ddd; - } - - #metadata h2, - #credits p { - color: #eee; - } - - #title { - color: #ddd; - } - - #about p, - #credits summary { - color: #ccc; - } -} diff --git a/style/main.css b/style/main.css index a9d1a6c..1f15feb 100644 --- a/style/main.css +++ b/style/main.css @@ -57,8 +57,6 @@ a { text-decoration: none; } -@media (prefers-color-scheme: dark) { - body { - background-color: #181d31; - } +body.dark { + background-color: #181d31; } diff --git a/style/navbar.css b/style/navbar.css index c4f3f5c..6beca6c 100644 --- a/style/navbar.css +++ b/style/navbar.css @@ -1,17 +1,38 @@ nav { background-color: #ffcd38; + padding: 1rem 0; +} + +#nav-container { + width: 1024px; display: flex; align-items: center; - justify-content: center; - padding: 0.5rem; + justify-content: space-between; + margin: 0 auto; } +@media screen and (max-width: 1080px) { + #nav-container { + width: 100%; + padding: 0 2rem; + box-sizing: border-box; + } +} + + nav img { width: 50px; } -@media (prefers-color-scheme: dark) { - nav { - background-color: #fec260; - } +#choose-theme { + background: none; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.dark nav { + background-color: #fec260; } diff --git a/style/search.css b/style/search.css index 4764891..f791ff9 100644 --- a/style/search.css +++ b/style/search.css @@ -95,20 +95,18 @@ border-radius: 5px; } -@media (prefers-color-scheme: dark) { - #search-page h1 { - color: #eee; - } - - #search-item { - border: 1px solid #888; - } - - #search-item h2 { - color: #ddd; - } - - #search-item span { - color: #bbb; - } +.dark #search-page h1 { + color: #eee; +} + +.dark #search-item { + border: 1px solid #888; +} + +.dark #search-item h2 { + color: #ddd; +} + +.dark #search-item span { + color: #bbb; } diff --git a/views/navbar.templ b/views/navbar.templ index 66c7255..90295ce 100644 --- a/views/navbar.templ +++ b/views/navbar.templ @@ -2,6 +2,26 @@ package views templ navbar() { }