diff --git a/css/styles.css b/css/styles.css
index a51c333..70b0a23 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,17 +1,131 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Varela+Round&display=swap');
 
+/* - Variables - */
+
+:root {
+  --color-blue: #0AB5CD;
+  --color-light-blue: #5ECEDB;
+
+  --bg-color: #DEF2D9;
+  --bg-dot-color: #FFF;
+
+  --shadow-3: rgba(0, 0, 0, 0.03);
+  --shadow-5: rgba(0, 0, 0, 0.05);
+  --shadow-6: rgba(0, 0, 0, 0.06);
+  --shadow-8: rgba(0, 0, 0, 0.08);
+  --shadow-9: rgba(0, 0, 0, 0.09);
+  --shadow-10: rgba(0, 0, 0, 0.10);
+  --shadow-15: rgba(0, 0, 0, 0.16);
+  --shadow-16: rgba(0, 0, 0, 0.16);
+  --shadow-20: rgba(0, 0, 0, 0.20);
+
+  --center-bg-color: #FFF;
+
+  --wave-1: rgba(255, 255, 255, 0);
+  --wave-2: rgba(255, 255, 255, 0.2);
+  --wave-3: rgba(255, 255, 255, 0.4);
+  --wave-4: rgba(255, 255, 255, 0.6);
+
+  --nook-phone-bg-color: #F5F8FF;
+  --nook-phone-text-color: #686868;
+
+  --dialog-bg-color: #FFFAE5;
+  --dialog-text-color: #837865;
+
+  --dialog-name-bg-color: #FF9A40;
+  --dialog-name-text-color: #BA3B1F;
+
+  --chart-fill-color: var(--bg-color);
+  --chart-line-color: rgba(0, 0, 0, 0.1);
+  --chart-point-color: rgba(0, 0, 0, 0.1);
+
+  --select-text-color: var(--dialog-text-color);
+  --select-border-color: var(--bg-color);
+  --select-bg-color-hover: #EBFEFD;
+
+  --italic-color: #AAA;
+
+  --form-h6-text-color: #845E44;
+
+  --radio-hover-bg-color: var(--nook-phone-bg-color);
+  --radio-checked-text-color: #FFF;
+
+  --input-bg-color: #F3F3F3;
+  --input-focus-bg-color: white;
+  --input-focus-text-color: var(--color-blue);
+
+  --button-text-color: var(--nook-phone-text-color);
+  --button-reset-text-color: #E45B5B;
+
+  --table-range0: hsl(140, 80%, 85%);
+  --table-range1: hsl(90, 80%, 85%);
+  --table-range2: hsl(60, 80%, 85%);
+  --table-range3: hsl(30, 80%, 85%);
+  --table-range4: hsl(0, 80%, 85%);
+}
+
+[data-theme="dark"] {
+  --bg-color: #1A1A1A;
+  --bg-dot-color: #222;
+
+  --shadow-3: rgba(255, 255, 255, 0.03);
+  --shadow-15: rgba(255, 255, 255, 0.03);
+
+  --center-bg-color: #101010;
+
+  --wave-1: rgba(16, 16, 16, 0);
+  --wave-2: rgba(16, 16, 16, 0.2);
+  --wave-3: rgba(16, 16, 16, 0.4);
+  --wave-4: rgba(16, 16, 16, 0.6);
+
+  --nook-phone-bg-color: #000F33;
+  --nook-phone-text-color: #CCC;
+
+  --dialog-bg-color: #252422;
+  --dialog-text-color: #BCB5A9;
+
+  --dialog-name-bg-color: #BA3B1F;
+  --dialog-name-text-color: #FF9A40;
+
+  --chart-fill-color: #2D5F21;
+  --chart-line-color: rgba(200, 200, 200, 0.4);
+  --chart-point-color: rgba(200, 200, 200, 0.6);
+
+  --select-text-color: #837865;
+  --select-border-color: var(--bg-color);
+  --select-bg-color-hover: #EBFEFD;
+
+  --italic-color: #666;
+
+  --form-h6-text-color: #E18B51;
+
+  --radio-hover-bg-color: #00174D;
+  --radio-checked-text-color: #FFF;
+
+  --input-bg-color: #333;
+  --input-focus-bg-color: #999;
+  --input-focus-text-color: var(--radio-hover-bg-color);
+
+  --button-text-color: var(--nook-phone-text-color);
+  --button-reset-text-color: #E45B5B;
+
+  --table-range0: hsl(140, 80%, 27%);
+  --table-range1: hsl(90, 80%, 20%);
+  --table-range2: hsl(60, 80%, 20%);
+  --table-range3: hsl(30, 80%, 20%);
+  --table-range4: hsl(0, 80%, 22%);
+}
+
 /* - Global Styles - */
 
 html {
   font-size: 14px;
-  background: #DEF2D9;
+  background: var(--bg-color);
   background-image:
-    radial-gradient(#fff 20%, transparent 0),
-    radial-gradient(#fff 20%, transparent 0);
+    radial-gradient(var(--bg-dot-color) 20%, transparent 0),
+    radial-gradient(var(--bg-dot-color) 20%, transparent 0);
   background-size: 30px 30px;
   background-position: 0 0, 15px 15px;
-
-  /* background: #FFFAE5; */
 }
 
 body {
@@ -40,57 +154,57 @@ h2 {
   border-radius: 40px;
   padding: 16px 0px;
   padding-bottom: 16px;
-  background: #F5F8FF;
-  color: #686868;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+  background: var(--nook-phone-bg-color);
+  color: var(--nook-phone-text-color);
+  overflow: hidden;
+  box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
 }
 
 .nook-phone-center {
-  background: white;
+  background: var(--center-bg-color);
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-
 .dialog-box {
-  background: #FFFAE5;
+  background: var(--dialog-bg-color);
   box-sizing: border-box;
   padding: 16px 24px;
   margin: 32px auto;
   position: relative;
   border-radius: 40px;
   max-width: 800px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
 }
 
-.dialog-box-lng {
+.dialog-box-option {
   text-align: center;
 }
 
-.dialog-box-lng p,
-.dialog-box-lng select {
+.dialog-box-option p,
+.dialog-box-option select {
   display: inline;
 }
 
-.dialog-box-lng select {
+.dialog-box-option select {
   font-size: 1rem;
   padding: 4px;
   font-weight: bold;
   border-radius: 4px;
-  border-color: #DEF2D9;
-  color: #837865;
+  border-color: var(--select-border-color);
+  color: var(--select-text-color);
   cursor: pointer;
   transition: 0.2s all;
 }
 
-.dialog-box-lng select:hover {
-  background-color: #EBFEFD;
-  border-color: #5ECEDB;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+.dialog-box-option select:hover {
+  background-color: var(--select-bg-color-hover);
+  border-color: var(--color-light-blue);
+  box-shadow: 0 2px 4px var(--shadow-16);
 }
 
-.dialog-box-lng select:focus {
+.dialog-box-option select:focus {
   outline: none;
 }
 
@@ -99,24 +213,24 @@ h2 {
   font-family: 'Raleway', sans-serif;
   font-weight: 800;
   font-size: 1rem;
-  color: #837865;
+  color: var(--dialog-text-color);
   letter-spacing: 0.2px;
   line-height: 1.8rem;
 }
 
 .dialog-box b,
 .dialog-box a {
-  color: #0AB5CD;
+  color: var(--color-blue);
   transition: 0.2s all;
 }
 
 .dialog-box i {
   font-style: normal;
-  color: #aaa;
+  color: var(--italic-color);
 }
 
 .dialog-box a:hover {
-  color: #5ECEDB
+  color: var(--color-light-blue);
 }
 
 .dialog-box .dialog-box__name {
@@ -124,14 +238,14 @@ h2 {
   left: 16px;
   top: -28px;
   font-size: 1rem;
-  color: #BA3B1F;
+  color: var(--dialog-name-text-color);
   padding: 4px 16px;
-  background: #FF9A40;
+  background: var(--dialog-name-bg-color);
   border-radius: 40px;
 }
 
 .input__form {
-  background: white;
+  background: var(--center-bg-color);
   display: flex;
   flex-direction: column;
   padding: 16px;
@@ -152,7 +266,7 @@ h2 {
   font-weight: 800;
   font-size: 1.25rem;
   margin: 8px auto;
-  color: #845E44;
+  color: var(--form-h6-text-color);
   text-align: center;
 }
 
@@ -189,7 +303,7 @@ h2 {
   text-align: center;
   display: block;
   font-style: normal;
-  color: #aaa;
+  color: var(--italic-color);
   font-size: 0.9rem;
   margin: 8px auto;
 }
@@ -211,25 +325,26 @@ input {
 }
 
 input[type=number]:placeholder-shown {
-  background: #f3f3f3;
+  background: var(--input-bg-color);
 }
 
 input[type=number]:not(:placeholder-shown) {
   background: transparent;
-  color: #0AB5CD;
+  color: var(--color-blue);
 }
 
 input[type=number]:placeholder-shown:hover {
   cursor: pointer;
   transform: scale(1.1);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 input[type=number]:focus {
   outline: none;
   transform: scale(1.1);
-  background: white;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  color: var(--input-focus-text-color);
+  background: var(--input-focus-bg-color);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 input[type=number]:focus::placeholder {
@@ -276,7 +391,7 @@ input[type=number] {
   opacity: 1;
   border: none;
   border-radius: 40px;
-  background: #F3F3F3;
+  background: var(--input-bg-color);
   padding: 8px 16px;
   font-size: 1.25rem;
   font-family: inherit;
@@ -287,24 +402,24 @@ input[type=number] {
 
 .input__radio-buttons input[type="radio"]:not(:checked)+label:hover {
   cursor: pointer;
-  background: #F5F8FF;
+  background: var(--radio-hover-bg-color);
   transform: scale(1.1);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 .input__radio-buttons input[type="radio"]:checked+label {
-  background: #0AB5CD;
-  color: #FFF;
+  background: var(--color-blue);
+  color: var(--radio-checked-text-color);
 }
 
 .button {
-  color: #686868;
+  color: var(--button-text-color);
   font-family: inherit;
   font-weight: bold;
   padding: 8px 16px;
   border-width: 0px;
   border-radius: 40px;
-  background: #F3F3F3;
+  background: var(--input-bg-color);
   font-size: 1.2rem;
   transition: 0.2s all;
   position: relative;
@@ -315,11 +430,11 @@ input[type=number] {
   transform: scale(1.1);
   cursor: pointer;
   opacity: 1;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 .button.button--reset {
-  color: #E45B5B;
+  color: var(--button-reset-text-color);
 }
 
 .table-wrapper {
@@ -346,22 +461,22 @@ input[type=number] {
 .table-wrapper::-webkit-scrollbar-track {
   height: 8px;
   width: 5px;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 6px var(--shadow-20);
+  -webkit-box-shadow: inset 0 0 6px var(--shadow-20);
 }
 
 .table-wrapper::-webkit-scrollbar-thumb {
   height: 8px;
   width: 5px;
-  background: rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background: var(--shadow-20);
+  box-shadow: inset 0 0 6px var(--shadow-20);
+  -webkit-box-shadow: inset 0 0 6px var(--shadow-10);
 }
 
 .table-wrapper::-webkit-scrollbar-thumb:window-inactive {
   height: 8px;
   width: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--shadow-20);
 }
 
 #turnipTable {
@@ -383,8 +498,8 @@ input[type=number] {
   max-width: 150px;
   padding: 6px 4px;
   text-align: center;
-  border-right: 1px solid rgba(0, 0, 0, 0.03);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  border-right: 1px solid var(--shadow-3);
+  border-bottom: 1px solid var(--shadow-15);
 }
 
 #turnipTable tbody tr {
@@ -401,43 +516,23 @@ input[type=number] {
 }
 
 #turnipTable td.range4 {
-  background-color: hsl(0, 80%, 85%);
+  background-color: var(--table-range4);
 }
 
 #turnipTable td.range3{
-  background-color: hsl(30, 80%, 85%);
+  background-color: var(--table-range3);
 }
 
 #turnipTable td.range2 {
-  background-color: hsl(60, 80%, 85%);
+  background-color: var(--table-range2);
 }
 
 #turnipTable td.range1 {
-  background-color: hsl(90, 80%, 85%);
+  background-color: var(--table-range1);
 }
 
 #turnipTable td.range0 {
-  background-color: hsl(140, 80%, 85%);
-}
-
-.darkmode--activated #turnipTable td.range0 {
-  background-color: hsl(0, 80%, 85%);
-}
-
-.darkmode--activated #turnipTable td.range1{
-  background-color: hsl(30, 80%, 85%);
-}
-
-.darkmode--activated #turnipTable td.range2 {
-  background-color: hsl(60, 80%, 85%);
-}
-
-.darkmode--activated #turnipTable td.range3 {
-  background-color: hsl(90, 80%, 85%);
-}
-
-.darkmode--activated #turnipTable td.range4 {
-  background-color: hsl(140, 80%, 85%);
+  background-color: var(--table-range0);
 }
 
 .chart-wrapper {
@@ -475,18 +570,18 @@ input[type=number] {
 .permalink .fa-copy {
   margin: 0 8px;
   height: 20px;
-  color: #0AB5CD;
+  color: var(--color-blue);
 }
 
 /* The snackbar - position it at the bottom and in the middle of the screen */
 #snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */
   min-width: 250px; /* Set a default minimum width */
-  background-color: #FFFAE5; /* Black background color */
+  background-color: var(--dialog-bg-color); /* Black background color */
   font-family: 'Raleway', sans-serif;
   font-weight: 800;
   font-size: 1rem;
-  color: #837865;
+  color: var(--dialog-text-color);
   letter-spacing: 0.2px;
   line-height: 1.8rem;
   text-align: center; /* Centered text */
@@ -495,7 +590,7 @@ input[type=number] {
   position: fixed; /* Sit on top of the screen */
   z-index: 1; /* Add a z-index if needed */
   bottom: 30px; /* 30px from the bottom */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
 }
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
@@ -531,18 +626,22 @@ input[type=number] {
 /* Cloud SVG placement */
 .parallax>use:nth-child(1) {
   transform: translate3d(-30px, 0, 0);
+  fill: var(--wave-4);
 }
 
 .parallax>use:nth-child(2) {
   transform: translate3d(-90px, 0, 0);
+  fill: var(--wave-3);
 }
 
 .parallax>use:nth-child(3) {
   transform: translate3d(45px, 0, 0);
+  fill: var(--wave-2);
 }
 
 .parallax>use:nth-child(4) {
   transform: translate3d(20px, 0, 0);
+  fill: var(--wave-1);
 }
 
 /*Shrinking for mobile*/
@@ -552,65 +651,3 @@ input[type=number] {
     min-height: 40px;
   }
 }
-
-/*Darkmodjs*/
-.darkmode-layer, .darkmode-toggle {
-  z-index: 1;
-}
-
-.darkmode-toggle:hover {
-  filter: brightness(0.9);
-}
-
-.darkmode-toggle:focus {
-  outline: none;
-}
-
-div.darkmode-background{
-  background: #fef0e3;
-  background-image:
-    radial-gradient(#fff 20%, transparent 0),
-    radial-gradient(#fff 20%, transparent 0);
-  position: inherit;
-}
-
-body.darkmode--activated{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: 'Varela Round', sans-serif;
-  width: 100%;
-  margin: 0 0 0 0;
-  position: absolute;
-}
-
-body.darkmode--activated div[class^="dialog-box"],
-body.darkmode--activated div[class^="nook-phone"],
-body.darkmode--activated form[class^="input__form"] {
-  background: #fee0c4;
-  color: #010F1D;
-}
-
-body.darkmode--activated svg[class^="waves"] {
-  background: #fef0e3;
-}
-
-body.darkmode--activated a,
-body.darkmode--activated b,
-body.darkmode--activated input[type=number]:not(:placeholder-shown) {
-  color: #586472;
-}
-
-body.darkmode--activated input[type="radio"]+label,
-body.darkmode--activated input[type=number]:placeholder-shown {
-  background: #bda284;
-}
-
-body.darkmode--activated input[type="radio"]:checked+label {
-  background: #7b6955;
-}
-
-body.darkmode--activated i {
-  color: #7b6955;
-}
diff --git a/index.html b/index.html
index 04f0e9e..b27f394 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,18 @@
     gtag('config', 'UA-162470902-1');
   </script>
 
+
+  <script>
+    function detectTheme() {
+      let systemTheme = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      let preferredTheme = localStorage.getItem("theme");
+      
+      if (preferredTheme == "dark" || (systemTheme == "dark" && preferredTheme != "light")) {
+        document.documentElement.setAttribute("data-theme", "dark");
+      }
+    }
+    detectTheme();
+  </script>
 </head>
 
 
@@ -61,10 +73,10 @@
           <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
         </defs>
         <g class="parallax">
-          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
-          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
-          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
-          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+          <use xlink:href="#gentle-wave" x="48" y="0" />
+          <use xlink:href="#gentle-wave" x="48" y="3" />
+          <use xlink:href="#gentle-wave" x="48" y="5" />
+          <use xlink:href="#gentle-wave" x="48" y="7" />
         </g>
       </svg>
     </div>
@@ -271,10 +283,10 @@
           <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
         </defs>
         <g class="parallax">
-          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
-          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
-          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
-          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+          <use xlink:href="#gentle-wave" x="48" y="0" />
+          <use xlink:href="#gentle-wave" x="48" y="3" />
+          <use xlink:href="#gentle-wave" x="48" y="5" />
+          <use xlink:href="#gentle-wave" x="48" y="7" />
         </g>
       </svg>
     </div>
@@ -295,8 +307,11 @@
     <p data-i18n="textbox.contributors-text"></p>
     <p id="contributors"><span data-i18n="textbox.contributors"></span>: </p>
     <p data-i18n="[html]textbox.sponsor"></p>
-    <div class="dialog-box-lng">
-      <label for='language' data-i18n="textbox.language"></label>: <select id="language"></select>
+    <div class="dialog-box-option">
+      <p><label for='language' data-i18n="textbox.language"></label>:</p> <select id="language"></select>
+    </div>
+    <div class="dialog-box-option">
+      <p><label for='theme' data-i18n="textbox.theme.title"></label>:</p> <select id="theme"></select>
     </div>
   </div>
 
@@ -311,10 +326,9 @@
   <script src="js/chart.js"></script>
   <script src="js/predictions.js"></script>
   <script src="js/scripts.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
-  <script>new Darkmode({label: '🌓', buttonColorDark: '#dddddd'}).showWidget();</script>
   <script src="js/translations.js"></script>
   <script src="js/contributors.js"></script>
+  <script src="js/themes.js"></script>
   <script>
     // Check compatibility for the browser we're running this in
     if ("serviceWorker" in navigator) {
diff --git a/js/chart.js b/js/chart.js
index 64e96f4..70c2dad 100644
--- a/js/chart.js
+++ b/js/chart.js
@@ -5,8 +5,12 @@ Chart.defaults.global.defaultFontFamily = "'Varela Round', sans-serif";
 const chart_options = {
   elements: {
     line: {
-      backgroundColor: "#DEF2D9",
-      backgroundColor: "#DEF2D9",
+      get backgroundColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-fill-color');
+      },
+      get borderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-line-color');
+      },
       cubicInterpolationMode: "monotone",
     },
   },
@@ -21,14 +25,23 @@ function update_chart(input_data, possibilities) {
   let ctx = $("#chart"),
   datasets = [{
       label: i18next.t("output.chart.input"),
+      get pointBorderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
+      },
       data: input_data.slice(1),
       fill: false,
     }, {
       label: i18next.t("output.chart.minimum"),
+      get pointBorderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
+      },
       data: possibilities[0].prices.slice(1).map(day => day.min),
       fill: false,
     }, {
       label: i18next.t("output.chart.maximum"),
+      get pointBorderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
+      },
       data: possibilities[0].prices.slice(1).map(day => day.max),
       fill: "-1",
     },
@@ -41,6 +54,7 @@ function update_chart(input_data, possibilities) {
   if (chart_instance) {
     chart_instance.data.datasets = datasets;
     chart_instance.data.labels = labels;
+    chart_instance.options = chart_options;
     chart_instance.update();
   } else {
     chart_instance = new Chart(ctx, {
diff --git a/js/themes.js b/js/themes.js
new file mode 100644
index 0000000..6f1b45a
--- /dev/null
+++ b/js/themes.js
@@ -0,0 +1,58 @@
+function updateTheme(theme) {
+  if (theme == "auto") {
+    theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+  }
+
+  if (theme != "light") {
+    document.documentElement.setAttribute("data-theme", theme);
+  } else {
+    document.documentElement.removeAttribute("data-theme");
+  }
+
+  if (chart_instance && chart_options) {
+    chart_instance.options = chart_options;
+    chart_instance.update();
+  }
+}
+
+function setupTheming() {
+  const themeSelector = $("#theme");
+  const supportsAutoTheming = (window.matchMedia && window.matchMedia("(prefers-color-scheme)").matches);
+  let preferredTheme = localStorage.getItem("theme");
+  let selectorVal = preferredTheme ? preferredTheme :
+                    supportsAutoTheming ? "auto" : "light";
+
+  // Build theme option menu.
+  if (supportsAutoTheming) {
+    themeSelector.append(`<option value="auto">${i18next.t('textbox.theme.auto')}</option>`);
+  }
+  themeSelector.append(`<option value="light">${i18next.t('textbox.theme.light')}</option>`);
+  themeSelector.append(`<option value="dark">${i18next.t('textbox.theme.dark')}</option>`);
+
+  themeSelector.val(selectorVal);
+
+  // Listen to system changes in theme
+  window.matchMedia("(prefers-color-scheme: dark)").addListener(() => {
+    if (preferredTheme && preferredTheme != "auto") { return; }
+    updateTheme("auto");
+  });
+
+  // Preference listener
+  themeSelector.on('change', function () {
+    preferredTheme = this.value;
+    updateTheme(preferredTheme);
+
+    if ((preferredTheme != "light" && !supportsAutoTheming) ||
+        (preferredTheme != "auto" && supportsAutoTheming)) {
+      localStorage.setItem("theme", preferredTheme);
+    } else {
+      localStorage.removeItem("theme");
+    }
+  });
+}
+
+$(document).ready(function() {
+  i18next.init((err, t) => {
+    setupTheming();
+  });
+});
\ No newline at end of file
diff --git a/locales/en.json b/locales/en.json
index b1bfcfa..897c623 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -76,6 +76,12 @@
     "sponsor": "Want to sponsor the developers behind this project? Go to the <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices#sponsor-button-repo\">GitHub</a> page and click '❤ Sponsor'",
     "contributors-text": "Oh! And let's not forget to thank those who have contributed so far!",
     "contributors": "Contributors",
-    "language": "Language"
+    "language": "Language",
+    "theme": {
+      "title": "Theme",
+      "auto": "Automatic",
+      "light": "Light",
+      "dark": "Dark"
+    }
   }
 }