diff --git a/public/index.html b/public/index.html
index b8cab05..cffe43d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
diff --git a/public/styles.css b/public/styles.css
index 69deaee..de0a10d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -30,3 +30,11 @@ header {
 	background: none;
 	border: none;
 }
+
+#theme-toggle::before {
+	content: "☀️";
+}
+
+#theme-toggle[dark]::before {
+	content: "🌙";
+}
diff --git a/src/browser.ts b/src/browser.ts
index f28dbf9..2f18e68 100644
--- a/src/browser.ts
+++ b/src/browser.ts
@@ -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", "");
 	}
 }