미디어위키: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('CSSVars: invalid JSON', e); return; } const root = document.documentElement; Object.entries(vars).forEach(([key, value]) => { root.style.setProperty(`--${key}`, value); }); }); |
편집 요약 없음 |
||
| 7번째 줄: | 7번째 줄: | ||
vars = JSON.parse(el.attr('data-vars')); | vars = JSON.parse(el.attr('data-vars')); | ||
} catch (e) { | } catch (e) { | ||
console.error(' | 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(`--${ | 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'); | |||
}); | }); | ||
}); | }); | ||
2026년 1월 28일 (수) 18:24 판
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');
});
});