ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

feat: add theme toggler on client side

Browse Source
This commit is contained in:
rramiachraf 2024-03-09 21:40:20 +01:00
parent 33eac92072
commit cdc6dc418f
10 changed files with 149 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
static/script.js
View File

@ -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
}
}

8
style/annotation.css
View File

@ -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;
}

14
style/error.css
View File

@ -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;
}

6
style/footer.css
View File

@ -41,8 +41,6 @@ footer a:hover {
}
}
@media (prefers-color-scheme: dark) {
footer {
background-color: #fec260;
}
.dark footer {
background-color: #fec260;
}

22
style/home.css
View File

@ -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;
}

64
style/lyrics.css
View File

@ -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;
}
}

6
style/main.css
View File

@ -57,8 +57,6 @@ a {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #181d31;
}
body.dark {
background-color: #181d31;
}

33
style/navbar.css
View File

@ -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;
}

30
style/search.css
View File

@ -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;
}

22
views/navbar.templ
View File

@ -2,6 +2,26 @@ package views
templ navbar() {
<nav>
<a href="/"><img src="/static/logo.svg"/></a>
<div id="nav-container">
<a href="/"><img src="/static/logo.svg"/></a>
<button id="choose-theme">
<svg
width="25px"
height="25px"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic_fluent_dark_theme_24_regular" fill="#181d31" fill-rule="nonzero">
<path
d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"
></path>
</g>
</g>
</svg>
</button>
</div>
</nav>
}