feat: Dark Mode Toggle (#12)

components/modals/AlarmConfigModal.tsx

@@ -33,6 +33,10 @@ const AlarmConfigModal = () => {
     'view24HrTime',
     false
   )
+  const defaultTheme = () => {
+    return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  }
+  const [darkMode, setDarkMode] = useLocalStorage<boolean>('darkMode', defaultTheme)
   const [alertSound, setAlertSound] = useLocalStorage<string>(
     'alertSound',
     'muted'
@@ -148,6 +152,19 @@ const AlarmConfigModal = () => {
                   className="checkbox checkbox-sm"
                 />
               </label>
+              <label className="label mr-2 cursor-pointer">
+                <span className="label-text w-4/5 text-right font-semibold">
+                  {t('common:dark-mode')}
+                </span>
+                <input
+                  type="checkbox"
+                  onClick={(e) =>
+                    setDarkMode((e.target as HTMLInputElement).checked)
+                  }
+                  defaultChecked={darkMode}
+                  className="checkbox checkbox-sm"
+                />
+              </label>
               <label className="label mr-2 cursor-pointer">
                 <span className="label-text w-4/5 text-right font-semibold">
                   {t('common:view-in-24-hr')}

components/modals/MerchantConfigModal.tsx

@@ -12,6 +12,10 @@ const MerchantConfigModal = () => {
     'view24HrTime',
     false
   )
+  const defaultTheme = () => {
+    return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  }
+  const [darkMode, setDarkMode] = useLocalStorage<boolean>('darkMode', defaultTheme)
   const [alertSound, setAlertSound] = useLocalStorage<string>(
     'alertSound',
     'muted'
@@ -85,6 +89,19 @@ const MerchantConfigModal = () => {
               </label>
             </div>
             <div className="w-full">
+              <label className="label mr-2 cursor-pointer">
+                <span className="label-text w-4/5 text-right font-semibold">
+                  {t('common:dark-mode')}
+                </span>
+                <input
+                  type="checkbox"
+                  onClick={(e) =>
+                    setDarkMode((e.target as HTMLInputElement).checked)
+                  }
+                  defaultChecked={darkMode}
+                  className="checkbox checkbox-sm"
+                />
+              </label>
               <label className="label mr-2 cursor-pointer">
                 <span className="label-text w-4/5 text-right font-semibold">
                   {t('common:view-in-24-hr')}

pages/alarms.tsx

@@ -86,6 +86,25 @@ const Alarms: NextPage = () => {
     'regionTZName',
     'US West'
   )
+  const isMounted = useRef(false);
+  const defaultTheme = () => {
+    // Defaults to system theme if unconfigured
+    return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  }
+  const [darkMode, setDarkMode] = useLocalStorage<boolean>('darkMode', defaultTheme)
+  useEffect(()=> {
+    //Prevents FoUC (Flash of Unstylized Content) by not refreshing on first mount
+    if (!isMounted.current){ isMounted.current = true; return }
+
+    //Toggle Daisy UI colors (e.g. bg-base-###)
+    document.documentElement.setAttribute('data-theme', darkMode ? "dark" : "light") 
+
+    //Toggle standard Tailwind colors (e.g. bg-sky-800)
+    darkMode 
+      ?  document.documentElement.classList.add("dark")
+      :  document.documentElement.classList.remove("dark")
+  }, [darkMode])
+
   const [serverTime, setServerTime] = useState<DateTime>(
     currDate.setZone(regionTZ)
   )

pages/merchants.tsx

@@ -1,6 +1,6 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import React, { useState, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import merchantSchedules from '../data/merchantSchedules.json'
 import saintbotImage from '../public/images/saint-bot.png'
 import { DateTime, Interval } from 'luxon'
@@ -32,6 +32,24 @@ const Merchants: NextPage = (props) => {
     'merchantServer',
     'Shandi'
   )
+  const isMounted = useRef(false);
+  const defaultTheme = () => {
+    // Defaults to system theme if unconfigured
+    return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  }
+  const [darkMode, setDarkMode] = useLocalStorage<boolean>('darkMode', defaultTheme)
+  useEffect(()=> {
+    //Prevents FoUC (Flash of Unstylized Content) by not refreshing on first mount
+    if (!isMounted.current){ isMounted.current = true; return }
+
+    //Toggle Daisy UI colors (e.g. bg-base-###)
+    document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light') 
+
+    //Toggle standard Tailwind colors (e.g. bg-sky-800)
+    darkMode 
+      ?  document.documentElement.classList.add("dark")
+      :  document.documentElement.classList.remove("dark")
+  }, [darkMode])
 
   const [currDate, setCurrDate] = useState<DateTime>(DateTime.now())
   const [regionTZ, setRegionTZ] = useLocalStorage<string>('regionTZ', 'UTC-7')

public/locales/en/common.json

@@ -6,5 +6,6 @@
   "view-in-24-hr": "View in 24HR",
   "option-minute-before": "{{minutes}} min before",
   "view-in-current-time": "View in Current Time",
+  "dark-mode": "Dark Mode",
   "all-done": "All Done"
 }

public/locales/zh/common.json

@@ -6,5 +6,6 @@
   "view-in-24-hr": "查看24小时内的",
   "option-minute-before": "提前{{minutes}}分钟提醒",
   "view-in-current-time": "当前时间内查看",
+  "dark-mode": "Dark Mode",
   "all-done": "确定"
 }

tailwind.config.js

@@ -4,8 +4,12 @@ module.exports = {
     './components/**/*.{js,ts,jsx,tsx}',
     './util/**/*.{js,ts,jsx,tsx}',
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },
   plugins: [require('daisyui')],
+  daisyui: {
+    themes: ['light', 'dark'],
+  },
 }