From fe8b8470a7310d1d54934145054427483b5dd9c9 Mon Sep 17 00:00:00 2001
From: Luka Hietala <luka.hietala08@gmail.com>
Date: Mon, 17 Nov 2025 09:41:42 +0200
Subject: [PATCH] vaihda teema nappi

---
 index.html        |  3 ++-
 static/styles.css | 12 ++++++++++++
 static/theme.js   |  3 +++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 8969a25..41856c1 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,8 @@
             </a>
         </nav>
         <nav id="theme-nav">
-            <button id="theme-button">Light Mode</button>
+            <button id="theme-button" class="theme-button">
+            </button>
         </nav>
     </header>
     <main class="uutis-lista">
diff --git a/static/styles.css b/static/styles.css
index 61057e5..092bb6e 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -70,4 +70,16 @@ header {
     gap: 200px;
     font-size: 0.9em;
     align-items: center;
+}
+
+.theme-button {
+    border: none;
+    background: none;
+}
+
+.theme-button .dark- {
+    filter: invert(0);
+}
+.theme-button .light {
+    filter: invert(1);
 }
\ No newline at end of file
diff --git a/static/theme.js b/static/theme.js
index 11b3457..30608cb 100644
--- a/static/theme.js
+++ b/static/theme.js
@@ -7,6 +7,9 @@ const setTheme = (theme) => {
 
   if (theme === 'dark') {
     html.setAttribute('data-theme', 'dark');
+    themeButton.innerHTML = "<img src='/static/aurinko.svg' class='light' />"
+  } else {
+    themeButton.innerHTML = "<img src='/static/kuu.svg' class='dark' />"
   }
 
   localStorage.setItem('theme', theme);
-- 
2.47.3