미디어위키:Gadget-CSSVars.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

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 root = document.documentElement;
	const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

	Object.entries(vars).forEach(([key, value]) => {
		let targetKey = key;
		let apply = true;

		if (key.endsWith('-light')) {
			targetKey = key.replace(/-light$/, '');
			apply = !isDark;
		} else if (key.endsWith('-dark')) {
			targetKey = key.replace(/-dark$/, '');
			apply = isDark;
		}

		if (!apply) return;

		/* 🔥 !important 강제 */
		root.style.setProperty(`--${targetKey}`, value, 'important');
	});
});