mtsz/mt940-mbank-ts
1
0
Fork 0
forked from icd/mt940-mbank-ts
Code Pull Requests 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 b078ebbb78
commit 342cfb6464
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>
<header>
<h1>mBank mt940 konwerter</h1>
<button id="theme-toggle" type="button">🌞</button>
<button id="theme-toggle" type="button"></button>
</header>
<section>

8
public/styles.css
View File

@ -30,3 +30,11 @@ header {
background: 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() {
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");
document.getElementById("theme-toggle")!.textContent = "☀️";
toggle.removeAttribute("dark");
} else {
html.setAttribute("data-theme", "dark");
document.getElementById("theme-toggle")!.textContent = "🌙";
toggle.setAttribute("dark", "");
}
}