beet_design 0.0.8

Design system and components for beet rsx
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

// a script to run before initial render to avoid FOUC.
// this should be included by the Head component

const lightClass = "scheme-light";
const darkClass = "scheme-dark";

const schemes = [lightClass, darkClass];
init();

function init() {
	const mediaQueryList = globalThis.matchMedia("(prefers-color-scheme: dark)");
	const setSchemeFromMediaQueryList = () => {
		if (mediaQueryList.matches) setScheme(darkClass);
		else setScheme(lightClass);
	};

	// event listeners should probably be in the application
	mediaQueryList.addEventListener("change", () => {
		setSchemeFromMediaQueryList();
	});

	setSchemeFromMediaQueryList();
}

function setScheme(scheme) {
	schemes.forEach((t) => {
		document.documentElement.classList.remove(t);
	});

	document.documentElement.classList.add(scheme);
	setScrollBar(scheme);
}

function setScrollBar(scheme) {
	const scollbarScheme = scheme === lightClass ? "light" : "dark";

	// edit: i dont think this is required and is causing fouc
	// document.documentElement
	// 	.setAttribute('style', 'display: none')

	document.documentElement.setAttribute("data-color-scheme", scollbarScheme);

	// Trigger reflow by reading a property
	document.body?.clientWidth;

	// Show the document
	// edit: i dont think this is required and is causing fouc
	// document.documentElement
	// 	.setAttribute('style', 'display: \'\'')
}