/** * ダークモード（Hybrid / Steam Dark）。正典：Grok_Expert/index.html の [data-theme="dark"]。 * * theme.json が生成する --wp--preset--color--ngj-* と、ngj.css のローカル変数を上書きする。 * 切替方式（フェーズ1で両対応・確定）： * 1. OS自動切替：prefers-color-scheme: dark（手動でlight指定が無い場合のみ） * 2. 手動トグル： / */ :root[data-theme="dark"] { --wp--preset--color--ngj-bg: #1a1a1a; --wp--preset--color--ngj-surface: #242424; --wp--preset--color--ngj-text: #e8e8e8; --ngj-text-secondary: #a0a0a0; --ngj-glass-bg: rgba(36, 36, 36, 0.88); --ngj-header-glass: rgba(36, 36, 36, 0.85); --ngj-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --ngj-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3); --ngj-hairline: rgba(255, 255, 255, 0.07); } :root[data-theme="dark"] .ngj-chip { background: #333333; color: #c0c0c0; } :root[data-theme="dark"] .ngj-chip:hover { background: #3f3f3f; color: var(--wp--preset--color--ngj-text); } :root[data-theme="dark"] .ngj-chip.is-active { background: var(--wp--preset--color--ngj-accent); color: #ffffff; } :root[data-theme="dark"] .ngj-score { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgb(0 0 0 / 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .wp-block-post-content blockquote { background: rgba(255, 255, 255, 0.04); } /* OS設定がダーク、かつ手動でライト指定されていない場合（同内容） */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wp--preset--color--ngj-bg: #1a1a1a; --wp--preset--color--ngj-surface: #242424; --wp--preset--color--ngj-text: #e8e8e8; --ngj-text-secondary: #a0a0a0; --ngj-glass-bg: rgba(36, 36, 36, 0.88); --ngj-header-glass: rgba(36, 36, 36, 0.85); --ngj-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --ngj-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3); --ngj-hairline: rgba(255, 255, 255, 0.07); } :root:not([data-theme="light"]) .ngj-chip { background: #333333; color: #c0c0c0; } :root:not([data-theme="light"]) .ngj-chip:hover { background: #3f3f3f; color: var(--wp--preset--color--ngj-text); } :root:not([data-theme="light"]) .ngj-chip.is-active { background: var(--wp--preset--color--ngj-accent); color: #ffffff; } :root:not([data-theme="light"]) .ngj-score { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgb(0 0 0 / 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } :root:not([data-theme="light"]) .wp-block-post-content blockquote { background: rgba(255, 255, 255, 0.04); } /* トグルの見た目もダーク状態に（手動属性なしのOSダーク時） */ :root:not([data-theme="light"]) .ngj-mode-toggle { background: #3a3a3a; } :root:not([data-theme="light"]) .ngj-mode-toggle::before { transform: translateX(26px); background: #1a1a1a; } :root:not([data-theme="light"]) .ngj-mode-toggle__sun { opacity: 0; } :root:not([data-theme="light"]) .ngj-mode-toggle__moon { opacity: 1; } }