MediaWiki:Common.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 () {
const config = {
'theme-stddark': { name: 'Standard Dark', logo: '/images/3/3c/Bg-neutral.png', accent: '#00adb5', bgMain: '#161719', bgContent: '#1e2022', bgCard: '#282a2d', bgInput: '#313438', border: '#3f4348', text: '#e3e4e6' },
'theme-nanotrasen': { name: 'Nanotrasen TGUI', logo: '/images/5/58/Nanotrasen-logo.png', accent: '#4a90e2', bgMain: '#0c1014', bgContent: '#141a22', bgCard: '#1b2430', bgInput: '#222d3c', border: '#2b3a4e', text: '#dae5f3' },
'theme-syndicate': { name: 'Syndicate TGUI', logo: '/images/c/ce/Syndicate-logo.png', accent: '#ff3333', bgMain: '#111111', bgContent: '#1a1a1a', bgCard: '#262626', bgInput: '#333333', border: '#441111', text: '#e0e0e0' },
'theme-plasmafire': { name: 'Plasmafire', logo: '/images/b/b3/Bg-synthsunset.png', accent: '#ff41b4', bgMain: '#090312', bgContent: '#150b24', bgCard: '#23123a', bgInput: '#321b51', border: '#a62681', text: '#f3e8f7' },
'theme-clockcult': { name: 'Clock Cult', logo: '/images/3/3c/Bg-neutral.png', accent: '#e5af33', bgMain: '#14110c', bgContent: '#201b12', bgCard: '#2d2619', bgInput: '#3a3121', border: '#be9b4a', text: '#f0e6d2' },
'theme-bloodcult': { name: 'Blood Cult', logo: '/images/c/c0/Bg-spookycomp.png', accent: '#ff4d4d', bgMain: '#0c0202', bgContent: '#170505', bgCard: '#260a0a', bgInput: '#380e0e', border: '#800c0c', text: '#f0dad0' },
'theme-heretic': { name: 'Heretic', logo: '/images/c/c0/Bg-spookycomp.png', accent: '#39ff14', bgMain: '#030a05', bgContent: '#0b1a0e', bgCard: '#122a18', bgInput: '#1a3b21', border: '#1f5f2a', text: '#e2f3e5' },
'theme-default': { name: 'Standard Light' }
};
const palettePath = '/images/f/f6/Palette.png';
function renderThemeStyles(themeId) {
const active = config[themeId] || config['theme-stddark'];
if (themeId === 'theme-default') {
$('body, html, #content, .mw-body, .vector-header-container, .vector-header, .mw-header, .mw-sidebar, .vector-dropdown-content, .vector-pinnable-container, .wikitable, .toc, .thumbinner, .infobox, .ambox, .mw-notification, .catlinks, .navbox, .ext-mwe-cdx-card').attr('style', '');
$('a, .vector-icon, .mw-togglebutton, .toggle-link, .mw-collapsible-toggle, .cdx-button--weight-quiet, h1, h2, hr, .vector-menu-portal, .mw-footer, .vector-toc').attr('style', '');
$('.cdx-text-input__input, .vector-search-box-input, select, input, textarea, .cdx-button').attr('style', '');
$('.vector-logo-img').attr('style', '');
$('.mw-logo, .vector-logo').attr('style', '');
$('.tg-custom-palette-icon').attr('style', `display:block; width:32px; height:32px; background:url("${palettePath}") no-repeat center/contain; cursor:pointer;`);
return;
}
$('html, body').attr('style', `background-color: ${active.bgMain} !important; color: ${active.text} !important;`);
$('#content, .mw-body').attr('style', `background-color: ${active.bgContent} !important; border-color: ${active.border} !important; color: ${active.text} !important;`);
$('.vector-header-container, .vector-header, .mw-header, .mw-sidebar').attr('style', `background-color: ${active.bgMain} !important; background-image: none !important; border-bottom: 1px solid ${active.border} !important;`);
$('.vector-dropdown-content, .vector-pinnable-container, .wikitable, .toc, .thumbinner, .infobox, .ambox, .mw-notification, .catlinks, .navbox, .ext-mwe-cdx-card, div[role="note"]').attr('style', `background-color: ${active.bgCard} !important; border: 1px solid ${active.border} !important; color: ${active.text} !important;`);
// 3. Красим текст, заголовки, разделители и ВСЕ кнопки "Скрыть/Показать"
$('a, .vector-icon, .mw-togglebutton, .toggle-link, .mw-collapsible-toggle, .cdx-button--weight-quiet').attr('style', `color: ${active.accent} !important;`);
$('h1, h2').attr('style', `border-bottom: 1px solid ${active.border} !important; color: ${active.text} !important;`);
$('hr, .vector-menu-portal, .mw-footer, .vector-toc').attr('style', `border-color: ${active.border} !important;`);
// 4. Поля ввода, кнопки поиска и выпадающие списки
$('.cdx-text-input__input, .vector-search-box-input, select, input, textarea, .cdx-button').attr('style', `background-color: ${active.bgInput} !important; color: ${active.text} !important; border-color: ${active.border} !important;`);
$('code, pre, .mw-code, .mw-highlight pre, .syntaxhighlight').attr('style', `background-color: ${active.bgCard} !important; color: #e2b27a !important; border: 1px solid ${active.border} !important;`);
$('.vector-logo-img').attr('style', 'opacity: 0 !important; width: 0 !important;');
$('.mw-logo, .vector-logo').attr('style', `background: url("${active.logo}") no-repeat left center/contain !important; display: block !important; min-width: 150px !important; height: 100% !important;`);
$('.tg-custom-palette-icon').attr('style', `display: block !important; width: 32px !important; height: 32px !important; background: url("${palettePath}") no-repeat center/contain !important; filter: drop-shadow(0 0 6px ${active.accent}) !important; cursor: pointer;`);
}
function injectSelector() {
if (document.getElementById('p-tg-theme')) return;
const currentTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
let html = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block; vertical-align: middle; position: relative; width: 36px; height: 36px; z-index: 9999;">';
html += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" style="display: none !important;">';
html += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" style="display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; margin: 0; padding: 0; border: none; background: transparent;">';
html += '<span class="tg-custom-palette-icon"></span>';
html += '</label>';
html += '<div class="vector-dropdown-content" id="p-tg-dropdown-menu" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 10000; background: #222; border: 1px solid #444; border-radius: 4px;">';
html += '<ul style="margin: 0; padding: 0; list-style: none;">';
Object.keys(config).forEach(id => {
html += `<li style="margin: 4px 0;"><a href="#" class="tg-theme-item" data-theme="${id}" style="display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; font-size: 13px; color: #fff;">${config[id].name}</a></li>`;
});
html += '</ul></div></div>';
const targets = [document.querySelector('.vector-user-links-main'), document.getElementById('p-personal-more'), document.getElementById('p-userlinks'), document.querySelector('.vector-user-links'), document.querySelector('.vector-header-end')];
for (let target of targets) { if (target) { $(target).before(html); break; } }
renderThemeStyles(currentTheme);
}
injectSelector();
setInterval(function() {
const currentTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
renderThemeStyles(currentTheme);
if (!document.getElementById('p-tg-theme')) injectSelector();
}, 1000);
$(document).on('change', '#p-tg-theme-dropdown-checkbox', function() {
$('#p-tg-dropdown-menu').css('display', this.checked ? 'block' : 'none');
});
$(document).on('click', '.tg-theme-item', function (e) {
e.preventDefault();
const chosen = $(this).data('theme');
localStorage.setItem('mw-tg-theme', chosen);
renderThemeStyles(chosen);
$('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change');
});
});