Skip to content

Commit 6ac61b8

Browse files
fturmelfturmel
committed
fix dark theme FOUC
1 parent 9d6797f commit 6ac61b8

File tree

6 files changed

+106
-164
lines changed

6 files changed

+106
-164
lines changed

‎src/components/Head.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,15 @@ const Head = ({ title, description, image }) => {
9393
content={description ?? defaultDescription}
9494
/>
9595
<meta property="twitter:image" content={`${siteUrl}${metaImage}`} />
96+
97+
{/* Theme toggle bootstrap */}
98+
<script>{`
99+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
100+
document.documentElement.classList.add('dark');
101+
} else {
102+
document.documentElement.classList.remove('dark');
103+
}
104+
`}</script>
96105
</Helmet>
97106
);
98107
};

‎src/components/Layout.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import { Slice } from 'gatsby';
3-
import Theme from './Theme/Theme'; // this is the new Theme component
43

54
import Head from './Head';
65

@@ -15,16 +14,14 @@ import * as css from './Layout.module.css';
1514

1615
const Layout = ({ children, title, description, image }) => {
1716
return (
18-
<Theme>
19-
<div className={css.container}>
20-
<Head title={title} description={description} image={image} />
21-
<div className={css.content}>
22-
<Slice alias="TopBar" />
23-
{children}
24-
<Slice alias="Footer" />
25-
</div>
17+
<div className={css.container}>
18+
<Head title={title} description={description} image={image} />
19+
<div className={css.content}>
20+
<Slice alias="TopBar" />
21+
{children}
22+
<Slice alias="Footer" />
2623
</div>
27-
</Theme>
24+
</div>
2825
);
2926
};
3027

‎src/components/Menu.js

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { useState, useContext } from 'react';
1+
import React, { useState } from 'react';
22
import { Link } from 'gatsby';
33
import cn from 'classnames';
4-
import { ThemeContext } from './Theme/Theme';
54

65
import * as css from './Menu.module.css';
76

@@ -48,9 +47,6 @@ const items = [
4847

4948
const Menu = () => {
5049
const [expanded, setExpanded] = useState(false);
51-
const { toggle, dark } = useContext(ThemeContext);
52-
const ModeIcon = dark ? MdOutlineDarkMode : MdOutlineLightMode;
53-
const modeLabel = dark ? ' Dark Mode' : ' Light Mode';
5450

5551
return (
5652
<nav className={css.root}>
@@ -62,26 +58,34 @@ const Menu = () => {
6258
</button>
6359

6460
<ul className={cn(css.menu, { [css.expanded]: expanded })}>
65-
{/* Added Dark Mode Toggle */}
61+
{/* Theme toggle */}
6662
<li className={css.item}>
67-
<span
68-
role="button" // Role attribute
69-
tabIndex="0" // Make it focusable
70-
onClick={toggle}
71-
onKeyDown={(event) => {
72-
// Keyboard event
73-
if (event.key === 'Enter' || event.key === ' ') {
74-
toggle();
75-
}
76-
}}
77-
className={css.modeToggle}>
78-
<ModeIcon
63+
<button
64+
className={css.lightThemeButton}
65+
title="Switch to dark mode"
66+
onClick={() => {
67+
document.documentElement.classList.add('dark');
68+
localStorage.theme = 'dark';
69+
}}>
70+
<MdOutlineLightMode size={expanded ? 16 : 24} />
71+
{expanded && ' LIGHT MODE'}
72+
</button>
73+
<button
74+
className={css.darkThemeButton}
75+
title="Switch to light mode"
76+
onClick={() => {
77+
document.documentElement.classList.remove('dark');
78+
localStorage.theme = 'light';
79+
}}>
80+
<MdOutlineDarkMode
7981
size={expanded ? 16 : 24}
80-
color={dark ? 'rgba(255, 255, 255, 0.8)' : undefined}
82+
color="rgba(255, 255, 255, 0.8)"
8183
/>
82-
{expanded && modeLabel}
83-
</span>
84+
{expanded && ' DARK MODE'}
85+
</button>
8486
</li>
87+
88+
{/* Nav */}
8589
{items.map((item, i) => (
8690
<li
8791
key={i}

‎src/components/Menu.module.css

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,21 @@
2929
position: relative;
3030

3131
& a,
32-
& span {
32+
& span,
33+
& button {
3334
color: var(--text-color);
3435
border-left: var(--border);
3536
border-bottom: var(--border);
3637
display: block;
3738
text-decoration: none;
3839
padding: 0 var(--box-padding);
3940
line-height: var(--baseline-box);
41+
width: 100%;
42+
}
43+
44+
& button:hover {
45+
background-color: var(--gray-light-hover);
46+
cursor: pointer;
4047
}
4148

4249
& a:hover {
@@ -116,7 +123,8 @@
116123
border-right: var(--border);
117124

118125
& a,
119-
& span {
126+
& span,
127+
& button {
120128
text-align: left;
121129
border-left: var(--border);
122130
}
@@ -161,9 +169,18 @@
161169
}
162170
}
163171

164-
.modeToggle {
165-
display: "flex";
166-
align-items: "center";
167-
gap: 8px;
168-
height: "100%";
172+
.darkThemeButton {
173+
display: none !important;
174+
}
175+
176+
.lightThemeButton {
177+
display: block !important;
178+
}
179+
180+
:global(html.dark) .darkThemeButton {
181+
display: block !important;
182+
}
183+
184+
:global(html.dark) .lightThemeButton {
185+
display: none !important;
169186
}

‎src/components/Theme/Theme.js

Lines changed: 0 additions & 126 deletions
This file was deleted.

‎src/styles/variables.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,14 @@
8686
--spacing-large: 60px;
8787
--spacing-xlarge: 100px;
8888

89+
--text-color: #000000;
90+
--background-color: #ffffff;
91+
--linear-gradient-on-card: linear-gradient(
92+
0deg,
93+
rgba(255, 255, 255, 1) 30%,
94+
rgba(255, 255, 255, 0) 100%
95+
);
96+
8997
--gray-dark: #3c3c3c;
9098
--gray-mid: #666666;
9199
--gray-light: #ededed;
@@ -210,3 +218,36 @@
210218
--timeline-dot: 12px;
211219
}
212220
}
221+
222+
/* Dark theme */
223+
html.dark {
224+
--text-color: #f0f0f0;
225+
--background-color: #1e1d20;
226+
--linear-gradient-on-card: linear-gradient(
227+
0deg,
228+
rgba(0, 0, 0, 0.842) 30%,
229+
rgba(255, 255, 255, 0) 100%
230+
);
231+
232+
--gray-dark: #1f1f1f;
233+
--gray-mid: #b3b3b3;
234+
--gray-light: #2d2d2d;
235+
--gray-light-hover: #404040;
236+
237+
--cyan: #00b2d6;
238+
--cyan-light: #003f4d;
239+
240+
--pink: #e6005c;
241+
--pink-light: #3a0018;
242+
--pink-tint: #2a001a;
243+
244+
--orange: #d97f26;
245+
--orange-light: #3a2410;
246+
247+
--purple: #7c3b82;
248+
--purple-light: #2c0e2f;
249+
250+
--red: #d1414c;
251+
--red-light: #3f1519;
252+
--red-lightest: #1e1d20;
253+
}

0 commit comments

Comments
 (0)