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;
+};
+