Use css vars for colour themes

.env.template

@@ -0,0 +1,3 @@
+VITE_API_URL=https://api.example.com
+VITE_TITLE=Title
+VITE_CSS_VAR=https://example.com/path/to/vars.css

src/App.svelte

@@ -15,6 +15,10 @@
   });
 </script>
 
+<svelte:head>
+  <link rel="stylesheet" href={import.meta.env.VITE_CSS_VAR} />
+</svelte:head>
+
 <div id="app">
   <Router primary={false}>
     <header>
@@ -70,7 +74,7 @@
     height: 80px;
     min-height: 80px;
     max-height: 80px;
-    background-color: #25662854;
+    background-color: var(--primary);
     border-radius: 0 0 16px 16px;
   }
 

src/app.css

@@ -5,8 +5,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  color: var(--primary-text);
-  background-color: #242424;
+  background-color: var(--primary-bg);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -17,12 +17,12 @@
 
 a {
   font-weight: 500;
-  color: #64dd6caa;
+  color: var(--primary-component);
   text-decoration: inherit;
 }
 
 a:hover {
-  color: #53f25bee;
+  color: var(--primary-hover);
 }
 
 body {
@@ -36,13 +36,13 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--primary-component);
   cursor: pointer;
   transition: border-color 0.25s;
 }
 
 button:hover {
-  border-color: #64dd6caa;
+  border-color: var(--primary-hover);
 }
 
 button:focus,

src/routes/oauth/Authorize.svelte

@@ -3,11 +3,13 @@
   import { navigate, useLocation } from "svelte-navigator";
   import { getUser } from "~/api/login";
   import { getOAuthApp } from "~/api/oauth";
-  import LazyComponent from "~/lib/LazyComponent.svelte";
   import LazyDelay from "~/lib/LazyDelay.svelte";
 
   let location = useLocation();
-  let app;
+  let app: {
+    app_name: string;
+    app_desc: string;
+  };
 
   onMount(async () => {
     try {
@@ -26,13 +28,35 @@
   });
 </script>
 
-<div>
+<div class="page">
   {#if app}
-    <div>
+    <div class="main">
-      <h2>{app.app_name}</h2>
+      <h2 class="oauth-title">{app.app_name}</h2>
-      <div>{app.app_desc}</div>
+      <div class="oauth-desc">{app.app_desc}</div>
     </div>
   {:else}
     <LazyDelay delayMs={500} />
   {/if}
 </div>
+
+<style>
+  .page {
+    display: flex;
+  }
+
+  .main {
+    margin: auto;
+    background: var(--bg-panel);
+    padding: 32px;
+    border-radius: 32px;
+  }
+
+  .main > .oauth-title {
+    line-height: normal;
+    text-align: center;
+  }
+
+  .main > .oauth-desc {
+    text-align: center;
+  }
+</style>

src/vite-env.d.ts

@@ -4,6 +4,7 @@
 interface ImportMetaEnv {
   readonly VITE_API_URL: string;
   readonly VITE_TITLE: string;
+  readonly VITE_CSS_VAR: string;
 }
 
 interface ImportMeta {