shii.moe

Source for `shii.moe' website.
git clone git://git.knutsen.co/shii.moe
Log | Files | Refs | README | LICENSE

colours.js (1062B)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const ROOT = window.document.documentElement;

const COLOUR_SCHEMES = {
	default: {
		'bg-colour': '#badaff',
		'hue': '0deg'
	},
	pink: {
		'bg-colour': '#ffcdef',
		'hue': '75deg'
	},
	green: {
		'bg-colour': '#91ffeb',
		'hue': '300deg'
	}
}

const CSS = new Proxy({}, {
	get(_, variable) {
		const styles = window.getComputedStyles(ROOT);
		return styles.getPropertyValue(`--${variable}`).trim();
	},
	set(_, variable, value) {
		return ROOT.style.setProperty(`--${variable}`, value);
	}
});

let currentScheme = 'default';
let rainbowInterval = null;
let hueOffs = 0;

function useColourScheme(scheme) {
	if (scheme === currentScheme) return;
	currentScheme = scheme;

	clearInterval(rainbowInterval);
	if (scheme === 'rainbow') {
		hueOffs = 0;
		rainbowInterval = setInterval(() => {
			CSS['bg-colour'] = `hsl(${hueOffs + 212}deg, 100%, 86%)`;
			CSS['hue'] = `${hueOffs}deg`;
			hueOffs = (hueOffs + 2) % 360;
		}, 40)
		return;
	}

	const variables = COLOUR_SCHEMES[scheme];
	for (const variable in variables)
		CSS[variable] = variables[variable];
}