Wikipedia Dark/Light Mode

Toggle dark/light mode without changing logo text color

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==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
    });
})();