icd/mt940-mbank-ts
2
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

refactor: use css content to determine theme toggle button

Browse Source
This commit is contained in:
Mateusz 2025-08-10 10:58:33 +02:00
parent 07db823c0b
commit 569ad9bde1
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -11,7 +11,7 @@
<main> <main>
<header> <header>
<h1>mBank mt940 konwerter</h1> <h1>mBank mt940 konwerter</h1>
<button id="theme-toggle" type="button">🌞</button> <button id="theme-toggle" type="button"></button>
</header> </header>
<section> <section>

8
public/styles.css
View File

@ -30,3 +30,11 @@ header {
background: none; background: none;
border: none; border: none;
} }
#theme-toggle::before {
content: "☀️";
}
#theme-toggle[dark]::before {
content: "🌙";
}

8
src/browser.ts
View File

@ -49,12 +49,14 @@ console.log("added handler to", document.querySelector("#submit"));
async function toggleTheme() { async function toggleTheme() {
const html = document.documentElement; const html = document.documentElement;
if (html.getAttribute("data-theme") === "dark") { const toggle = document.getElementById("theme-toggle")!;
const theme = html.getAttribute("data-theme");
if (theme === "dark") {
html.removeAttribute("data-theme"); html.removeAttribute("data-theme");
document.getElementById("theme-toggle")!.textContent = "☀️"; toggle.removeAttribute("dark");
} else { } else {
html.setAttribute("data-theme", "dark"); html.setAttribute("data-theme", "dark");
document.getElementById("theme-toggle")!.textContent = "🌙"; toggle.setAttribute("dark", "");
} }
} }