appview-less bluesky client
refactor: move color from hash to theme file
+65
-64
+1
-64
src/lib/accounts.ts
+1
-64
src/lib/accounts.ts
···
1
1
import type { Did, Handle } from '@atcute/lexicons';
2
2
import { writable } from 'svelte/store';
3
+
import { hashColor } from './theme.svelte';
3
4
4
5
export type Account = {
5
6
did: Did;
···
24
25
};
25
26
26
27
export const generateColorForDid = (did: string) => hashColor(did);
27
-
28
-
function hashColor(input: string): string {
29
-
let hash: number;
30
-
31
-
const id = input.split(':').pop() || input;
32
-
33
-
hash = 0;
34
-
for (let i = 0; i < Math.min(10, id.length); i++) {
35
-
hash = (hash << 4) + id.charCodeAt(i);
36
-
}
37
-
hash = hash >>> 0;
38
-
39
-
// magic mixing
40
-
hash ^= hash >>> 16;
41
-
hash = Math.imul(hash, 0x21f0aaad);
42
-
hash ^= hash >>> 15;
43
-
hash = hash >>> 0;
44
-
45
-
const hue = hash % 360;
46
-
const saturation = 0.8 + ((hash >>> 10) % 20) * 0.01; // 80-100%
47
-
const lightness = 0.45 + ((hash >>> 20) % 35) * 0.01; // 50-75%
48
-
49
-
const rgb = hslToRgb(hue, saturation, lightness);
50
-
const hex = rgb.map((value) => value.toString(16).padStart(2, '0')).join('');
51
-
52
-
return `#${hex}`;
53
-
}
54
-
55
-
function hslToRgb(h: number, s: number, l: number): [number, number, number] {
56
-
const c = (1 - Math.abs(2 * l - 1)) * s;
57
-
const hPrime = h / 60;
58
-
const x = c * (1 - Math.abs((hPrime % 2) - 1));
59
-
const m = l - c / 2;
60
-
61
-
let r: number, g: number, b: number;
62
-
63
-
if (hPrime < 1) {
64
-
r = c;
65
-
g = x;
66
-
b = 0;
67
-
} else if (hPrime < 2) {
68
-
r = x;
69
-
g = c;
70
-
b = 0;
71
-
} else if (hPrime < 3) {
72
-
r = 0;
73
-
g = c;
74
-
b = x;
75
-
} else if (hPrime < 4) {
76
-
r = 0;
77
-
g = x;
78
-
b = c;
79
-
} else if (hPrime < 5) {
80
-
r = x;
81
-
g = 0;
82
-
b = c;
83
-
} else {
84
-
r = c;
85
-
g = 0;
86
-
b = x;
87
-
}
88
-
89
-
return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
90
-
}
+64
src/lib/theme.svelte.ts
+64
src/lib/theme.svelte.ts
···
11
11
accent: '#ec4899',
12
12
accent2: '#8b5cf6'
13
13
};
14
+
15
+
export const hashColor = (input: string): string => {
16
+
let hash: number;
17
+
18
+
const id = input.split(':').pop() || input;
19
+
20
+
hash = 0;
21
+
for (let i = 0; i < Math.min(10, id.length); i++) {
22
+
hash = (hash << 4) + id.charCodeAt(i);
23
+
}
24
+
hash = hash >>> 0;
25
+
26
+
// magic mixing
27
+
hash ^= hash >>> 16;
28
+
hash = Math.imul(hash, 0x21f0aaad);
29
+
hash ^= hash >>> 15;
30
+
hash = hash >>> 0;
31
+
32
+
const hue = hash % 360;
33
+
const saturation = 0.8 + ((hash >>> 10) % 20) * 0.01; // 80-100%
34
+
const lightness = 0.45 + ((hash >>> 20) % 35) * 0.01; // 50-75%
35
+
36
+
const rgb = hslToRgb(hue, saturation, lightness);
37
+
const hex = rgb.map((value) => value.toString(16).padStart(2, '0')).join('');
38
+
39
+
return `#${hex}`;
40
+
};
41
+
42
+
const hslToRgb = (h: number, s: number, l: number): [number, number, number] => {
43
+
const c = (1 - Math.abs(2 * l - 1)) * s;
44
+
const hPrime = h / 60;
45
+
const x = c * (1 - Math.abs((hPrime % 2) - 1));
46
+
const m = l - c / 2;
47
+
48
+
let r: number, g: number, b: number;
49
+
50
+
if (hPrime < 1) {
51
+
r = c;
52
+
g = x;
53
+
b = 0;
54
+
} else if (hPrime < 2) {
55
+
r = x;
56
+
g = c;
57
+
b = 0;
58
+
} else if (hPrime < 3) {
59
+
r = 0;
60
+
g = c;
61
+
b = x;
62
+
} else if (hPrime < 4) {
63
+
r = 0;
64
+
g = x;
65
+
b = c;
66
+
} else if (hPrime < 5) {
67
+
r = x;
68
+
g = 0;
69
+
b = c;
70
+
} else {
71
+
r = c;
72
+
g = 0;
73
+
b = x;
74
+
}
75
+
76
+
return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
77
+
};