Load theme in top-level App.svelte

Previously the theme was only loaded when the <ThemeSettings> component
was loaded in the footer. This stopped working since we removed the
layout around the loading spinner.

src/App.svelte

@@ -5,6 +5,8 @@
   import * as httpd from "@app/lib/httpd";
   import { unreachable } from "@app/lib/utils";
 
+  import { codeFont, theme } from "@app/lib/appearance";
+
   import FullscreenModalPortal from "./App/FullscreenModalPortal.svelte";
   import Hotkeys from "./App/Hotkeys.svelte";
   import LoadingBar from "./App/LoadingBar.svelte";
@@ -37,6 +39,9 @@
 
     plausible.enableAutoPageviews();
   }
+
+  $: document.documentElement.setAttribute("data-codefont", $codeFont);
+  $: document.documentElement.setAttribute("data-theme", $theme);
 </script>
 
 <style>

src/App/Header/ThemeSettings.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import type { CodeFont, Theme } from "@app/lib/appearance";
-
   import {
     codeFont,
     codeFonts,
@@ -12,19 +10,6 @@
   import Icon from "@app/components/Icon.svelte";
   import Radio from "@app/components/Radio.svelte";
   import Button from "@app/components/Button.svelte";
-
-  $: document.documentElement.setAttribute("data-codefont", $codeFont);
-  $: document.documentElement.setAttribute("data-theme", $theme);
-
-  function switchFont(font: CodeFont) {
-    codeFont.set(font);
-    storeCodeFont(font);
-  }
-
-  function switchTheme(newTheme: Theme) {
-    theme.set(newTheme);
-    storeTheme(newTheme);
-  }
 </script>
 
 <style>
@@ -57,14 +42,14 @@
           ariaLabel="Light Mode"
           styleBorderRadius="0"
           variant={$theme === "light" ? "gray-white" : "dim"}
-          on:click={() => switchTheme("light")}>
+          on:click={() => storeTheme("light")}>
           <Icon name="sun" />
         </Button>
         <Button
           ariaLabel="Dark Mode"
           styleBorderRadius="0"
           variant={$theme === "dark" ? "gray-white" : "dim"}
-          on:click={() => switchTheme("dark")}>
+          on:click={() => storeTheme("dark")}>
           <Icon name="moon" />
         </Button>
       </Radio>
@@ -78,7 +63,7 @@
           <Button
             styleBorderRadius="0"
             styleFontFamily={font.fontFamily}
-            on:click={() => switchFont(font.storedName)}
+            on:click={() => storeCodeFont(font.storedName)}
             variant={$codeFont === font.storedName ? "gray-white" : "dim"}>
             {font.displayName}
           </Button>

src/lib/appearance.ts

@@ -6,20 +6,6 @@ export const theme = writable<Theme>(loadTheme());
 export type CodeFont = "jetbrains" | "system";
 export const codeFont = writable<CodeFont>(loadCodeFont());
 
-export function storeCodeFont(codeFont: CodeFont): void {
-  window.localStorage.setItem("codefont", codeFont);
-}
-
-function loadCodeFont(): CodeFont {
-  const storedCodeFont = window.localStorage.getItem("codefont");
-
-  if (storedCodeFont === null) {
-    return "jetbrains";
-  } else {
-    return storedCodeFont as CodeFont;
-  }
-}
-
 export const codeFonts: {
   storedName: CodeFont;
   fontFamily: string;
@@ -33,6 +19,16 @@ export const codeFonts: {
   { storedName: "system", fontFamily: "monospace", displayName: "System" },
 ];
 
+function loadCodeFont(): CodeFont {
+  const storedCodeFont = window.localStorage.getItem("codefont");
+
+  if (storedCodeFont === null) {
+    return "jetbrains";
+  } else {
+    return storedCodeFont as CodeFont;
+  }
+}
+
 function loadTheme(): Theme {
   const storedTheme = window.localStorage.getItem("theme");
 
@@ -43,6 +39,12 @@ function loadTheme(): Theme {
   }
 }
 
-export function storeTheme(theme: Theme): void {
-  window.localStorage.setItem("theme", theme);
+export function storeTheme(newTheme: Theme): void {
+  theme.set(newTheme);
+  window.localStorage.setItem("theme", newTheme);
+}
+
+export function storeCodeFont(newCodeFont: CodeFont): void {
+  codeFont.set(newCodeFont);
+  window.localStorage.setItem("codefont", newCodeFont);
 }