Skip to content

Commit e0b1747

Browse files
kiraumkiraum
authored
Merge pull request #11 from kiraum/kiraum/darkmode
Kiraum/darkmode
2 parents 78fa0fd + 4389894 commit e0b1747

10 files changed

+257
-2
lines changed

‎nestegg/static/css/styles.css

+175
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
body {
33
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
44
background-color: #f5f7fa;
5+
transition: background-color 0.3s ease, color 0.3s ease;
56
}
67

78
.card {
89
border-radius: 0.5rem;
910
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
1011
margin-bottom: 1.5rem;
12+
transition: background-color 0.3s ease, border-color 0.3s ease;
1113
}
1214

1315
.card-header {
@@ -196,3 +198,176 @@ body {
196198
from { opacity: 0; transform: translateY(-10px); }
197199
to { opacity: 1; transform: translateY(0); }
198200
}
201+
202+
/* Dark Mode Styles */
203+
.dark-mode {
204+
color: #e2e8f0;
205+
background-color: #1a202c;
206+
}
207+
208+
.dark-mode .card {
209+
background-color: #2d3748;
210+
border-color: #4a5568;
211+
}
212+
213+
.dark-mode .card-body {
214+
background-color: #2d3748;
215+
color: #e2e8f0;
216+
}
217+
218+
.dark-mode .card-header {
219+
background-color: #4c51bf;
220+
color: white;
221+
}
222+
223+
.dark-mode .text-muted {
224+
color: #a0aec0 !important;
225+
}
226+
227+
/* Fix for hidden values in comparison results */
228+
.dark-mode .result-card .value,
229+
.dark-mode .result-values .value,
230+
.dark-mode .result-highlight,
231+
.dark-mode table td,
232+
.dark-mode p strong,
233+
.dark-mode .result-card strong,
234+
.dark-mode #results-container strong,
235+
.dark-mode #results-container b,
236+
.dark-mode .chart-container,
237+
.dark-mode .numeric-value,
238+
.dark-mode #results-container span:not(.text-muted),
239+
.dark-mode #results-container div.value {
240+
color: #e2e8f0 !important;
241+
}
242+
243+
.dark-mode .result-card .label,
244+
.dark-mode .result-values .label,
245+
.dark-mode #results-container label {
246+
color: #a0aec0 !important;
247+
}
248+
249+
.dark-mode .btn-outline-secondary {
250+
color: #a0aec0;
251+
border-color: #4a5568;
252+
}
253+
254+
.dark-mode .btn-outline-secondary:hover {
255+
background-color: #4a5568;
256+
color: #e2e8f0;
257+
}
258+
259+
.dark-mode .btn-primary {
260+
background-color: #5a67d8;
261+
border-color: #4c51bf;
262+
}
263+
264+
.dark-mode .investment-type-item {
265+
color: #e2e8f0;
266+
}
267+
268+
.dark-mode .investment-type-item:hover {
269+
background-color: #2d3748;
270+
}
271+
272+
.dark-mode .investment-type-item.active {
273+
background-color: #2d3748;
274+
border-left: 4px solid #5a67d8;
275+
}
276+
277+
.dark-mode .selected-investment {
278+
background-color: #2d3748;
279+
border-left: 3px solid #5a67d8 !important;
280+
}
281+
282+
.dark-mode .parameter-section {
283+
background-color: #2d3748;
284+
}
285+
286+
.dark-mode .form-control {
287+
background-color: #4a5568;
288+
border-color: #2d3748;
289+
color: #e2e8f0;
290+
}
291+
292+
.dark-mode .input-group-text {
293+
background-color: #4a5568;
294+
border-color: #2d3748;
295+
color: #e2e8f0;
296+
}
297+
298+
.dark-mode .footer {
299+
background-color: #2d3748 !important;
300+
}
301+
302+
.dark-mode .bg-light {
303+
background-color: #2d3748 !important;
304+
}
305+
306+
.dark-mode .result-card {
307+
background-color: #2d3748;
308+
border-color: #4a5568;
309+
}
310+
311+
.dark-mode .best-option {
312+
background-color: #234e52;
313+
border-left: 4px solid #38a169;
314+
}
315+
316+
.dark-mode .category-title {
317+
color: #a0aec0;
318+
border-bottom: 1px solid #4a5568;
319+
}
320+
321+
.dark-mode .parameters-list li {
322+
border-bottom: 1px solid #4a5568;
323+
}
324+
325+
.dark-mode .rate-info {
326+
color: #7f9cf5 !important;
327+
}
328+
329+
.dark-mode .param-indicator {
330+
color: #a0aec0;
331+
}
332+
333+
.dark-mode table {
334+
color: #e2e8f0;
335+
}
336+
337+
.dark-mode hr {
338+
border-color: #4a5568;
339+
}
340+
341+
/* Dark mode toggle button */
342+
#dark-mode-toggle {
343+
transition: all 0.3s ease;
344+
}
345+
346+
.dark-mode #dark-mode-toggle .bi-moon-fill {
347+
display: none;
348+
}
349+
350+
.dark-mode #dark-mode-toggle .bi-sun-fill {
351+
display: inline-block;
352+
}
353+
354+
.dark-mode #dark-mode-toggle .dark-mode-text {
355+
display: none;
356+
}
357+
358+
.dark-mode #dark-mode-toggle .light-mode-text {
359+
display: inline;
360+
}
361+
362+
#dark-mode-toggle .bi-sun-fill {
363+
display: none;
364+
}
365+
366+
#dark-mode-toggle .light-mode-text {
367+
display: none;
368+
}
369+
370+
/* Make chart legends visible in dark mode */
371+
.dark-mode canvas {
372+
filter: brightness(0.8) contrast(1.2);
373+
}

