미디어위키:Gadget-CSSVars.js - 편집 역사

2026년 2월 12일 (목) 14:59에 삼쩌모님의 편집

2026-02-12T14:59:13Z

← 이전 판		2026년 2월 12일 (목) 23:59 판
3번째 줄:		3번째 줄:
	function () {		function () {
	// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)		// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)
	const $contentArea = window.$content		const $contentArea = window.$content \|\| $('#mw-content-text');
	\| $('#mw-content-text');
	const $el = $contentArea.find('.mw-page-css-vars').first();		const $el = $contentArea.find('.mw-page-css-vars').first();

삼쩌모: 문자열 찾아 바꾸기 - "\\n\|" 문자열을 " |" 문자열로

2026-02-12T14:56:55Z

문자열 찾아 바꾸기 - "\\n\|" 문자열을 " |" 문자열로

← 이전 판		2026년 2월 12일 (목) 23:56 판
3번째 줄:		3번째 줄:
	function () {		function () {
	// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)		// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)
	const $contentArea = window.$content \n\| $('#mw-content-text');		const $contentArea = window.$content
			\| $('#mw-content-text');
	const $el = $contentArea.find('.mw-page-css-vars').first();		const $el = $contentArea.find('.mw-page-css-vars').first();

삼쩌모: 문자열 찾아 바꾸기 - "\|\|" 문자열을 "\n|" 문자열로

2026-02-12T14:50:16Z

문자열 찾아 바꾸기 - "\|\|" 문자열을 "\n|" 문자열로

← 이전 판		2026년 2월 12일 (목) 23:50 판
3번째 줄:		3번째 줄:
	function () {		function () {
	// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)		// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)
	const $contentArea = window.$content \|\| $('#mw-content-text');		const $contentArea = window.$content \n\| $('#mw-content-text');
	const $el = $contentArea.find('.mw-page-css-vars').first();		const $el = $contentArea.find('.mw-page-css-vars').first();

2026년 1월 28일 (수) 09:32에 삼쩌모님의 편집

2026-01-28T09:32:48Z

← 이전 판		2026년 1월 28일 (수) 18:32 판
1번째 줄:		1번째 줄:
	mw.loader.using(		mw.loader.using(
	['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.util'],		['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.util', 'jquery'],
	function () {		function () {
	const el = $~~content~~.find('.mw-page-css-vars').first();		// 1. $content가 전역에 없을 경우를 대비해 안전하게 참조 (보통 위키 본문 영역)
	if (!el.length) return;		const $contentArea = window.$content \|\| $('#mw-content-text');
			const $el = $contentArea.find('.mw-page-css-vars').first();

			if (!$el.length) return;

	let vars;		let vars;
	try {		try {
	~~vars =~~ JSON.parse(el.attr('data-vars'));		// .attr() 대신 .data()를 사용하면 jQuery가 자동으로 JSON 파싱을 시도할 수 있지만,
	} catch (e) {		// 데이터 속성명에 따라 다르므로 기존 JSON.parse 방식을 유지하되 안전하게 처리합니다.
	console.error('PageCSSVars: ~~invalid JSON~~', e);		const rawData = $el.attr('data-vars');
	return;		vars = JSON.parse(rawData);
	}		} catch (e) {
			console.error('[PageCSSVars] JSON 파싱 에러:', e);
			return;
			}

	const ~~light~~ = {};		const themes = {
	~~const~~ dark ~~= {};~~		common: [],
	~~const common = {~~};		light: [],
			dark: []
			};

	Object.entries(vars).forEach(([key, value]) => {		// 2. 루프 내에서 문자열 조작을 미리 처리하여 가독성 및 성능 향상
	if (key.endsWith('-light')) {		Object.entries(vars).forEach(([key, value]) => {
	light[key.replace(/-light$/, '')~~] =~~ value;		if (key.endsWith('-light')) {
	} else if (key.endsWith('-dark')) {		themes.light.push(`--${key.replace(/-light$/, '')}: ${value} !important;`);
	dark[key.replace(/-dark$/, '')~~] =~~ value;		} else if (key.endsWith('-dark')) {
	} else {		themes.dark.push(`--${key.replace(/-dark$/, '')}: ${value} !important;`);
	common[key~~] =~~ value;		} else {
	}		themes.common.push(`--${key}: ${value} !important;`);
	});		}
			});

	~~const makeVars = (obj) =>~~		// 3. CSS 문자열 조립
	~~Object~~.~~entries(obj)~~		let cssLines = [];
	~~.map((~~[~~k, v~~]~~) => `--${k}: ${v} !important;`)~~
	~~.join('')~~;

	~~let css =~~ '';		if (themes.common.length) {
			cssLines.push(`:root { ${themes.common.join(' ')} }`);
			}

	if (~~Object~~.~~keys(common)~~.length) {		if (themes.light.length) {
	~~css +=~~ `:root{${~~makeVars~~(~~common~~)}}`;		cssLines.push(`@media (prefers-color-scheme: light) { :root { ${themes.light.join(' ')} } }`);
	}		}

	if (~~Object~~.~~keys(light)~~.length) {		if (themes.dark.length) {
	~~css +=~~ `		cssLines.push(`@media (prefers-color-scheme: dark) { :root { ${themes.dark.join(' ')} } }`);
	@media (prefers-color-scheme: ~~light~~){		}
	:root{${~~makeVars~~(~~light~~)}}
	}`;
	}

	if (~~Object.keys(dark)~~.length) {		// 4. 최종 주입
	~~css +~~= `		if (cssLines.length) {
	~~@media~~ (~~prefers-color-scheme: dark~~){		const finalCss = cssLines.join('\n');
	~~:root{${makeVars(dark)}}~~		mw.util.addCSS(finalCss);
	}`;		}
	}		}
			);
	~~if (css.trim()) {~~
	mw.util.addCSS(~~css~~);
	}
	});

2026년 1월 28일 (수) 09:31에 삼쩌모님의 편집

2026-01-28T09:31:45Z

← 이전 판		2026년 1월 28일 (수) 18:31 판
1번째 줄:		1번째 줄:
	mw.~~hook~~('~~wikipage~~.~~content~~').~~add(~~function (~~$content~~) {		mw.loader.using(
			['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.util'],
			function () {
	const el = $content.find('.mw-page-css-vars').first();		const el = $content.find('.mw-page-css-vars').first();
	if (!el.length) return;		if (!el.length) return;

2026년 1월 28일 (수) 09:30에 삼쩌모님의 편집

2026-01-28T09:30:04Z

← 이전 판		2026년 1월 28일 (수) 18:30 판
1번째 줄:		1번째 줄:
	mw.hook('wikipage.content').add(function ($content) {		mw.hook('wikipage.content').add(function ($content) {
	const el = $content.find('.mw-css-vars').first();		const el = $content.find('.mw-page-css-vars').first();
	if (!el.length) return;		if (!el.length) return;

2026년 1월 28일 (수) 09:28에 삼쩌모님의 편집

2026-01-28T09:28:47Z

← 이전 판		2026년 1월 28일 (수) 18:28 판
11번째 줄:		11번째 줄:
	}		}

	const ~~root~~ = ~~document.documentElement~~;		const light = {};
	const ~~isDark~~ = ~~window.matchMedia('(prefers-color-scheme: dark)').matches~~;		const dark = {};
			const common = {};

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

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

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

	~~if (!apply) return~~;		let css = '';

	~~/* 🔥 !important 강제 */~~		if (Object.keys(common).length) {
	root.~~style~~.~~setProperty~~(`--${~~targetKey~~}`~~, value, 'important')~~;		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);
			}
	});		});

2026년 1월 28일 (수) 09:24에 삼쩌모님의 편집

2026-01-28T09:24:44Z

← 이전 판		2026년 1월 28일 (수) 18:24 판
7번째 줄:		7번째 줄:
	vars = JSON.parse(el.attr('data-vars'));		vars = JSON.parse(el.attr('data-vars'));
	} catch (e) {		} catch (e) {
	console.error('~~CSSVars~~: invalid JSON', e);		console.error('PageCSSVars: invalid JSON', e);
	return;		return;
	}		}

	const root = document.documentElement;		const root = document.documentElement;
			const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

	Object.entries(vars).forEach(([key, value]) => {		Object.entries(vars).forEach(([key, value]) => {
	root.style.setProperty(`--${~~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');
	});		});
	});		});

삼쩌모: 새 문서: 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('CSSVars: invalid JSON', e); return; } const root = document.documentElement; Object.entries(vars).forEach(([key, value]) => { root.style.setProperty(`--${key}`, value); }); });

2026-01-28T09:20:00Z

새 문서: 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('CSSVars: invalid JSON', e); return; } const root = document.documentElement; Object.entries(vars).forEach(([key, value]) => { root.style.setProperty(`--${key}`, value); }); });

새 문서

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('CSSVars: invalid JSON', e);
return;
}

const root = document.documentElement;

Object.entries(vars).forEach(([key, value]) => {
root.style.setProperty(`--${key}`, value);
});
});