미디어위키:Gadget-CSSVars.js

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

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

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

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

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

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

        // 3. CSS 문자열 조립
        let cssLines = [];

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

        if (themes.light.length) {
            cssLines.push(`@media (prefers-color-scheme: light) { :root { ${themes.light.join(' ')} } }`);
        }

        if (themes.dark.length) {
            cssLines.push(`@media (prefers-color-scheme: dark) { :root { ${themes.dark.join(' ')} } }`);
        }

        // 4. 최종 주입
        if (cssLines.length) {
            const finalCss = cssLines.join('\n');
            mw.util.addCSS(finalCss);
        }
    }
);