Skip to content

Commit d20a026

Browse files
LaGodxyLaGodxy
authored
Merge pull request #524 from dreamgene/feature/388-dashboard-dark-mode
Feature: Implement Dark Mode for Dashboard
2 parents 2df1445 + ce98cae commit d20a026

1 file changed

Lines changed: 78 additions & 24 deletions

File tree

‎scripts/coverage-dashboard.sh‎

Lines changed: 78 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -312,36 +312,90 @@ generate_html_dashboard() {
312312
<head>
313313
<meta charset="UTF-8">
314314
<meta name="viewport" content="width=device-width, initial-scale=1.0">
315+
<meta name="color-scheme" content="light dark">
315316
<title>StrellerMinds Test Coverage Dashboard</title>
316317
<style>
318+
:root {
319+
--page-bg: #f5f7fb;
320+
--panel-bg: #ffffff;
321+
--section-bg: #f9fafc;
322+
--text-primary: #273142;
323+
--text-muted: #667085;
324+
--border: #d8dee8;
325+
--table-header-bg: #2563eb;
326+
--table-header-text: #ffffff;
327+
--progress-track: #e7edf5;
328+
--recommendation-bg: #fff7d8;
329+
--recommendation-border: #f5d66b;
330+
--recommendation-heading: #6b4e00;
331+
--shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
332+
color-scheme: light;
333+
}
334+
:root[data-theme="dark"] {
335+
--page-bg: #101820;
336+
--panel-bg: #17212b;
337+
--section-bg: #1d2935;
338+
--text-primary: #edf3f8;
339+
--text-muted: #b8c3cf;
340+
--border: #344454;
341+
--table-header-bg: #3b82f6;
342+
--table-header-text: #ffffff;
343+
--progress-track: #2e3a46;
344+
--recommendation-bg: #322b14;
345+
--recommendation-border: #806b24;
346+
--recommendation-heading: #f7d66a;
347+
--shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
348+
color-scheme: dark;
349+
}
317350
body {
318351
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
319352
margin: 0;
320353
padding: 20px;
321-
background-color: #f5f5f5;
322-
color: #333;
354+
background-color: var(--page-bg);
355+
color: var(--text-primary);
356+
transition: background-color 0.2s ease, color 0.2s ease;
323357
}
324358
.container {
325359
max-width: 1200px;
326360
margin: 0 auto;
327-
background-color: white;
361+
background-color: var(--panel-bg);
328362
padding: 30px;
329363
border-radius: 10px;
330-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
364+
box-shadow: var(--shadow);
365+
}
366+
.toolbar {
367+
display: flex;
368+
justify-content: flex-end;
369+
align-items: center;
370+
gap: 10px;
371+
margin-bottom: 20px;
372+
}
373+
.toolbar label {
374+
color: var(--text-primary);
375+
font-weight: 600;
376+
}
377+
.toolbar select {
378+
min-width: 170px;
379+
padding: 8px 10px;
380+
border: 1px solid var(--border);
381+
border-radius: 6px;
382+
background-color: var(--panel-bg);
383+
color: var(--text-primary);
384+
font: inherit;
331385
}
332386
.header {
333387
text-align: center;
334388
margin-bottom: 40px;
335-
border-bottom: 2px solid #e0e0e0;
389+
border-bottom: 2px solid var(--border);
336390
padding-bottom: 20px;
337391
}
338392
.header h1 {
339-
color: #2c3e50;
393+
color: var(--text-primary);
340394
margin: 0;
341395
font-size: 2.5em;
342396
}
343397
.header p {
344-
color: #7f8c8d;
398+
color: var(--text-muted);
345399
margin: 10px 0 0 0;
346400
font-size: 1.2em;
347401
}
@@ -368,14 +422,14 @@ generate_html_dashboard() {
368422
.section {
369423
margin-bottom: 30px;
370424
padding: 20px;
371-
border: 1px solid #e0e0e0;
425+
border: 1px solid var(--border);
372426
border-radius: 8px;
373-
background-color: #fafafa;
427+
background-color: var(--section-bg);
374428
}
375429
.section h2 {
376-
color: #2c3e50;
430+
color: var(--text-primary);
377431
margin-top: 0;
378-
border-bottom: 1px solid #ddd;
432+
border-bottom: 1px solid var(--border);
379433
padding-bottom: 10px;
380434
}
381435
.coverage-table {
@@ -387,17 +441,17 @@ generate_html_dashboard() {
387441
.coverage-table td {
388442
padding: 12px;
389443
text-align: left;
390-
border-bottom: 1px solid #ddd;
444+
border-bottom: 1px solid var(--border);
391445
}
392446
.coverage-table th {
393-
background-color: #3498db;
394-
color: white;
447+
background-color: var(--table-header-bg);
448+
color: var(--table-header-text);
395449
font-weight: bold;
396450
}
397451
.coverage-bar {
398452
width: 100%;
399453
height: 20px;
400-
background-color: #ecf0f1;
454+
background-color: var(--progress-track);
401455
border-radius: 10px;
402456
overflow: hidden;
403457
}
@@ -418,41 +472,41 @@ generate_html_dashboard() {
418472
margin-top: 15px;
419473
}
420474
.metric-card {
421-
background-color: white;
475+
background-color: var(--panel-bg);
422476
padding: 20px;
423477
border-radius: 8px;
424-
border: 1px solid #ddd;
478+
border: 1px solid var(--border);
425479
text-align: center;
426480
}
427481
.metric-value {
428482
font-size: 2em;
429483
font-weight: bold;
430-
color: #2c3e50;
484+
color: var(--text-primary);
431485
}
432486
.metric-label {
433-
color: #7f8c8d;
487+
color: var(--text-muted);
434488
margin-top: 5px;
435489
}
436490
.recommendations {
437-
background-color: #fff3cd;
438-
border: 1px solid #ffeaa7;
491+
background-color: var(--recommendation-bg);
492+
border: 1px solid var(--recommendation-border);
439493
border-radius: 8px;
440494
padding: 15px;
441495
}
442496
.recommendations h3 {
443-
color: #856404;
497+
color: var(--recommendation-heading);
444498
margin-top: 0;
445499
}
446500
.recommendation-item {
447501
margin: 10px 0;
448502
padding: 10px;
449-
background-color: white;
503+
background-color: var(--panel-bg);
450504
border-radius: 5px;
451505
border-left: 4px solid #f39c12;
452506
}
453507
.last-updated {
454508
text-align: center;
455-
color: #7f8c8d;
509+
color: var(--text-muted);
456510
margin-top: 30px;
457511
font-size: 0.9em;
458512
}

0 commit comments

Comments
 (0)