Skip to content

Commit dc31b4c

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Add light/dark theme toggle
Added light-theme.css with light mode CSS variable overrides, theme-toggle.js for persisted theme switching via localStorage, and a toggle button to both index.html and step.html. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 483042f commit dc31b4c

File tree

4 files changed

+97
-0
lines changed

4 files changed

+97
-0
lines changed

‎docs/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
99
<link rel="stylesheet" href="styles.css">
10+
<link rel="stylesheet" href="light-theme.css">
11+
<script src="theme-toggle.js"></script>
1012
</head>
1113
<body>
14+
<div style="position:fixed;top:1rem;right:1rem;z-index:1000;">
15+
<button class="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
16+
</div>
1217
<section class="hero">
1318
<div class="container">
1419
<div class="hero-badge">☕ Java + Spring Boot Modernization</div>

‎docs/light-theme.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
html[data-theme="light"] {
2+
--bg-dark: #f5f5f7;
3+
--bg-card: #ffffff;
4+
--bg-code: #f0f0f5;
5+
--neon-cyan: #0077b6;
6+
--neon-magenta: #c2185b;
7+
--neon-purple: #7b1fa2;
8+
--text-primary: #1a1a2e;
9+
--text-secondary: #555570;
10+
--border-color: #d0d0dd;
11+
--success-green: #2e7d32;
12+
--warning-yellow: #f9a825;
13+
}
14+
15+
html[data-theme="light"] body::before {
16+
background: linear-gradient(90deg, rgba(0,119,182,0.05) 1px, transparent 1px),
17+
linear-gradient(rgba(0,119,182,0.05) 1px, transparent 1px);
18+
}
19+
20+
html[data-theme="light"] .hero::before {
21+
background: radial-gradient(ellipse at 50% 0%, rgba(0,119,182,0.15), transparent 70%);
22+
}
23+
24+
html[data-theme="light"] .header {
25+
background: rgba(245,245,247,0.95);
26+
}
27+
28+
html[data-theme="light"] code,
29+
html[data-theme="light"] pre {
30+
background: var(--bg-code);
31+
color: #1a1a2e;
32+
}
33+
34+
html[data-theme="light"] .btn-secondary {
35+
border-color: var(--border-color);
36+
color: var(--text-primary);
37+
}
38+
39+
html[data-theme="light"] .btn-secondary:hover {
40+
background: rgba(0,119,182,0.1);
41+
border-color: var(--neon-cyan);
42+
}
43+
44+
html[data-theme="light"] .card {
45+
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
46+
}
47+
48+
.theme-toggle {
49+
background: none;
50+
border: 1px solid var(--border-color);
51+
color: var(--text-primary);
52+
cursor: pointer;
53+
padding: 0.4rem 0.8rem;
54+
border-radius: 6px;
55+
font-size: 1rem;
56+
transition: all 0.3s ease;
57+
display: inline-flex;
58+
align-items: center;
59+
gap: 0.4rem;
60+
}
61+
62+
.theme-toggle:hover {
63+
border-color: var(--neon-cyan);
64+
color: var(--neon-cyan);
65+
}

‎docs/step.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,13 @@
116116
.header { padding: 0.5rem 1rem; }
117117
}
118118
</style>
119+
<link rel="stylesheet" href="light-theme.css">
120+
<script src="theme-toggle.js"></script>
119121
</head>
120122
<body>
121123
<header class="header">
122124
<a href="index.html" class="header-brand">☕ App Modernization Workshop</a>
125+
<button class="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
123126
<div class="header-nav">
124127
<button id="prevBtn" onclick="navigateStep(-1)" disabled>← Prev</button>
125128
<button id="nextBtn" onclick="navigateStep(1)">Next →</button>

‎docs/theme-toggle.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(function() {
2+
const saved = localStorage.getItem('theme');
3+
if (saved) {
4+
document.documentElement.setAttribute('data-theme', saved);
5+
}
6+
})();
7+
8+
function toggleTheme() {
9+
const html = document.documentElement;
10+
const current = html.getAttribute('data-theme');
11+
const next = current === 'light' ? 'dark' : 'light';
12+
html.setAttribute('data-theme', next);
13+
localStorage.setItem('theme', next);
14+
updateToggleIcon();
15+
}
16+
17+
function updateToggleIcon() {
18+
const btn = document.querySelector('.theme-toggle');
19+
if (!btn) return;
20+
const isLight = document.documentElement.getAttribute('data-theme') === 'light';
21+
btn.innerHTML = isLight ? '🌙 Dark' : '☀️ Light';
22+
}
23+
24+
document.addEventListener('DOMContentLoaded', updateToggleIcon);

0 commit comments

Comments
 (0)