/* ======================================================================== FUDOSAN DB Dark Theme (W0, 2026-07-07) ======================================================================== 出典: edinet-db static/css/dark-theme.css 冒頭〜約900行 (docs/renewal/03 §1)。Redoc 専用セレクタ (edinetdb L1871-) は持たない (fudosandb は Redoc/openapi.yaml UI を使わない、backlog 扱い)。 `` で有効化。toggle button 本体 & SSR FOUC init script は templates/public_base.html 側 (dark_mode_enabled flag が true の時だけ出力)。CSS 変数は static/css/tokens.css で定義。 Tailwind utility class (bg-white / text-gray-900 等) が templates 全体で 多数使われているため、`html.dark` スコープで一括 override するアプローチ (edinetdb と同一。各ページに dark: variant を書き回らない集約型)。 ブランドは emerald 系 (brand-600 = #059669 = Tailwind emerald-600 と一致) のため、emerald-* utility も brand token へ束ねる。 ======================================================================== */ html.dark { background-color: var(--c-bg); color: var(--c-text); } html.dark body { background-color: var(--c-bg); color: var(--c-text); } /* ── Generic background tokens ── */ html.dark .bg-white { background-color: var(--c-bg-elevated) !important; } html.dark .bg-gray-50 { background-color: var(--c-bg) !important; } html.dark .bg-gray-100 { background-color: var(--c-bg-subtle) !important; } html.dark .bg-gray-200 { background-color: var(--c-bg-elevated) !important; } html.dark .bg-gray-300 { background-color: var(--c-border) !important; } html.dark .hover\:bg-gray-200:hover { background-color: var(--c-bg-elevated) !important; } html.dark .hover\:bg-gray-300:hover { background-color: var(--c-border) !important; } html.dark .bg-slate-50 { background-color: var(--c-bg) !important; } html.dark .bg-slate-100 { background-color: var(--c-bg-subtle) !important; } html.dark .hover\:bg-gray-50:hover { background-color: var(--c-bg-subtle) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--c-border-soft) !important; } /* ── Text tokens ── */ html.dark .text-gray-900, html.dark .text-slate-900, html.dark .text-neutral-900, html.dark .text-zinc-900 { color: var(--c-text) !important; } html.dark .text-gray-800, html.dark .text-slate-800 { color: var(--c-text) !important; } html.dark .text-gray-700, html.dark .text-slate-700 { color: var(--c-text-soft) !important; } html.dark .text-gray-600, html.dark .text-slate-600 { color: var(--c-text-soft) !important; } html.dark .text-gray-500, html.dark .text-slate-500 { color: var(--c-text-muted) !important; } html.dark .text-gray-400, html.dark .text-slate-400 { color: var(--c-text-faint) !important; } /* ── Border tokens ── */ html.dark .border-gray-200, html.dark .border-slate-200 { border-color: var(--c-border) !important; } html.dark .border-gray-100, html.dark .border-slate-100, html.dark .border-b, html.dark .border-t, html.dark .divide-gray-100 > * + * { border-color: var(--c-border-soft) !important; } html.dark .border-gray-300 { border-color: var(--c-border) !important; } /* ── Common composite classes ── */ html.dark .card { background-color: var(--c-bg-elevated) !important; border-color: var(--c-border) !important; color: var(--c-text); } /* ── Links (default blue, unchanged semantic — info/nav links keep blue family) ── */ html.dark a.text-blue-600, html.dark .text-blue-600 { color: #5b8def !important; } html.dark a.text-blue-600:hover, html.dark .hover\:text-blue-700:hover, html.dark .hover\:text-blue-800:hover { color: #7aa3f5 !important; } html.dark .text-blue-800 { color: #7aa3f5 !important; } /* ── Brand (emerald = brand-600 系) — CTA / アクセント全般 ── */ html.dark .bg-emerald-50 { background-color: var(--brand-50) !important; } html.dark .bg-emerald-100 { background-color: var(--brand-100) !important; } html.dark .bg-emerald-500, html.dark .bg-emerald-600 { background-color: var(--brand-600) !important; color: var(--c-bg) !important; } html.dark .hover\:bg-emerald-700:hover { background-color: var(--brand-700) !important; } html.dark .text-emerald-600, html.dark .text-emerald-700 { color: var(--c-link) !important; } html.dark .text-emerald-800 { color: var(--brand-900) !important; } html.dark .border-emerald-200 { border-color: var(--brand-200) !important; } html.dark .border-emerald-500 { border-color: var(--brand-600) !important; } html.dark a:not([class*="bg-"]) { color: var(--c-link); } html.dark a:not([class*="bg-"]):hover { color: var(--c-link-hover); } /* ── Inputs / forms ── */ html.dark input, html.dark select, html.dark textarea { background-color: var(--c-bg-elevated); border-color: var(--c-border); color: var(--c-text); } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--c-text-faint); } /* ── Tables ── */ html.dark table { color: var(--c-text); } html.dark thead { background-color: var(--c-bg-subtle); } html.dark tbody tr:hover { background-color: var(--c-bg-subtle); } /* ── Status badges (semi-transparent variants to harmonize) ── */ html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.12) !important; } html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.12) !important; } html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(91, 141, 239, 0.12) !important; } html.dark .bg-purple-50, html.dark .bg-purple-100, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(167, 139, 250, 0.12) !important; } /* ── Status text (slightly brighter for dark bg) ── */ html.dark .text-green-700, html.dark .text-green-800 { color: #34d399 !important; } html.dark .text-red-700, html.dark .text-red-800 { color: #f87171 !important; } html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-amber-700, html.dark .text-amber-800 { color: #fbbf24 !important; } html.dark .text-purple-700, html.dark .text-indigo-700 { color: #a78bfa !important; } /* ── Buttons (primary brand) ── */ html.dark button.bg-emerald-600, html.dark button.bg-emerald-500 { background-color: var(--brand-600) !important; color: var(--c-bg) !important; } /* ── Code blocks ── */ html.dark code, html.dark pre { background-color: var(--c-bg-subtle); color: var(--c-text-soft); border-color: var(--c-border); } /* ── Chart.js / canvas — CSS variables consumed at runtime by chart-theme.js ── */ html.dark canvas { color-scheme: dark; } /* ── Disable Tailwind shadow-sm/md/lg in dark (subtle borders read better) ── */ html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg { box-shadow: none !important; border: 1px solid var(--c-border); } /* ── Topbar dark toggle button visibility ── */ html.dark #theme-toggle-btn .theme-toggle-icon-moon { display: none; } html:not(.dark) #theme-toggle-btn .theme-toggle-icon-sun { display: none; } html.dark #theme-toggle-btn .theme-toggle-icon-sun { display: inline; } html:not(.dark) #theme-toggle-btn .theme-toggle-icon-moon { display: inline; } /* ── Leaflet map (fudosan 固有、edinetdb に無い分。docs/renewal/03 §6-4) ── タイル自体はライトのまま維持 (ダークタイル/フィルタ反転は不採用)。 地図周辺 UI (ズームコントロール・ポップアップ) のみダーク化する。 */ html.dark .leaflet-control-zoom a { background-color: var(--c-bg-elevated) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; } html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background-color: var(--c-bg-elevated) !important; color: var(--c-text) !important; } html.dark .leaflet-container { background-color: var(--c-bg-subtle); } /* ── nav / footer partials (W0 scaffold) ── */ html.dark .nav-dropdown-menu { background-color: var(--c-bg-elevated) !important; border-color: var(--c-border) !important; }