|
|
| 1行目: |
1行目: |
| /* ここにあるすべてのJavaScriptは、すべてのページ読み込みですべての利用者に対して読み込まれます */ | | /* ここにあるすべての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();
| |
| }
| |
| })();
| |
/* ここにあるすべてのJavaScriptは、すべてのページ読み込みですべての利用者に対して読み込まれます */
