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

feat: add theme toggle button

Browse Source
This commit is contained in:
Mateusz 2025-08-10 10:51:55 +02:00
parent 90ed8cef79
commit 6ebc76d7a2
3 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="pl">
<head> <head>
<title>mBank mt940 konwerter</title> <title>mBank mt940 konwerter</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -11,6 +11,7 @@
<main> <main>
<header> <header>
<h1>mBank mt940 konwerter</h1> <h1>mBank mt940 konwerter</h1>
<button id="theme-toggle" type="button">🌞</button>
</header> </header>
<section> <section>

12
public/styles.css
View File

@ -18,3 +18,15 @@ button {
font-size: 1.2rem; font-size: 1.2rem;
color: hsl(120, 100%, 7.1%); color: hsl(120, 100%, 7.1%);
} }
header {
display: flex;
justify-content: space-between;
align-items: center;
}
#theme-toggle {
width: auto;
background: none;
border: none;
}

14
src/browser.ts
View File

@ -46,3 +46,17 @@ async function handle() {
document.querySelector("#submit")?.addEventListener("click", handle); document.querySelector("#submit")?.addEventListener("click", handle);
console.log("added handler to", document.querySelector("#submit")); console.log("added handler to", document.querySelector("#submit"));
async function toggleTheme() {
const html = document.documentElement;
if (html.getAttribute("data-theme") === "dark") {
html.removeAttribute("data-theme");
document.getElementById("theme-toggle")!.textContent = "🌞";
} else {
html.setAttribute("data-theme", "dark");
document.getElementById("theme-toggle")!.textContent = "🌜";
}
}
document.querySelector("#theme-toggle")?.addEventListener("click", toggleTheme);
console.log("added handler to", document.querySelector("#theme-toggle"));