MediaWiki:Common.js

/* ここにあるすべてのJavaScriptは、すべてのページ読み込みですべての利用者に対して読み込まれます */
// ========================================
// ダークモード切り替え機能
// ========================================

(function() {
    'use strict';
    
    // 設定キー
    const THEME_KEY = 'fluent-theme-preference';
    const THEME_DARK = 'dark';
    const THEME_LIGHT = 'light';
    const THEME_AUTO = 'auto';
    
    // 現在のテーマを取得
    function getCurrentTheme() {
        return localStorage.getItem(THEME_KEY) || THEME_AUTO;
    }
    
    // テーマを適用
    function applyTheme(theme) {
        const html = document.documentElement;
        
        // 既存のクラスを削除
        html.classList.remove('theme-dark', 'theme-light', 'theme-auto');
        
        // 新しいクラスを追加
        html.classList.add('theme-' + theme);
        
        // localStorageに保存
        localStorage.setItem(THEME_KEY, theme);
        
        // ボタンのアイコンを更新
        updateThemeButton(theme);
    }
    
    // ボタンのアイコンを更新
    function updateThemeButton(theme) {
        const button = document.getElementById('theme-toggle-button');
        if (!button) return;
        
        // アイコンとツールチップを更新
        const icons = {
            'light': { icon: '☀️', title: 'ライトモード' },
            'dark': { icon: '🌙', title: 'ダークモード' },
            'auto': { icon: '🌗', title: '自動（システム設定に従う）' }
        };
        
        const config = icons[theme];
        button.textContent = config.icon;
        button.title = config.title;
    }
    
    // テーマを切り替え
    function toggleTheme() {
        const current = getCurrentTheme();
        let next;
        
        // light → dark → auto → light のサイクル
        switch(current) {
            case THEME_LIGHT:
                next = THEME_DARK;
                break;
            case THEME_DARK:
                next = THEME_AUTO;
                break;
            case THEME_AUTO:
            default:
                next = THEME_LIGHT;
                break;
        }
        
        applyTheme(next);
    }
    
    // ボタンを作成
    function createThemeButton() {
        // 既に存在する場合は何もしない
        if (document.getElementById('theme-toggle-button')) return;
        
        // ボタンを作成
        const button = document.createElement('button');
        button.id = 'theme-toggle-button';
        button.className = 'theme-toggle-button';
        button.setAttribute('aria-label', 'テーマ切り替え');
        
        // クリックイベント
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            toggleTheme();
        });
        
        // ボタンを配置（user-tools 内に追加）
        const userTools = document.getElementById('user-tools');
        if (userTools) {
            // search-iconの後に挿入
            const searchIcon = document.getElementById('search-icon');
            if (searchIcon && searchIcon.nextSibling) {
                userTools.insertBefore(button, searchIcon.nextSibling);
            } else {
                userTools.appendChild(button);
            }
        }
        
        return button;
    }
    
    // 初期化
    function init() {
        // ボタンを作成
        createThemeButton();
        
        // 保存されたテーマを適用
        const savedTheme = getCurrentTheme();
        applyTheme(savedTheme);
    }
    
    // DOMContentLoaded時に初期化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();