/* ========================================================================== Seiryu-Theme — Dark Mode OS設定（prefers-color-scheme）または に追従 ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --seiryu-color-bg: #0f1e2e; --seiryu-color-bg-alt: #1a2d40; --seiryu-color-bg-dark: #070f17; --seiryu-color-text: #e8edf2; --seiryu-color-text-muted: #8fa3b8; --seiryu-color-text-inverse: #ffffff; --seiryu-color-border: #253649; --seiryu-shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --seiryu-shadow-md: 0 4px 16px rgba(0,0,0,0.4); --seiryu-shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } } /* 手動ダークモード: */ [data-theme="dark"] { --seiryu-color-bg: #0f1e2e; --seiryu-color-bg-alt: #1a2d40; --seiryu-color-bg-dark: #070f17; --seiryu-color-text: #e8edf2; --seiryu-color-text-muted: #8fa3b8; --seiryu-color-text-inverse: #ffffff; --seiryu-color-border: #253649; --seiryu-shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --seiryu-shadow-md: 0 4px 16px rgba(0,0,0,0.4); --seiryu-shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } /* 手動ライトモード: — OS設定に関わらず強制ライト */ [data-theme="light"] { --seiryu-color-bg: #ffffff; --seiryu-color-bg-alt: #f7f8fa; --seiryu-color-bg-dark: #0f1e2e; --seiryu-color-text: #1a1a1a; --seiryu-color-text-muted: #6b7280; --seiryu-color-text-inverse: #ffffff; --seiryu-color-border: #e2e8f0; } /* ダークモード用の細かい調整 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img:not([src$=".svg"]) { filter: brightness(0.9); } /* H4 — ダークモードでは primary-light を使用（視認性確保） */ :root:not([data-theme="light"]) .entry-content h4 { color: var(--seiryu-color-primary-light); } } [data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(0.9); } [data-theme="dark"] .entry-content h4 { color: var(--seiryu-color-primary-light); } /* ダークモード切替ボタン */ .seiryu-theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; border-radius: var(--seiryu-radius-sm); color: var(--seiryu-color-text); transition: background-color 0.2s, color 0.2s; } .seiryu-theme-toggle:hover { background-color: var(--seiryu-color-bg-alt); } .seiryu-header--transparent:not(.is-scrolled) .seiryu-theme-toggle { color: var(--seiryu-color-text-inverse); } /* アイコン切替: ダークモード時に月アイコンを太陽に変える */ .seiryu-theme-toggle .icon-sun { display: none; } .seiryu-theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seiryu-theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .seiryu-theme-toggle .icon-moon { display: none; } } [data-theme="dark"] .seiryu-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .seiryu-theme-toggle .icon-moon { display: none; } [data-theme="light"] .seiryu-theme-toggle .icon-sun { display: none; } [data-theme="light"] .seiryu-theme-toggle .icon-moon { display: block; } /* reduced-motion 対応 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }