diff --git a/derpiViewer/derpiViewer.html b/derpiViewer/derpiViewer.html
index c3bdf38..29b41d1 100644
--- a/derpiViewer/derpiViewer.html
+++ b/derpiViewer/derpiViewer.html
@@ -2,13 +2,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta id="color-scheme" name="color-scheme" content="dark light" />
     <title>DerpiViewer</title>
 </head>
 
 <style>
     /* dark centered background */
     body {
-        background-color: #333333;
         margin: 0 auto;
     }
     
@@ -48,7 +48,6 @@
     /* white readable keeping-spaces text */
     span,code {
         font-size: 20px;
-        color: #ffffff;
         white-space: pre-line;
         word-break: break-word;
     }
@@ -70,14 +69,6 @@
         left: 50%;
         transform: translate(-50%, -50%);
     }
-    
-    /* links */
-    a:link {
-        color: #00bbff;
-    }
-    a:visited {
-        color: #ffbbff;;
-    }
 
 </style>
 
@@ -165,6 +156,7 @@
         img_loading: ["Image loading method: if lazy, images will load when you scroll near them. On eager they will load inmediately", [2, 'eager', 'lazy']],
         fix_scroll: ["Enable this if the page jumps when loading images", [2, 'yes', 'no']],
         max_width: ["Maximum width of the page (px)", 1000],
+        color_scheme: ["Color scheme", [1, 'dark', 'light']],
     }
 
     function initSettings() {
@@ -238,6 +230,10 @@
             // the max_width needs to sync instantaneously with the css property
             document.body.style.maxWidth = settings[s] + 'px'
         }
+        if(s=='color_scheme'){
+            // the color scheme must update
+            document.getElementById("color-scheme").content = settings[s];
+        }
     }
 
     ////////// image loading //////////
