rakadu1
/
visualizer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

minor Dark mode improvements here and there.

refactor/sync-centralize
RUSHIL AMBARISH KADU 4 months ago
parent
b982a9179e
commit
ff57a4fa1c
4 changed files with 230 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      steps/User_Manual.html
  2. 139
      steps/code-base-overview.html
  3. 10
      steps/src/keyboard.js
  4. 10
      steps/src/theme.js

81
steps/User_Manual.html
View File

@ -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 */
}
</style>
<script>
tailwind.config = {
darkMode: "class",
};
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Initialize from storage
const savedTheme = localStorage.getItem('color-theme') || 'light';
applyTheme(savedTheme);
// Listen for messages from parent
window.addEventListener('message', (event) => {
if (event.data && event.data.type === 'theme-change') {
applyTheme(event.data.theme);
}
});
</script>
</head>
<body class="antialiased">

139
steps/code-base-overview.html
View File

@ -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; }
</style>
<script>
tailwind.config = {
darkMode: "class",
};
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
const savedTheme = localStorage.getItem('color-theme') || 'light';
applyTheme(savedTheme);
window.addEventListener('message', (event) => {
if (event.data && event.data.type === 'theme-change') {
applyTheme(event.data.theme);
}
});
</script>
</head>
<body class="antialiased pb-20">

10
steps/src/keyboard.js
View File

@ -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;
}

10
steps/src/theme.js
View File

@ -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() {

Write Preview
Loading…
Cancel
Save