Dark mode

src/assets/scss/_overrides.scss

@@ -24,3 +24,99 @@ body { overflow: hidden auto; }
     box-sizing: inherit;
   }
 }
+
+// $sub-header-color #1a1a1a;
+// $sub-header-secondary-font-color #f9f9f9;
+// $secondary-font-color #f0f0f0;
+// $base-background-color #0f0f0f;
+// $base-font-color #fff;
+// $header-bg-color rgb(17, 17, 17);
+// $breadcrumbs-border-color #2f2f2f;
+// $breadcrumbs-link-color rgb(153, 153, 153);
+// $recent-thread-background-color #262626;
+html.dark, html.dark body {
+  background-color: #0f0f0f; // $base-background-color;
+  color: #fff; // $base-font-color;
+  .board-controls {
+    background-color: #0f0f0f; //$base-background-color;
+    h1 { color: #fff; } // $base-font-color;
+  }
+  .child-boards .description, .threads-list .description {
+    color: #fff; // $base-font-color;
+  }
+  .category .board h2 a {
+    color: #f0f0f0; // $secondary-font-color;
+  }
+  .category .board .info .description {
+    color: #f0f0f0; // $secondary-font-color;
+  }
+  header #menu-wrap {
+    background-color: rgb(17, 17, 17); // $header-bg-color;
+  }
+  header #breadcrumbs-wrap {
+    background-color: #1a1a1a; // $sub-header-color;
+    border-bottom: 1px solid #2f2f2f; // $breadcrumbs-border-color;
+    #breadcrumbs ul li span {
+      color: rgb(153, 153, 153); // $breadcrumbs-link-color;
+    }
+  }
+  .dashboard-hero {
+    background-color: #1a1a1a; // $sub-header-color;
+    .threads-data {
+      background-color: #262626; // $recent-thread-background-color
+    }
+  }
+  .actions-bottom {
+    border-top: 1px solid #2f2f2f; // $breadcrumbs-border-color;
+    background-color: #0f0f0f; // $base-background-color;
+  }
+  .page-header-split h1 {
+    color: #fff; // $base-font-color
+  }
+  .poll-title, .actionsBar {
+    background-color: #0f0f0f; // $base-background-color;
+    color: #f0f0f0; // $secondary-font-color;
+  }
+  .polls {
+    .poll-header .poll-question {
+      color: #fff; // $base-font-color
+    }
+    .poll-answer .poll-select {
+      color: #f0f0f0; // $sub-header-secondary-font-color;
+    }
+  }
+  .profile-header .profile-user-details .profile-user-name-role h1 {
+    color: #fff; // $base-font-color
+  }
+  .table-actions button {
+    color: #f0f0f0; // $secondary-font-color;
+    &.active {
+      color: rgb(255, 100, 0); // $color-primary
+    }
+  }
+  .pagination-wrap .pagination {
+    .control {
+      fill: rgb(153, 153, 153); // $breadcrumbs-link-color;
+    }
+    .control-active {
+      fill: #fff; // $base-font-color
+      &:hover {
+        fill: rgb(255, 100, 0); // $color-primary
+      }
+    }
+    .page {
+      color: #fff; // $base-font-color
+    }
+  }
+  .pagination-simple button {
+    background: #0f0f0f; // $base-background-color;
+  }
+  .profile-posts-table {
+    .post {
+      color: #fff; // $base-font-color
+      &:hover {
+        background-color: lighten(#0f0f0f, 5%); // $base-background-color;
+      }
+    }
+  }
+}

src/components/layout/HeaderComponent.vue

@@ -83,6 +83,12 @@
 
           <!-- Login Section -->
           <ul class="signed-out" v-if="!loggedIn">
+            <li>
+              <a href="" @click.prevent="toggleDarkMode()">
+                <i v-if="!darkMode" class="fa-solid fa-moon"></i>
+                <i v-if="darkMode" class="fa-solid fa-sun"></i>
+              </a>
+            </li>
           </ul>
 
           <!-- User Dropdown Mobile -->
@@ -262,7 +268,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 +285,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 +327,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 +350,7 @@ export default {
 
     /* Template Data */
     const v = reactive({
+      darkMode: $prefs.data.dark_mode,
       showMobileMenu: false,
       focusSearch: false,
       searchExpanded: false,
@@ -386,7 +403,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