Skip to content

Commit b716274

Browse files
Roméo MaignalRoméo Maignal
Roméo Maignal
authored and
Roméo Maignal
committed
feat(UI/theme): light mode added
1 parent e0ad757 commit b716274

9 files changed

Lines changed: 128 additions & 26 deletions

File tree

‎plots/.DS_Store‎

-6 KB
Binary file not shown.

‎src/App.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.section {
7-
border-top: 1px solid rgba(255, 255, 255, 0.1);
7+
border-top: 1px solid var(--border-sep);
88
min-height: 100vh;
99
display: flex;
1010
align-items: center;
@@ -91,7 +91,7 @@
9191
position: absolute;
9292
top: 12px;
9393
right: 12px;
94-
background: rgba(255, 255, 255, 0.05);
94+
background: var(--surface-hover);
9595
border: 1px solid var(--border);
9696
border-radius: 8px;
9797
padding: 6px;
@@ -103,7 +103,7 @@
103103
}
104104

105105
.fullscreen-btn:hover {
106-
background: rgba(255, 255, 255, 0.1);
106+
background: var(--surface-active);
107107
color: var(--text-h);
108108
}
109109

‎src/components/About.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.about-content {
2-
border-top: 1px solid rgba(255, 255, 255, 0.1);
2+
border-top: 1px solid var(--border-sep);
33
min-height: 100vh;
44
display: flex;
55
align-items: center;

‎src/components/Hero.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
}
6262

6363
.code-string {
64-
color: #a78bfa;
64+
color: var(--code-string);
6565
}
6666

