Caramelldansen positive fusion achieved

config.ts

@@ -8,6 +8,12 @@ export class Config {
    */
   static readonly PDS_URL: string = "https://pds.witchcraft.systems";
 
+  /**
+   * Hue value for the color scheme
+   * @default 257
+   */
+  static readonly HUE: number = 13;
+
   /**
    * The base URL of the frontend service for linking to replies/quotes/accounts etc.
    * @default "https://deer.social"

src/App.svelte

@@ -4,11 +4,28 @@
   import InfiniteLoading from "svelte-infinite-loading";
   import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
   import { Config } from "../config";
-  const accountsPromise = getAllMetadataFromPds();
   import { onMount } from "svelte";
+  import { CssVarsFromHue } from "./lib/colorgenerator";
+  
+  
+  const accountsPromise = getAllMetadataFromPds();
+  let colors = CssVarsFromHue(Config.HUE);
 
   let posts: Post[] = [];
 
+  const cycleColors = async () => {
+    let hue = Config.HUE;
+    while (true) {
+      colors = CssVarsFromHue(hue);
+      hue += 1;
+      if (hue > 360) {
+        hue = 0;
+      }
+      // Wait for 1 second before changing colors again
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+  }
+  cycleColors();
   onMount(() => {
     // Fetch initial posts
     getNextPosts().then((initialPosts) => {
@@ -33,7 +50,17 @@
   };
 </script>
 
-<main>
+<main style="
+  --background-color: {colors.background};
+  --header-background-color: {colors.header};
+  --content-background-color: {colors.content};
+  --text-color: {colors.text};
+  --border-color: {colors.accent};
+  --link-color: {colors.link};
+  --link-hover-color: {colors.linkHover};
+  --indicator-inactive-color: #4a4a4a;
+  --indicator-active-color: {colors.accent};
+">
   <div id="Content">
     {#await accountsPromise}
       <p>Loading...</p>
@@ -65,7 +92,6 @@
 
 <style>
   /* desktop style */
-
   #Content {
     display: flex;
     /* split the screen in half, left for accounts, right for posts */

src/app.css

@@ -3,17 +3,6 @@
   src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
 }
 
-:root {
-  --link-color: #646cff;
-  --link-hover-color: #535bf2;
-  --background-color: #12082b;
-  --header-background-color: #1f1145;
-  --content-background-color: #0d0620;
-  --text-color: white;
-  --border-color: #8054f0;
-  --indicator-inactive-color: #4a4a4a;
-  --indicator-active-color: #8054f0;
-}
 
 ::-webkit-scrollbar {
   width: 0px;

src/lib/colorgenerator.ts

@@ -0,0 +1,26 @@
+
+// :root {
+//     --link-color: #646cff;
+//     --link-hover-color: #535bf2;
+//     --background-color: #12082b; hsl(257, 69%, 10%)
+//     --header-background-color: #1f1145; hsl(257, 60%, 15%)
+//     --content-background-color: #0d0620; hsl(257, 68%, 7%)
+//     --text-color: white;
+//     --border-color: #8054f0; hsl(257, 84%, 64%)
+//     --indicator-inactive-color: #4a4a4a;
+//     --indicator-active-color: #8054f0;
+//   }
+export const CssVarsFromHue = (hue: number) => {
+    const h = hue % 360;
+    const cssVars = {
+        accent: `hsl(${h}, 85%, 65%)`,
+        background: `hsl(${h}, 69%, 10%)`,
+        header: `hsl(${h}, 60%, 15%)`,
+        content: `hsl(${h}, 68%, 7%)`,
+        text: `hsl(${h}, 0%, 100%)`,
+        link: `hsl(${h}, 100%, 50%)`,
+        linkHover: `hsl(${h}, 100%, 40%)`,
+    };
+    return cssVars;
+};
+