From cfcd0c114084cbfcb38ba5647bf23545bbc8763d Mon Sep 17 00:00:00 2001
From: Ari <ariadna@hey.com>
Date: Thu, 15 May 2025 00:58:47 -0400
Subject: [PATCH] Caramelldansen positive fusion achieved

---
 config.ts                 |  6 ++++++
 src/App.svelte            | 32 +++++++++++++++++++++++++++++---
 src/app.css               | 11 -----------
 src/lib/colorgenerator.ts | 26 ++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/colorgenerator.ts

diff --git a/config.ts b/config.ts
index 8d09cf6..5f0ee66 100644
--- a/config.ts
+++ b/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"
diff --git a/src/App.svelte b/src/App.svelte
index c6e7534..5dfdef8 100644
--- a/src/App.svelte
+++ b/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 */
diff --git a/src/app.css b/src/app.css
index 50da734..976484a 100644
--- a/src/app.css
+++ b/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;
diff --git a/src/lib/colorgenerator.ts b/src/lib/colorgenerator.ts
new file mode 100644
index 0000000..e34b3fc
--- /dev/null
+++ b/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;
+};
+