6767
.cursor {

‎src/components/Introduction.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.intro-content {
22

3-
border-top: 1px solid rgba(255, 255, 255, 0.1);
3+
border-top: 1px solid var(--border-sep);
44
min-height: 100vh;
55
display: flex;
66
align-items: center;

‎src/components/Introduction.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Introduction: React.FC = () => {
2020
<h3 className="card-title">Our Approach</h3>
2121
<p>
2222
We provide an interactive platform to assess air travel safety
23-
through various visualizations — routes, airlines, aircraft types,
23+
through various visualizations such as routes, airlines, aircraft types,
2424
and advanced statistical analyses.
2525
</p>
2626
</div>

‎src/components/NavigationBar.css‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@
99
}
1010

1111
.navbar.scrolled {
12-
/* background: rgba(3, 3, 3, 0.60); */ /* The background blur doesn't work when the website is published on github pages. For now this is commented out but once we understand the issue we can uncomment it */
13-
background: rgba(3, 3, 3, 1);
12+
background: var(--nav-bg);
1413
backdrop-filter: blur(16px);
1514
-webkit-backdrop-filter: blur(16px);
1615
/* border-bottom: 1px solid var(--border); */
17-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
16+
border-bottom: 1px solid var(--border-sep);
1817
/* padding: 0.7rem 0; */
1918
}
2019

@@ -65,14 +64,38 @@
6564

6665
.navbar-item:hover {
6766
color: var(--text-h);
68-
background: rgba(255, 255, 255, 0.05);
67+
background: var(--surface-hover);
6968
}
7069

7170
.navbar-item.active {
7271
color: var(--accent);
7372
background: var(--accent-dim);
7473
}
7574

75+
.navbar-right {
76+
display: flex;
77+
align-items: center;
78+
gap: 0.5rem;
79+
}
80+
81+
.theme-toggle {
82+
background: var(--surface-hover);
83+
border: 1px solid var(--border);
84+
border-radius: 8px;
85+
padding: 6px 8px;
86+
cursor: pointer;
87+
display: flex;
88+
align-items: center;
89+
color: var(--text);
90+
transition: all 0.2s ease;
91+
}
92+
93+
.theme-toggle:hover {
94+
background: var(--surface-active);
95+
color: var(--text-h);
96+
border-color: var(--border-hover);
97+
}
98+
7699
.mobile-menu-button {
77100
display: none;
78101
background: transparent;
@@ -104,7 +127,7 @@
104127
left: 0;
105128
right: 0;
106129
bottom: 0;
107-
background: rgba(3, 3, 3, 0.98);
130+
background: var(--nav-mobile-bg);
108131
flex-direction: column;
109132
justify-content: center;
110133
gap: 1rem;

‎src/components/NavigationBar.tsx‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,34 @@ const NavigationBar: React.FC = () => {
1717
const [isMenuOpen, setIsMenuOpen] = useState(false)
1818
const [scrolled, setScrolled] = useState(false)
1919
const [activeSection, setActiveSection] = useState('hero-section')
20+
const [theme, setTheme] = useState<'dark' | 'light'>(() => {
21+
const stored = localStorage.getItem('theme') as 'dark' | 'light' | null
22+
if (stored) return stored
23+
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
24+
})
25+
26+
useEffect(() => {
27+
document.documentElement.setAttribute('data-theme', theme === 'light' ? 'light' : '')
28+
}, [theme])
29+
30+
useEffect(() => {
31+
const mq = window.matchMedia('(prefers-color-scheme: light)')
32+
const handleSystemChange = (e: MediaQueryListEvent) => {
33+
if (!localStorage.getItem('theme')) {
34+
setTheme(e.matches ? 'light' : 'dark')
35+
}
36+
}
37+
mq.addEventListener('change', handleSystemChange)
38+
return () => mq.removeEventListener('change', handleSystemChange)
39+
}, [])
40+
41+
const toggleTheme = () => {
42+
setTheme(prev => {
43+
const next = prev === 'dark' ? 'light' : 'dark'
44+
localStorage.setItem('theme', next)
45+
return next
46+
})
47+
}
2048

2149
useEffect(() => {
2250
const updateNavbarState = () => {
@@ -62,18 +90,6 @@ const NavigationBar: React.FC = () => {
6290
</span>
6391
</a>
6492

65-
<button
66-
type="button"
67-
className="mobile-menu-button"
68-
aria-label="Toggle menu"
69-
aria-expanded={isMenuOpen}
70-
onClick={toggleMenu}
71-
>
72-
<span className="bar"></span>
73-
<span className="bar"></span>
74-
<span className="bar"></span>
75-
</button>
76-
7793
<ul className={`navbar-menu${isMenuOpen ? ' active' : ''}`}>
7894
{navItems.map((item) => (
7995
<li key={item.id}>
@@ -90,6 +106,45 @@ const NavigationBar: React.FC = () => {
90106
</li>
91107
))}
92108
</ul>
109+
110+
<div className="navbar-right">
111+
<button
112+
type="button"
113+
className="theme-toggle"
114+
aria-label="Toggle theme"
115+
onClick={toggleTheme}
116+
>
117+
{theme === 'dark' ? (
118+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
119+
<circle cx="12" cy="12" r="5"/>
120+
<line x1="12" y1="1" x2="12" y2="3"/>
121+
<line x1="12" y1="21" x2="12" y2="23"/>
122+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
123+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
124+
<line x1="1" y1="12" x2="3" y2="12"/>
125+
<line x1="21" y1="12" x2="23" y2="12"/>
126+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
127+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
128+
</svg>
129+
) : (
130+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
131+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
132+
</svg>
133+
)}
134+
</button>
135+
136+
<button
137+
type="button"
138+
className="mobile-menu-button"
139+
aria-label="Toggle menu"
140+
aria-expanded={isMenuOpen}
141+
onClick={toggleMenu}
142+
>
143+
<span className="bar"></span>
144+
<span className="bar"></span>
145+
<span className="bar"></span>
146+
</button>
147+
</div>
93148
</div>
94149
</nav>
95150
);

‎src/index.css‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@
55
--text: #a1a1aa;
66
--text-h: #ffffff;
77
--text-muted: #52525b;
8-
/* --accent: #3cec7c; */
98
--accent: rgb(0, 234, 255);
10-
/* --accent-dim: rgba(60, 236, 124, 0.15); */
119
--accent-dim: rgba(0, 234, 255, 0.15);
1210
--border: rgba(255, 255, 255, 0.08);
1311
--border-hover: rgba(255, 255, 255, 0.15);
12+
--border-sep: rgba(255, 255, 255, 0.1);
13+
--surface-hover: rgba(255, 255, 255, 0.05);
14+
--surface-active: rgba(255, 255, 255, 0.1);
15+
--nav-bg: rgba(3, 3, 3, 1);
16+
--nav-mobile-bg: rgba(3, 3, 3, 0.98);
17+
--code-string: #a78bfa;
1418

1519
--sans: 'Inter', system-ui, -apple-system, sans-serif;
1620
--mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
@@ -25,6 +29,26 @@
2529
-moz-osx-font-smoothing: grayscale;
2630
}
2731

32+
[data-theme="light"] {
33+
--bg: #f5f5f5;
34+
--bg-elevated: #ffffff;
35+
--bg-card: #ececec;
36+
--text: #52525b;
37+
--text-h: #18181b;
38+
--text-muted: #a1a1aa;
39+
--accent: rgb(0, 170, 190);
40+
--accent-dim: rgba(0, 170, 190, 0.12);
41+
--border: rgba(0, 0, 0, 0.08);
42+
--border-hover: rgba(0, 0, 0, 0.18);
43+
--border-sep: rgba(0, 0, 0, 0.1);
44+
--surface-hover: rgba(0, 0, 0, 0.04);
45+
--surface-active: rgba(0, 0, 0, 0.08);
46+
--nav-bg: rgba(245, 245, 245, 1);
47+
--nav-mobile-bg: rgba(245, 245, 245, 0.98);
48+
--code-string: #7c3aed;
49+
color-scheme: light;
50+
}
51+
2852
*,
2953
*::before,
3054
*::after {

0 commit comments

Comments
 (0)