MediaWiki:Common.js: Difference between revisions

From OtherX
Jump to navigation Jump to search
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
body {
// Dark mode toggle
     max-width: 100%; /* or a specific value */
function toggleDarkMode() {
     margin: 0 auto; /* center the content */
    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);
    }
});

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);
    }
});