‎nestegg/static/img/apple-touch-icon.png

3.9 KB
Loading

‎nestegg/static/img/favicon-16x16.png

657 Bytes
Loading

‎nestegg/static/img/favicon-32x32.png

1.28 KB
Loading

‎nestegg/static/img/favicon-96x96.png

3.9 KB
Loading

‎nestegg/static/img/favicon.ico

3.92 KB
Binary file not shown.

‎nestegg/static/js/darkmode.js

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nestegg/static/js/darkmode.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nestegg/static/ts/darkmode.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Dark mode functionality for NestEgg
3+
*/
4+
5+
// Check for saved preference in localStorage
6+
function loadDarkModePreference(): void {
7+
const darkModeEnabled = localStorage.getItem('darkModeEnabled');
8+
if (darkModeEnabled === 'true') {
9+
document.body.classList.add('dark-mode');
10+
}
11+
}
12+
13+
// Toggle dark mode
14+
function toggleDarkMode(): void {
15+
const isDarkMode = document.body.classList.toggle('dark-mode');
16+
localStorage.setItem('darkModeEnabled', isDarkMode.toString());
17+
}
18+
19+
// Initialize dark mode
20+
function initDarkMode(): void {
21+
const darkModeToggle = document.getElementById('dark-mode-toggle');
22+
if (!darkModeToggle) return;
23+
24+
// Load saved preference
25+
loadDarkModePreference();
26+
27+
// Add click event listener
28+
darkModeToggle.addEventListener('click', toggleDarkMode);
29+
}
30+
31+
// Initialize when DOM is loaded
32+
document.addEventListener('DOMContentLoaded', initDarkMode);

‎nestegg/templates/index.html

+20-2
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,35 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>NestEgg - Brazilian Investment Comparison Tool</title>
7+
<!-- Favicons -->
8+
<link rel="icon" href="{{ url_for('static', path='/img/favicon.ico') }}">
9+
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='/img/favicon-16x16.png') }}">
10+
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='/img/favicon-32x32.png') }}">
11+
<link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', path='/img/favicon-96x96.png') }}">
12+
<link rel="apple-touch-icon" href="{{ url_for('static', path='/img/apple-touch-icon.png') }}">
13+
<!-- Styles -->
714
<link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}">
815
<!-- Bootstrap CSS -->
916
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
17+
<!-- Bootstrap Icons -->
18+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
1019
</head>
1120
<body>
1221
<div class="container-fluid">
1322
<header class="py-3 mb-4 border-bottom">
14-
<div class="container d-flex flex-wrap justify-content-center">
23+
<div class="container d-flex flex-wrap justify-content-between align-items-center">
1524
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none">
1625
<span class="fs-4">NestEgg</span>
1726
</a>
18-
<span class="text-muted">Brazilian Investment Comparison Tool</span>
27+
<div class="d-flex align-items-center">
28+
<span class="text-muted me-3">Brazilian Investment Comparison Tool</span>
29+
<button id="dark-mode-toggle" class="btn btn-sm btn-outline-secondary">
30+
<i class="bi bi-moon-fill me-1"></i>
31+
<i class="bi bi-sun-fill me-1"></i>
32+
<span class="dark-mode-text">Dark Mode</span>
33+
<span class="light-mode-text">Light Mode</span>
34+
</button>
35+
</div>
1936
</div>
2037
</header>
2138

@@ -98,5 +115,6 @@
98115
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
99116
<!-- Custom TypeScript -->
100117
<script src="{{ url_for('static', path='/js/app.js') }}" type="module"></script>
118+
<script src="{{ url_for('static', path='/js/darkmode.js') }}"></script>
101119
</body>
102120
</html>

0 commit comments

Comments
 (0)