MediaWiki:Common.js: відмінності між версіями

Матеріал з darnytsa_hero
Перейти до навігації Перейти до пошуку
Немає опису редагування
Немає опису редагування
Рядок 1: Рядок 1:
/* Розміщений тут код JavaScript буде завантажений всім користувачам при зверненні до будь-якої сторінки */
$(function () {
$(function () {
    // Доступні теми та їхні CSS
     var themes = {
     var themes = {
         light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
         light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
Рядок 8: Рядок 5:
     };
     };


    // Зчитуємо збережену тему
     var theme = localStorage.getItem('selectedTheme');
     var theme = localStorage.getItem('selectedTheme');


    // Якщо тема ще не збережена → визначаємо за налаштуванням ОС
     if (!theme) {
     if (!theme) {
         theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     }


    // Підключаємо CSS вибраної теми
     if (themes[theme]) {
     if (themes[theme]) {
         mw.loader.load(themes[theme], 'text/css');
         mw.loader.load(themes[theme], 'text/css');
     }
     }


    // Створюємо кнопку перемикача
     var $btn = $('<button>')
     var $btn = $('<button>')
         .text(theme === 'dark' ? ' Світла тема ☀️' : ' Темна тема 🌙')
         .text(theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙')
         .attr('title', 'Змінити тему')
         .attr('title', 'Змінити тему')
         .css({
         .css({
Рядок 29: Рядок 22:
             bottom: '10px',
             bottom: '10px',
             right: '10px',
             right: '10px',
            width: '50px',
             padding: '10px 16px', // більше простору для тексту
            height: '50px',
             padding: '0',
             border: 'none',
             border: 'none',
             borderRadius: '50%',   // робимо кнопку круглою
             borderRadius: '25px', // овальна форма
             background: '#1a73e8', // синій колір фону
             background: '#1a73e8',  
             color: '#ffffff',       // білий текст
             color: '#ffffff',
             fontWeight: 'bold',
             fontWeight: 'bold',
             fontSize: '14px',
             fontSize: '14px',
Рядок 41: Рядок 32:
             zIndex: 9999,
             zIndex: 9999,
             textAlign: 'center',
             textAlign: 'center',
            lineHeight: '50px',    // щоб текст був по центру вертикально
             boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
             boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
            whiteSpace: 'nowrap'  // текст не переноситься
         })
         })
         .click(function () {
         .click(function () {
            // Перемикаємо тему
             var newTheme = theme === 'dark' ? 'light' : 'dark';
             var newTheme = theme === 'dark' ? 'light' : 'dark';
             localStorage.setItem('selectedTheme', newTheme);
             localStorage.setItem('selectedTheme', newTheme);

Версія за 15:21, 23 вересня 2025

$(function () {
    var themes = {
        light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
        dark: '/w/index.php?title=MediaWiki:Dark.css&action=raw&ctype=text/css'
    };

    var theme = localStorage.getItem('selectedTheme');

    if (!theme) {
        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }

    if (themes[theme]) {
        mw.loader.load(themes[theme], 'text/css');
    }

    var $btn = $('<button>')
        .text(theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙')
        .attr('title', 'Змінити тему')
        .css({
            position: 'fixed',
            bottom: '10px',
            right: '10px',
            padding: '10px 16px',  // більше простору для тексту
            border: 'none',
            borderRadius: '25px',  // овальна форма
            background: '#1a73e8', 
            color: '#ffffff',
            fontWeight: 'bold',
            fontSize: '14px',
            cursor: 'pointer',
            zIndex: 9999,
            textAlign: 'center',
            boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
            whiteSpace: 'nowrap'  // текст не переноситься
        })
        .click(function () {
            var newTheme = theme === 'dark' ? 'light' : 'dark';
            localStorage.setItem('selectedTheme', newTheme);
            location.reload();
        });

    $('body').append($btn);
});