diff --git a/public/index.html b/public/index.html
index f95b6ec..b8cab05 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
-
+
mBank mt940 konwerter
@@ -11,6 +11,7 @@
mBank mt940 konwerter
+
diff --git a/public/styles.css b/public/styles.css
index 8408489..69deaee 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -18,3 +18,15 @@ button {
font-size: 1.2rem;
color: hsl(120, 100%, 7.1%);
}
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#theme-toggle {
+ width: auto;
+ background: none;
+ border: none;
+}
diff --git a/src/browser.ts b/src/browser.ts
index 45db664..cce4dc7 100644
--- a/src/browser.ts
+++ b/src/browser.ts
@@ -46,3 +46,17 @@ async function handle() {
document.querySelector("#submit")?.addEventListener("click", handle);
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"));