config.ts

@@ -8,12 +8,6 @@ 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,28 +4,11 @@
   import InfiniteLoading from "svelte-infinite-loading";
   import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
   import { Config } from "../config";
-  import { onMount } from "svelte";
-  import { CssVarsFromHue } from "./lib/colorgenerator";
-  
-  
   const accountsPromise = getAllMetadataFromPds();
-  let colors = CssVarsFromHue(Config.HUE);
+  import { onMount } from "svelte";
 
   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) => {
@@ -50,17 +33,7 @@
   };
 </script>
 
-<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};
-">
+<main>
   <div id="Content">
     {#await accountsPromise}
       <p>Loading...</p>
@@ -92,6 +65,7 @@
 
 <style>
   /* desktop style */
+
   #Content {
     display: flex;
     /* split the screen in half, left for accounts, right for posts */

src/app.css

@@ -3,6 +3,17 @@
   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

@@ -1,26 +0,0 @@
-
-// :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;
-};
-