Wikipedia Dark/Light Mode

Toggle dark/light mode without changing logo text color

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Wikipedia Dark/Light Mode
// @namespace    http://tampermonkey.net/
// @version      1.7
// @description  Toggle dark/light mode without changing logo text color
// @author       AnonymousUnblocker
// @match        https://*.wikipedia.org/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create toggle button
    const btn = document.createElement('button');
    btn.innerText = 'Toggle Dark Mode';
    Object.assign(btn.style, {
        position: 'fixed',
        top: '10px',
        right: '10px',
        zIndex: 9999,
        padding: '8px 12px',
        backgroundColor: '#333',
        color: '#fff',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
    });
    document.body.appendChild(btn);

    // Inject CSS for dark/light modes
    const style = document.createElement('style');
    style.innerHTML = `
        /* Dark mode background and text */
        body.dark-mode {
            background-color: #121212 !important;
            /* Removed global text color for neutral appearance */
        }
        /* Dark mode links */
        body.dark-mode a {
            color: #9ecfff !important;
        }
        /* Removed specific logo text color styles */
        /* Optional: keep logo styles unchanged for default color */
    `;
    document.head.appendChild(style);

    // Function to toggle dark mode
    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
        const isDark = document.body.classList.contains('dark-mode');
        btn.innerText = isDark ? 'Toggle Light Mode' : 'Toggle Dark Mode';
    }

    // Setup click event
    btn.addEventListener('click', toggleDarkMode);

    // Wait for DOM to load before doing anything
    document.addEventListener('DOMContentLoaded', () => {
        // No additional class changes needed
    });
})();