MediaWiki:Common.js: Difference between revisions

From OtherX
Jump to navigation Jump to search
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Disable user scaling on mobile devices */
// Dark mode toggle
@media only screen and (max-width: 767px) {
function toggleDarkMode() {
     body {
    const body = document.body;
        touch-action: manipulation;
     body.classList.toggle('dark-mode');
        zoom: 1.0 !important;
 
         -ms-touch-action: manipulation;
    // Save user preference in localStorage
    const isDarkMode = body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDarkMode ? 'true' : 'false');
}
 
// Check user preference on page load
document.addEventListener('DOMContentLoaded', () => {
    const isDarkMode = localStorage.getItem('darkMode') === 'true';
    const body = document.body;
 
    if (isDarkMode) {
         body.classList.add('dark-mode');
     }
     }
}
 
    // Add dark mode toggle to personal tools menu
    const personalTools = document.getElementById('p-personal');
    if (personalTools) {
        const darkModeToggle = document.createElement('li');
        darkModeToggle.id = 'pt-darkmode';
        darkModeToggle.className = 'mw-list-item';
        darkModeToggle.innerHTML = '<a href="javascript:void(0);" onclick="toggleDarkMode();"><span>Dark mode</span></a>';
 
        personalTools.querySelector('.vector-menu-content-list').appendChild(darkModeToggle);
    }
});

Latest revision as of 21:25, 24 December 2023

// Dark mode toggle
function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle('dark-mode');

    // Save user preference in localStorage
    const isDarkMode = body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDarkMode ? 'true' : 'false');
}

// Check user preference on page load
document.addEventListener('DOMContentLoaded', () => {
    const isDarkMode = localStorage.getItem('darkMode') === 'true';
    const body = document.body;

    if (isDarkMode) {
        body.classList.add('dark-mode');
    }

    // Add dark mode toggle to personal tools menu
    const personalTools = document.getElementById('p-personal');
    if (personalTools) {
        const darkModeToggle = document.createElement('li');
        darkModeToggle.id = 'pt-darkmode';
        darkModeToggle.className = 'mw-list-item';
        darkModeToggle.innerHTML = '<a href="javascript:void(0);" onclick="toggleDarkMode();"><span>Dark mode</span></a>';

        personalTools.querySelector('.vector-menu-content-list').appendChild(darkModeToggle);
    }
});