diff --git a/src/css/main.css b/src/css/main.css
index 1eb96de..d6c83c6 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2,10 +2,6 @@
  * Version:     1.0.0
  */
 
-:root {
-  color-scheme: light dark;
-}
-
 html,
 body {
   margin: 0px;
@@ -47,20 +43,24 @@ main a {
   color: red;
 }
 
-@media(prefers-color-scheme: dark) {
+html.theme-dark {
+  color-scheme: dark;
+  background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
+  color: white;
+}
 
-  html,
-  body {
-    background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
-  }
+.theme-dark>body>main {
+  border: 1px solid darkgray;
+  background-color: black;
+  box-shadow: 3px 3px 5px #101010C0;
+}
 
-  main {
-    border: 1px solid darkgray;
-    background-color: black;
-    box-shadow: 3px 3px 5px #101010C0;
-  }
-  
-  main h1 {
+.theme-dark>body>main>h1 {
   text-shadow: 0px 0px 3px blue, 2px 2px 6px;
+}
+
+@media(orientation: portrait){
+  main{
+    margin: 1em;
   }
 }
diff --git a/src/index.html b/src/index.html
index ea78463..dd88936 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,7 @@
 <body>
 
   <main>
+    <button style="float: right; font-size:large;" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
     <h1>Truyen home</h1>
     <h2>Status:</h2>
     <p class="text-red">Under construction</p>
@@ -19,6 +20,7 @@
     <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a>
   </main>
 
+  <script src="js/theme.js"></script>
 </body>
 
 </html>
