MediaWiki:Gadget-theme.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

;(function($, mw){
    const COOKIES = { THEME: 'ss14_wikiTheme', DARK: 'darkmode' };

    function loadTheme() {
        const saved = $.cookie(COOKIES.THEME);
        return saved || 'normal';
    }

    function saveTheme(theme) {
        $.cookie(COOKIES.THEME, theme, { expires: 365, path: '/' });
        $.cookie(COOKIES.DARK, theme === 'dark', { expires: 365, path: '/' });
    }

    function applyTheme(theme) {
        $('body')
            .removeClass('wgl-theme-normal wgl-theme-light wgl-theme-dark')
            .addClass(`wgl-theme-${theme}`);
        mw.hook('wgl.themeChanged').fire(theme);
    }

    function initThemeMenu($container, currentTheme) {
        const $portlet = $('<div>', {
            class: 'mw-portlet mw-portlet-skin-client-prefs-skin-theme mw-portlet-js theme-menu',
            id: 'skin-client-prefs-skin-theme'
        });

        const $heading = $('<div>', { class: 'theme-menu__heading', text: 'Тема' });
        const $menuContent = $('<div>', { class: 'theme-menu__content' });
        const $list = $('<ul>', { class: 'theme-menu__content-list' });
        const $item = $('<li>', { class: 'mw-list-item mw-list-item-js' });
        const $form = $('<form>');

        const themes = [
            { key: 'light',  label: 'Светлая (beta)' },
            { key: 'normal', label: 'Стандартная' },
            { key: 'dark',   label: 'Тёмная' }
        ];
        themes.forEach(item => {
            const $wrapper = $('<div>', { class: 'theme-client-prefs-radio' });
            const $input = $('<input>', {
                type: 'radio', name: 'theme-selection',
                id: `theme-value-${item.key}`, value: item.key,
                checked: item.key === currentTheme
            });
            const $label = $('<label>', { for: `theme-value-${item.key}`, text: item.label });
            $wrapper.append($input, $label);
            $form.append($wrapper);
        });

        $item.append($form);
        $list.append($item);
        $menuContent.append($list);
        $portlet.append($heading, $menuContent);
        $container.append($portlet);

        $form.on('change', 'input[name="theme-selection"]', function() {
            const newTheme = $(this).val();
            saveTheme(newTheme);
            applyTheme(newTheme);
        });
    }

    const initialTheme = loadTheme();
    applyTheme(initialTheme);

    mw.themeUtils = { loadTheme, applyTheme, initThemeMenu };
}(jQuery, mediaWiki));

;(function($, mw){
    const { loadTheme, initThemeMenu } = mw.themeUtils;

    function createSettingsDropdown(currentTheme) {
        const $dropdown = $('<div>', { class: 'theme-dropdown' });
        const $details = $('<details>', { id: 'theme-preferences-details', class: 'theme-dropdown-details' });
        const $summary = $('<summary>', { class: 'theme-dropdown-summary', 'data-tooltip-initialized': 'true' })
            .append($('<span>', { class: 'theme-icon theme-icon-settings' }));
        $details.append($summary);

        const $window = $('<div>', { id: 'theme-preferences', class: 'theme-window' }).hide();
        const $header = $('<div>', {
            id: 'theme-preferences__header',
            class: 'theme-window__header',
            text: 'Параметры'
        });
        $window.append($header);

        const $content = $('<div>', {
            id: 'theme-preferences__content',
            class: 'theme-window__content'
        });
        $window.append($content);

        initThemeMenu($content, currentTheme);

        $dropdown.append($details, $window);
        $('#user-tools').prepend($dropdown);

        $details.on('toggle', function() {
            $(this).prop('open') ? $window.show() : $window.hide();
        });
    }

    function init() {
        if (mw.config.get('wgPageName') !== 'Обсуждение_участника:Pok') return;
        const theme = loadTheme();
        createSettingsDropdown(theme);
    }

    $(init);
}(jQuery, mediaWiki));