b3e212f Load theme in top-level App.svelte — radicle-explorer

Radicle web interface

Load theme in top-level App.svelte

Rūdolfs Ošiņš committed 2 years ago

commit b3e212ff5bea3bf07069812df89e4ae67db93e4e
parent d4ca3792456be5a579511527c2ecdb4112616103

3 files changed +26 -34

modified 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>

modified 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>

modified 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);
 }