Add user control over theming.

css/styles.css

@@ -64,58 +64,56 @@
   --table-range4: hsl(0, 80%, 85%);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #1A1A1A;
-    --bg-dot-color: #222;
+[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);
+  --shadow-3: rgba(255, 255, 255, 0.03);
+  --shadow-15: rgba(255, 255, 255, 0.03);
 
-    --center-bg-color: #101010;
+  --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);
+  --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;
+  --nook-phone-bg-color: #000F33;
+  --nook-phone-text-color: #CCC;
 
-    --dialog-bg-color: #252422;
-    --dialog-text-color: #BCB5A9;
+  --dialog-bg-color: #252422;
+  --dialog-text-color: #BCB5A9;
 
-    --dialog-name-bg-color: #BA3B1F;
-    --dialog-name-text-color: #FF9A40;
+  --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);
+  --chart-fill-color: #2D5F21;
+  --chart-line-color: rgba(200, 200, 200, 0.4);
+  --chart-point-color: rgba(200, 200, 200, 0.6);
 
-    --lng-select-text-color: #837865;
-    --lng-select-border-color: var(--bg-color);
-    --lng-select-bg-color-hover: #EBFEFD;
+  --lng-select-text-color: #837865;
+  --lng-select-border-color: var(--bg-color);
+  --lng-select-bg-color-hover: #EBFEFD;
 
-    --italic-color: #666;
+  --italic-color: #666;
 
-    --form-h6-text-color: #E18B51;
+  --form-h6-text-color: #E18B51;
 
-    --radio-hover-bg-color: #00174D;
-    --radio-checked-text-color: #FFF;
+  --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);
+  --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;
+  --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%);
-  }
+  --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 - */
@@ -180,16 +178,16 @@ h2 {
   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;
@@ -200,13 +198,13 @@ h2 {
   transition: 0.2s all;
 }
 
-.dialog-box-lng select:hover {
+.dialog-box-option select:hover {
   background-color: var(--lng-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;
 }
 

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>
 
 
@@ -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">
-      <p data-i18n="textbox.language"></p>: <select id="language"></select>
+    <div class="dialog-box-option">
+      <p data-i18n="textbox.language"></p><p>:</p> <select id="language"></select>
+    </div>
+    <div class="dialog-box-option">
+      <p data-i18n="textbox.theme.title"></p><p>:</p> <select id="theme"></select>
     </div>
   </div>
 
@@ -313,6 +328,7 @@
   <script src="js/scripts.js"></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) {

js/chart.js

@@ -67,10 +67,3 @@ function update_chart(input_data, possibilities) {
     });
   }
 }
-
-window.matchMedia("(prefers-color-scheme: dark)").addListener(() => {
-  if (chart_instance) {
-    chart_instance.options = chart_options;
-    chart_instance.update();
-  }
-});

js/themes.js

@@ -0,0 +1,54 @@
+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 != "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(setupTheming);

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"
+    }
   }
 }