/** * PivoTime - ダークモード CSS * * [組み込みポイント] * - 既存の 内、メインCSSの後に追加: * * - CSS変数 (--primary 等) を既存テーマで定義している前提 */ /* =========================================================== ライトモード（デフォルト）CSS変数 既存テーマで定義済みなら :root ブロックは省略可 =========================================================== */ :root { --primary: #00C48C; --primary-dark: #00a676; --bg-body: #f5f7fa; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --text-primary: #1a1a2e; --text-secondary:#555555; --text-muted: #999999; --border-color: #e0e0e0; --shadow-color: rgba(0, 0, 0, 0.08); --header-bg: #ffffff; --header-text: #1a1a2e; --sidebar-bg: #f8f9fb; --danger: #e74c3c; --warning: #f39c12; --success: #00C48C; --overlay-bg: rgba(0, 0, 0, 0.4); } /* =========================================================== ダークモード変数 data-theme="dark" が に付与されたとき適用 =========================================================== */ [data-theme="dark"] { --primary: #00e6a0; --primary-dark: #00C48C; --bg-body: #0f0f1a; --bg-surface: #1a1a2e; --bg-card: #22223a; --bg-input: #2a2a44; --text-primary: #e8e8f0; --text-secondary:#b0b0c0; --text-muted: #707088; --border-color: #333355; --shadow-color: rgba(0, 0, 0, 0.3); --header-bg: #16162a; --header-text: #e8e8f0; --sidebar-bg: #121222; --danger: #ff6b6b; --warning: #ffc048; --success: #00e6a0; --overlay-bg: rgba(0, 0, 0, 0.7); } /* =========================================================== OS設定連動（data-theme 未指定 かつ OSがダーク） =========================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #00e6a0; --primary-dark: #00C48C; --bg-body: #0f0f1a; --bg-surface: #1a1a2e; --bg-card: #22223a; --bg-input: #2a2a44; --text-primary: #e8e8f0; --text-secondary:#b0b0c0; --text-muted: #707088; --border-color: #333355; --shadow-color: rgba(0, 0, 0, 0.3); --header-bg: #16162a; --header-text: #e8e8f0; --sidebar-bg: #12122a; --danger: #ff6b6b; --warning: #ffc048; --success: #00e6a0; --overlay-bg: rgba(0, 0, 0, 0.7); } } /* =========================================================== 基本要素のダークモード対応 既存CSSがCSS変数を使っていれば自動適用されるが、 ハードコードされている箇所用に上書き =========================================================== */ [data-theme="dark"] body { background-color: var(--bg-body); color: var(--text-primary); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] table th { background-color: var(--bg-surface); color: var(--text-secondary); } [data-theme="dark"] table td { border-color: var(--border-color); } [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .modal { background-color: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] a { color: var(--primary); } /* =========================================================== ダークモード切替ボタンのスタイル =========================================================== */ #darkmode-toggle { background: none; border: none; cursor: pointer; font-size: 20px; padding: 6px 8px; border-radius: 8px; transition: background-color 0.2s; line-height: 1; color: var(--text-primary); } #darkmode-toggle:hover { background-color: var(--bg-input, rgba(0,0,0,0.06)); } /* =========================================================== シフトD&Dのドロップターゲットハイライト (ダークモード調整) =========================================================== */ [data-theme="dark"] .shift-drop-target { background-color: rgba(0, 228, 160, 0.15) !important; outline: 2px dashed var(--primary); } /* =========================================================== スクロールバー =========================================================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-body); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } /* =========================================================== テーマ切替トランジション =========================================================== */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.15s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }