witchcraft.systems
ari.express
+6
config.ts
+6
config.ts
···
9
9
static readonly PDS_URL: string = "https://pds.witchcraft.systems";
10
10
11
11
/**
12
+
* Hue value for the color scheme
13
+
* @default 257
14
+
*/
15
+
static readonly HUE: number = 13;
16
+
17
+
/**
12
18
* The base URL of the frontend service for linking to replies/quotes/accounts etc.
13
19
* @default "https://deer.social"
14
20
*/
+29
-3
src/App.svelte
+29
-3
src/App.svelte
···
4
4
import InfiniteLoading from "svelte-infinite-loading";
5
5
import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
6
6
import { Config } from "../config";
7
-
const accountsPromise = getAllMetadataFromPds();
8
7
import { onMount } from "svelte";
8
+
import { CssVarsFromHue } from "./lib/colorgenerator";
9
+
10
+
11
+
const accountsPromise = getAllMetadataFromPds();
12
+
let colors = CssVarsFromHue(Config.HUE);
9
13
10
14
let posts: Post[] = [];
11
15
16
+
const cycleColors = async () => {
17
+
let hue = Config.HUE;
18
+
while (true) {
19
+
colors = CssVarsFromHue(hue);
20
+
hue += 1;
21
+
if (hue > 360) {
22
+
hue = 0;
23
+
}
24
+
// Wait for 1 second before changing colors again
25
+
await new Promise((resolve) => setTimeout(resolve, 10));
26
+
}
27
+
}
28
+
cycleColors();
12
29
onMount(() => {
13
30
// Fetch initial posts
14
31
getNextPosts().then((initialPosts) => {
···
33
50
};
34
51
</script>
35
52
36
-
<main>
53
+
<main style="
54
+
--background-color: {colors.background};
55
+
--header-background-color: {colors.header};
56
+
--content-background-color: {colors.content};
57
+
--text-color: {colors.text};
58
+
--border-color: {colors.accent};
59
+
--link-color: {colors.link};
60
+
--link-hover-color: {colors.linkHover};
61
+
--indicator-inactive-color: #4a4a4a;
62
+
--indicator-active-color: {colors.accent};
63
+
">
37
64
<div id="Content">
38
65
{#await accountsPromise}
39
66
<p>Loading...</p>
···
65
92
66
93
<style>
67
94
/* desktop style */
68
-
69
95
#Content {
70
96
display: flex;
71
97
/* split the screen in half, left for accounts, right for posts */
-11
src/app.css
-11
src/app.css
···
3
3
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
4
}
5
5
6
-
:root {
7
-
--link-color: #646cff;
8
-
--link-hover-color: #535bf2;
9
-
--background-color: #12082b;
10
-
--header-background-color: #1f1145;
11
-
--content-background-color: #0d0620;
12
-
--text-color: white;
13
-
--border-color: #8054f0;
14
-
--indicator-inactive-color: #4a4a4a;
15
-
--indicator-active-color: #8054f0;
16
-
}
17
6
18
7
::-webkit-scrollbar {
19
8
width: 0px;
+26
src/lib/colorgenerator.ts
+26
src/lib/colorgenerator.ts
···
1
+
2
+
// :root {
3
+
// --link-color: #646cff;
4
+
// --link-hover-color: #535bf2;
5
+
// --background-color: #12082b; hsl(257, 69%, 10%)
6
+
// --header-background-color: #1f1145; hsl(257, 60%, 15%)
7
+
// --content-background-color: #0d0620; hsl(257, 68%, 7%)
8
+
// --text-color: white;
9
+
// --border-color: #8054f0; hsl(257, 84%, 64%)
10
+
// --indicator-inactive-color: #4a4a4a;
11
+
// --indicator-active-color: #8054f0;
12
+
// }
13
+
export const CssVarsFromHue = (hue: number) => {
14
+
const h = hue % 360;
15
+
const cssVars = {
16
+
accent: `hsl(${h}, 85%, 65%)`,
17
+
background: `hsl(${h}, 69%, 10%)`,
18
+
header: `hsl(${h}, 60%, 15%)`,
19
+
content: `hsl(${h}, 68%, 7%)`,
20
+
text: `hsl(${h}, 0%, 100%)`,
21
+
link: `hsl(${h}, 100%, 50%)`,
22
+
linkHover: `hsl(${h}, 100%, 40%)`,
23
+
};
24
+
return cssVars;
25
+
};
26
+