chore: add env variables to make it easier to change themes

package.json

@@ -60,6 +60,7 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.22",
+    "dotenv": "^16.4.7",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier-vue": "^5.0.0",

pnpm-lock.yaml

@@ -147,6 +147,9 @@ importers:
       daisyui:
         specifier: ^4.12.22
         version: 4.12.22(postcss@8.4.49)
+      dotenv:
+        specifier: ^16.4.7
+        version: 16.4.7
       eslint:
         specifier: ^8.57.1
         version: 8.57.1
@@ -2170,6 +2173,10 @@ packages:
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+    engines: {node: '>=12'}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -6095,6 +6102,8 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dotenv@16.4.7: {}
+
   eastasianwidth@0.2.0: {}
 
   ejs@3.1.9:

src/components/ThemeSwap.vue

@@ -5,6 +5,7 @@ const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false'))
 const toggle = (isChecked: boolean) => {
   localStorage.setItem('is-dark', isChecked ? 'true' : 'false')
 }
+const darkMode = import.meta.env.VITE_DARK_MODE
 </script>
 
 <template>
@@ -12,7 +13,7 @@ const toggle = (isChecked: boolean) => {
     <label class="grid cursor-pointer place-items-center">
       <input
         type="checkbox"
-        value="coffee"
+        :value="darkMode"
         class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
         :checked="isDark"
         @click="

tailwind.config.js

@@ -1,8 +1,14 @@
 /** @type {import('tailwindcss').Config} */
+const dotenv = require('dotenv')
 
 import typography from '@tailwindcss/typography'
 import daisyui from 'daisyui'
 
+dotenv.config()
+
+const LIGHT_MODE = process.env.VITE_LIGHT_MODE
+const DARK_MODE = process.env.VITE_DARK_MODE
+
 const defaultTitleStyles = Array.from(
   { length: 6 },
   (_, k) => `h${k + 1}`
@@ -43,7 +49,7 @@ module.exports = {
   },
   plugins: [typography, daisyui],
   daisyui: {
-    themes: ['lofi', 'coffee'],
+    themes: [LIGHT_MODE, DARK_MODE],
     base: true,
     styled: true,
     utils: true