fix: improper theme application on initial load

layouts/default.vue

@@ -38,6 +38,7 @@
 <script lang="ts">
 import {
   defineComponent,
+  onBeforeMount,
   useContext,
   useRouter,
   watch,
@@ -54,13 +55,32 @@ import { logPageView } from "~/helpers/fb/analytics"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
 
-export default defineComponent({
+function updateThemes() {
-  components: { Splitpanes, Pane },
-  setup() {
   const { $colorMode } = useContext() as any
 
-    hookKeybindingsListener()
+  // Apply theme updates
+  const themeColor = useSetting("THEME_COLOR")
+  const bgColor = useSetting("BG_COLOR")
+  const fontSize = useSetting("FONT_SIZE")
 
+  // Initially apply
+  onBeforeMount(() => {
+    document.documentElement.setAttribute("data-accent", themeColor.value)
+    $colorMode.preference = bgColor.value
+    document.documentElement.setAttribute("data-font-size", fontSize.value.code)
+  })
+
+  // Listen for updates
+  watch(themeColor, () =>
+    document.documentElement.setAttribute("data-accent", themeColor.value)
+  )
+  watch(bgColor, () => ($colorMode.preference = bgColor.value))
+  watch(fontSize, () =>
+    document.documentElement.setAttribute("data-font-size", fontSize.value.code)
+  )
+}
+
+function defineJumpActions() {
   const router = useRouter()
 
   defineActionHandler("navigation.jump.rest", () => {
@@ -84,22 +104,16 @@ export default defineComponent({
   defineActionHandler("navigation.jump.forward", () => {
     router.go(1)
   })
+}
 
-    // Apply theme updates
+export default defineComponent({
-    const themeColor = useSetting("THEME_COLOR")
+  components: { Splitpanes, Pane },
-    const bgColor = useSetting("BG_COLOR")
+  setup() {
-    const fontSize = useSetting("FONT_SIZE")
+    hookKeybindingsListener()
 
-    watch(themeColor, () =>
+    defineJumpActions()
-      document.documentElement.setAttribute("data-accent", themeColor.value)
+
-    )
+    updateThemes()
-    watch(bgColor, () => ($colorMode.preference = bgColor.value))
-    watch(fontSize, () =>
-      document.documentElement.setAttribute(
-        "data-font-size",
-        fontSize.value.code
-      )
-    )
 
     return {
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),