feat(dark-mode): implement dark mode and save settings via local prefs

Author: akinsey

src/components/layout/HeaderComponent.vue

@@ -83,6 +83,10 @@
 
           <!-- Login Section -->
           <ul class="signed-out" v-if="!loggedIn">
+            <li>
+              <a href="https://forms.clickup.com/57751/f/1rcq-791/HNWSBPWCDSRMDMS9TF" target="_blank">REPORT A BUG</a>
+            </li>
+            <li><a href="" @click.prevent="toggleDarkMode()"><i class="fa-solid fa-moon"></i></a></li>
           </ul>
 
           <!-- User Dropdown Mobile -->
@@ -262,7 +266,7 @@ import AdminNavigation from '@/components/layout/AdminNavigation.vue'
 import AdminSubNavigation from '@/components/layout/AdminSubNavigation.vue'
 import decode from '@/composables/filters/decode'
 import { AuthStore } from '@/composables/stores/auth'
-import { PreferencesStore } from '@/composables/stores/prefs'
+import { PreferencesStore, localStoragePrefs} from '@/composables/stores/prefs'
 import { reactive, toRefs, watch, onMounted, onUnmounted, onBeforeMount, inject } from 'vue'
 import { debounce } from 'lodash'
 import { useRouter, useRoute } from 'vue-router'
@@ -279,6 +283,10 @@ export default {
       let fetchMotd = () => motdApi.get().then(d => v.motdData = d).catch(() => {})
       fetchMotd()
       addAnnouncementListener(fetchMotd)
+
+      // set dark mode if in user prefs
+      if (localStoragePrefs().data.dark_mode)
+        document.documentElement.classList.add('dark')
     })
     /* Internal Methods */
     const scrollHeader = () => {
@@ -317,6 +325,12 @@ export default {
       if (v.searchExpanded) { v.search.focus() }
     }
 
+    const toggleDarkMode = () => {
+      v.darkMode = !v.darkMode
+      document.documentElement.classList.toggle('dark')
+      $prefs.update()
+    }
+
     const unseenMentionsText = () => {
       let unseenInList = 0;
       v.mentionsList.forEach(mention => { if (!mention.viewed) { unseenInList++ } })
@@ -334,6 +348,7 @@ export default {
 
     /* Template Data */
     const v = reactive({
+      darkMode: $prefs.data.dark_mode,
       showMobileMenu: false,
       focusSearch: false,
       searchExpanded: false,
@@ -386,7 +401,7 @@ export default {
       window.removeEventListener('scroll', debounce(scrollHeader, 10))
     })
 
-    return { ...toRefs(v), BanStore, logout, isPatroller, searchForum, dismissNotifications, deleteMention, unseenMentionsText, toggleFocusSearch, decode, humanDate }
+    return { ...toRefs(v), BanStore, logout, isPatroller, searchForum, dismissNotifications, deleteMention, unseenMentionsText, toggleFocusSearch, toggleDarkMode, decode, humanDate }
   }
 }
 </script>

src/composables/stores/prefs.js

@@ -17,7 +17,8 @@ const emtpyPrefs = {
   },
   patroller_view: false,
   collapsed_categories: [],
-  ignored_boards: []
+  ignored_boards: [],
+  dark_mode: false
 }
 
 export const PreferencesStore = Symbol(PREFS_KEY)
@@ -68,6 +69,7 @@ export default {
         patroller_view: prefs.patroller_view,
         collapsed_categories: [...prefs.collapsed_categories],
         ignored_boards: [...prefs.ignored_boards],
+        dark_mode: prefs.dark_mode,
         ...specificPrefs
       }
       if (user && user.token) { // user is logged in update cache and server