From ff57a4fa1cffc17466d76f8c57d4be0e434351e4 Mon Sep 17 00:00:00 2001 From: rakadu1 Date: Thu, 29 Jan 2026 11:38:04 +0530 Subject: [PATCH] minor Dark mode improvements here and there. --- steps/User_Manual.html | 81 ++++++++++++++++++++ steps/code-base-overview.html | 139 +++++++++++++++++++++++++++++++--- steps/src/keyboard.js | 10 ++- steps/src/theme.js | 10 +++ 4 files changed, 230 insertions(+), 10 deletions(-) diff --git a/steps/User_Manual.html b/steps/User_Manual.html index 9d71e9a..b846e28 100644 --- a/steps/User_Manual.html +++ b/steps/User_Manual.html @@ -308,7 +308,88 @@ line-height: 1.15; line-height: 1.3; } + + /* --- Dark Mode Overrides --- */ + .dark body { + background-color: #0f172a; /* slate-900 */ + color: #cbd5e1; /* slate-300 */ + } + .dark h1, .dark h2, .dark h3 { + color: #f1f5f9; /* slate-100 */ + } + .dark .feature-card, + .dark .flow-step, + .dark .annotation, + .dark .bg-white { + background-color: #1e293b; /* slate-800 */ + border-color: #475569; /* slate-600 */ + color: #e2e8f0; + } + .dark .feature-card p, + .dark .flow-step p, + .dark .text-slate-600 { + color: #cbd5e1; /* slate-300 */ + } + .dark .text-slate-500 { + color: #94a3b8; /* slate-400 */ + } + .dark .border-slate-200 { + border-color: #334155; /* slate-700 */ + } + .dark .section-icon { + background-color: #0f172a; /* slate-900 */ + } + .dark .wireframe-box { + background-color: #0f172a; /* slate-900 */ + border-color: #475569; /* slate-600 */ + color: #f1f5f9; /* slate-100 (Changed from slate-400 for high contrast) */ + } + .dark .annotation strong { + color: #f8fafc; /* slate-50 */ + } + .dark .annotation p { + color: #cbd5e1; /* slate-300 */ + } + .dark code { + background-color: #334155 !important; + color: #e2e8f0 !important; + } + .dark kbd { + background-color: #334155; + border-color: #475569; + color: #e2e8f0; + } + .dark .file-tree li { + color: #cbd5e1; + } + .dark .flow-arrow { + color: #38bdf8; /* sky-400 */ + } + diff --git a/steps/code-base-overview.html b/steps/code-base-overview.html index 1bed23c..b3e2b80 100644 --- a/steps/code-base-overview.html +++ b/steps/code-base-overview.html @@ -214,6 +214,15 @@ border-radius: 0.75rem; } + /* Hide the header text when shrunk to make it cleaner? Optional. */ + #visual-nav-wrapper.shrunk h2 { + opacity: 0; transition: opacity 0.2s; + } + + #visual-nav-wrapper.shrunk:hover h2 { + opacity: 1; + } + /* The Minimized (Corner) State */ #visual-nav-wrapper.shrunk { @@ -263,15 +272,6 @@ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } - /* Hide the header text when shrunk to make it cleaner? Optional. */ - #visual-nav-wrapper.shrunk h2 { - /* opacity: 0; transition: opacity 0.2s; */ - } - - #visual-nav-wrapper.shrunk:hover h2 { - /* opacity: 1; */ - } - /* The scaling container for the actual grid content */ #visual-nav-content { transition: transform 0.3s ease; @@ -557,7 +557,128 @@ opacity: 1; bottom: -24px; } + + /* --- Dark Mode Overrides --- */ + .dark body { + background-color: #0f172a; /* slate-900 */ + color: #cbd5e1; /* slate-300 */ + } + .dark header { + background-color: rgba(15, 23, 42, 0.9); /* slate-900/90 */ + border-bottom-color: #334155; /* slate-700 */ + } + .dark h1, .dark h2, .dark h3 { + color: #f1f5f9; /* slate-100 */ + } + .dark .file-card { + background-color: #1e293b; /* slate-800 */ + border-color: #475569; /* slate-600 */ + } + .dark .file-card:hover { + border-color: #94a3b8; /* slate-400 */ + } + .dark .file-card::after { + background-color: #334155; /* slate-700 */ + color: #e2e8f0; + } + .dark .file-desc { + color: #94a3b8; /* slate-400 */ + } + .dark .file-link { + color: #64748b; /* slate-500 */ + border-top-color: #334155; /* slate-700 */ + } + .dark .nav-link:hover { + background-color: #1e293b; /* slate-800 */ + } + + .dark .wireframe-box { + background-color: #1e293b; /* slate-800 */ + border-color: #475569; /* slate-600 */ + color: #94a3b8; /* slate-400 */ + } + .dark .wireframe-box:hover { + background-color: #334155; + } + + /* Color-coded elements overrides */ + .dark .bg-purple-50 { background-color: rgba(88, 28, 135, 0.2); } + .dark .bg-purple-100 { background-color: rgba(107, 33, 168, 0.4); } + .dark .text-purple-700 { color: #d8b4fe; } + .dark .text-purple-900 { color: #e9d5ff; } + .dark .border-purple-200 { border-color: #581c87; } + + .dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.2); } + .dark .bg-blue-100 { background-color: rgba(30, 64, 175, 0.4); } + .dark .text-blue-700 { color: #93c5fd; } + .dark .text-blue-900 { color: #bfdbfe; } + .dark .border-blue-200 { border-color: #1e3a8a; } + + .dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.2); } + .dark .bg-red-100 { background-color: rgba(153, 27, 27, 0.4); } + .dark .text-red-700 { color: #fca5a5; } + .dark .text-red-900 { color: #fecaca; } + .dark .border-red-200 { border-color: #7f1d1d; } + + .dark .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.2); } + .dark .bg-emerald-100 { background-color: rgba(6, 95, 70, 0.4); } + .dark .text-emerald-700 { color: #6ee7b7; } + .dark .text-emerald-800 { color: #6ee7b7; } + .dark .text-emerald-900 { color: #a7f3d0; } + .dark .border-emerald-200 { border-color: #064e3b; } + + .dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.2); } + .dark .bg-amber-100 { background-color: rgba(146, 64, 14, 0.4); } + .dark .text-amber-700 { color: #fcd34d; } + .dark .text-amber-900 { color: #fde68a; } + .dark .border-amber-200 { border-color: #78350f; } + + .dark #visual-nav-wrapper { + background: rgba(15, 23, 42, 0.95); + border-bottom-color: #334155; + } + .dark .core-wrapper { + background-color: rgba(88, 28, 135, 0.1); + border-color: #6b21a8; + } + .dark .database-unit { + background: linear-gradient(90deg, #1e3a8a 0%, #172554 50%, #1e3a8a 100%); + border-color: #1d4ed8; + } + .dark .database-unit::before { + background: #172554; + border-color: #1d4ed8; + } + .dark #file-structure-panel .bg-white { + background-color: #1e293b; + border-color: #475569; + } + .dark .file-tree .file { color: #94a3b8; } + .dark .file-tree .folder { color: #e2e8f0; } + + diff --git a/steps/src/keyboard.js b/steps/src/keyboard.js index b31fcac..cefee20 100644 --- a/steps/src/keyboard.js +++ b/steps/src/keyboard.js @@ -58,7 +58,15 @@ function handleKeyDown(event) { "c", ]; - if (!appState.vizData || !recognizedKeys.includes(key)) { + // Keys that function globally, even without loaded data + const globalKeys = ["q", "m"]; + + if (!recognizedKeys.includes(key)) { + return; + } + + // If no data is loaded, block keys unless they are global (like theme or menu) + if (!appState.vizData && !globalKeys.includes(key)) { return; } diff --git a/steps/src/theme.js b/steps/src/theme.js index ea193e2..e147fab 100644 --- a/steps/src/theme.js +++ b/steps/src/theme.js @@ -34,6 +34,16 @@ function setTheme(theme) { appState.speedGraphInstance.redraw(); } } + + // Notify Iframes about theme change + const manualIframe = document.getElementById('user-manual-iframe'); + if (manualIframe && manualIframe.contentWindow) { + manualIframe.contentWindow.postMessage({ type: 'theme-change', theme: theme }, '*'); + } + const codebaseIframe = document.getElementById('codebase-iframe'); + if (codebaseIframe && codebaseIframe.contentWindow) { + codebaseIframe.contentWindow.postMessage({ type: 'theme-change', theme: theme }, '*'); + } } export function initializeTheme() {