diff --git a/game.js b/game.js
index 17ed792..7b4da48 100644
--- a/game.js
+++ b/game.js
@@ -2,6 +2,27 @@
 
 /*jshint browser: true*/
 
+// do da dark mode
+
+let dark = false;
+
+function toggleDarkMode(e) {
+  dark = !dark;
+  setDarkMode(dark);
+}
+
+function setDarkMode(darkMode) {
+  dark = darkMode;
+  window.localStorage.setItem("dark-mode",dark);
+  if (dark) {
+    document.querySelector("body").classList.remove("light");
+    document.querySelector("body").classList.add("dark");
+  } else {
+    document.querySelector("body").classList.remove("dark");
+    document.querySelector("body").classList.add("light");
+  }
+}
+
 let started = false;
 
 let strolling = false;
@@ -2434,6 +2455,14 @@ function actionTab(e) {
 
 window.addEventListener('load', function(event) {
 
+  (function() {
+    let storage = window.localStorage;
+
+    if (storage.getItem("dark-mode") != null) {
+      setDarkMode(storage.getItem("dark-mode") === "true");
+    }
+  }());
+
   victims["stomped"] = initVictims();
   victims["tailslapped"] = initVictims();
   victims["tailmaw'd"] = initVictims();
@@ -2494,6 +2523,9 @@ window.addEventListener('load', function(event) {
   document.getElementById("button-arousal").addEventListener("click",toggle_arousal);
   document.getElementById("button-grow-lots").addEventListener("click",grow_lots);
 
+  document.getElementById("button-dark-mode-options").addEventListener("click",toggleDarkMode);
+  document.getElementById("button-dark-mode-game").addEventListener("click",toggleDarkMode);
+
   document.getElementById("button-amount-1").addEventListener("click",function() { grow_pick(1); });
   document.getElementById("button-amount-5").addEventListener("click",function() { grow_pick(5); });
   document.getElementById("button-amount-10").addEventListener("click",function() { grow_pick(10); });
diff --git a/stroll.html b/stroll.html
index 17d2f56..5a6f558 100644
--- a/stroll.html
+++ b/stroll.html
@@ -9,7 +9,7 @@
     <script src="recursive-desc.js"></script>
     <script src="game.js"></script>
   </head>
-  <body>
+  <body class="light">
     <div class="game-area">
       <div class="sidebar" id="stat-container">
         <div class="stat-header-self" id="stats-self">
@@ -68,11 +68,12 @@
           <button class="stat-button" id="button-units">Units: Metric</button>
           <button class="stat-button" id="button-verbose">Verbose</button>
           <button class="stat-button" id="button-grow-lots">SUPER BIG</button>
+          <button class="stat-button" id="button-dark-mode-game">Toggle Dark Mode</button>
         </div>
       </div>
       <div id="log-area">
         <div id="log">
-          <div>Welcome to Stroll 0.5.1</div>
+          <div>Welcome to Stroll 0.5.2</div>
           <div><b>This game features 18+ content</b></div>
           <div><a href="https://chemicalcrux.org/stroll">Changelog</a></div>
           <div>It's a nice day for a walk</div>
@@ -128,11 +129,12 @@
 
 
       <div class="option-container" id="option-panel">
-        <p>Welcome to Stroll 0.5.1</p>
+        <p>Welcome to Stroll 0.5.2</p>
         <p><b>This game features 18+ content</b></p>
         <a href="https://chemicalcrux.org/stroll">Changelog</a>
         <br>
         <div id="custom-species">
+        <button class="stat-button" id="button-dark-mode-options">Toggle Dark Mode</button>
           <p>Build your Character (leave blank for defaults)</p>
           <form id="custom-species-form" name="custom-species-form">
             <ul class="flex-outer">
@@ -292,20 +294,22 @@
                     <label for="baseBreastDiameter">Breast diameter</label>
                     <input type="number" name="baseBreastDiameter" placeholder="0.1"/><br>
                   </li>
-                  <ul class="flex-outer">
-                    Lactation:
-                    <input type="checkbox" checked="true" name="lactationEnabled"/><br>
-                    <div class="reveal-if-active">
-                      <li>
-                        <label for="lactationFactor" class="has-tooltip" title="scales how much milk is released with each squeeze">Lactation ratio</label>
-                        <input type="number" name="lactationFactor" placeholder="0.25"/><br>
-                      </li>
-                      <li>
-                        <label for="lactationScale">Milk production factor</label>
-                        <input type="number" name="lactationScale" placeholder="1"/><br>
-                      </li>
-                    </div>
-                  </ul>
+                  <div>
+                    <ul class="flex-outer">
+                      Lactation:
+                      <input type="checkbox" checked="true" name="lactationEnabled"/><br>
+                      <div class="reveal-if-active">
+                        <li>
+                          <label for="lactationFactor" class="has-tooltip" title="scales how much milk is released with each squeeze">Lactation ratio</label>
+                          <input type="number" name="lactationFactor" placeholder="0.25"/><br>
+                        </li>
+                        <li>
+                          <label for="lactationScale">Milk production factor</label>
+                          <input type="number" name="lactationScale" placeholder="1"/><br>
+                        </li>
+                      </div>
+                    </ul>
+                  </div>
                   <li>
                     <label for="breastVore">Breast vore</label>
                     <input type="checkbox" checked="true" name="breastVore"/><br>
diff --git a/style.css b/style.css
index 9c25756..2cd1eb3 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,31 @@
 
-body {
+.light {
+  color: #000;
   background: #eee;
   font-family: Arial;
 }
 
+.dark {
+  color: #eee;
+  background: #111;
+  font-family: Arial;
+}
+
+
+body.dark > div > div > div > form input {
+  color: #eee;
+  background: #444;
+}
+
+body.dark button {
+  color: #eee;
+  background: #111;
+}
+
+body.dark div {
+  background: #111;
+}
+
 .game-area {
   display: flex;
   margin: auto;
@@ -26,12 +48,20 @@ body {
   display:none;
 }
 
-#log {
+body.light #log {
   height: 900px;
   overflow: auto;
+  color: #000;
   background-color: #fff;
 }
 
+body.dark #log {
+  height: 900px;
+  overflow: auto;
+  color: #eee;
+  background-color: #111;
+}
+
 .stat-header-self {
   font-weight: bold;
   font-size: 150%;
