미디어위키:Gadget-CSSVars.js 문서 원본 보기

mw.hook('wikipage.content').add(function ($content) {
	const el = $content.find('.mw-css-vars').first();
	if (!el.length) return;

	let vars;
	try {
		vars = JSON.parse(el.attr('data-vars'));
	} catch (e) {
		console.error('PageCSSVars: invalid JSON', e);
		return;
	}

	const light = {};
	const dark = {};
	const common = {};

	Object.entries(vars).forEach(([key, value]) => {
		if (key.endsWith('-light')) {
			light[key.replace(/-light$/, '')] = value;
		} else if (key.endsWith('-dark')) {
			dark[key.replace(/-dark$/, '')] = value;
		} else {
			common[key] = value;
		}
	});

	const makeVars = (obj) =>
		Object.entries(obj)
			.map(([k, v]) => `--${k}: ${v} !important;`)
			.join('');

	let css = '';

	if (Object.keys(common).length) {
		css += `:root{${makeVars(common)}}`;
	}

	if (Object.keys(light).length) {
		css += `
@media (prefers-color-scheme: light){
	:root{${makeVars(light)}}
}`;
	}

	if (Object.keys(dark).length) {
		css += `
@media (prefers-color-scheme: dark){
	:root{${makeVars(dark)}}
}`;
	}

	if (css.trim()) {
		mw.util.addCSS(css);
	}
});