diff --git a/index.html b/index.html
index 3e9e599..5787ef4 100644
--- a/index.html
+++ b/index.html
@@ -12,11 +12,23 @@
 	    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
         integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
         crossorigin=""></script>
+<style>
+.dark {
+	background-color: black;
+	color: white;
+}
+.button-dark {
+	position: absolute;
+	top: 3px;
+	right: 3px;
+}
+</style>
 </head>
 <body>
     <div style="text-align: center;">
 	    <h1><span style='color: purple;'>D</span><span style='color: #FF47EB;'>a</span><span style='color: red;'>t</span><span style='color: #FF6600;'>a</span> <span style='color: orange;'>f</span><span style='color: #FFE200;'>r</span><span style='color: lightgreen;'>o</span><span style='color: darkgreen;'>m</span> <span style='color: turquoise;'>I</span><span style='color: #1ac6ff;'>R</span><span style='color: blue;'>F</span> <span style='color: grey;'>K</span><span style='color: #914724;'>i</span>r<span style='color: #9933ff;'>u</span><span style='color: #ff99cc;'>n</span><span style='color: #811a36;'>a</span></h1>
         <div style="display: inline-block; padding: 10px;">
+		<button onclick="darkMode()" class="button-dark">Dark Mode</button>
             <h3>Latest image from the All Sky camera</h3>
             <img style='width: 90%;' src='https://www.irf.se/alis/allsky/krn/latest_small.jpeg'>
         </div>
@@ -50,6 +62,10 @@
 </body>
 
 <script>
+	function darkMode() {
+		var ele = document.body;
+		ele.classList.toggle("dark");
+	}
     async function api(){
         const res = await fetch('https://www.spaceweather.se/forecast/kp/latest.json');
         const data = await res.json();
