Skip to content

Commit 2bda501

Browse files
Namanv0509Namanv0509
authored
Merge branch 'master' into internship
2 parents 8198ab9 + 6365678 commit 2bda501

5 files changed

Lines changed: 92 additions & 36 deletions

File tree

‎src/html.js‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import PropTypes from "prop-types";
33

4-
54
export default function HTML(props) {
65
return (
76
<html lang="en" {...props.htmlAttributes}>
@@ -24,20 +23,45 @@ export default function HTML(props) {
2423
{props.headComponents}
2524
</head>
2625
<body {...props.bodyAttributes}>
27-
<script dangerouslySetInnerHTML={{
28-
__html:
29-
`(function() {
30-
try {
31-
var banner = sessionStorage.getItem('banner');
32-
if (banner === null)
33-
document.body.classList.add('banner1');
34-
else
35-
document.body.classList.add('banner' + banner);
36-
} catch (e) {
37-
return;
38-
}
39-
})();`,
40-
}}
26+
{/* Script for theme initialization - needs to run before React renders to prevent flicker */}
27+
<script
28+
dangerouslySetInnerHTML={{
29+
__html: `
30+
(function() {
31+
try {
32+
// Theme initialization
33+
const darkThemeKey = 'theme';
34+
let initialTheme = 'system';
35+
try {
36+
initialTheme = localStorage.getItem(darkThemeKey) || 'system';
37+
} catch (e) {}
38+
39+
// Determine initial dark mode
40+
let isDarkMode = false;
41+
if (initialTheme === 'dark') {
42+
isDarkMode = true;
43+
} else if (initialTheme === 'system') {
44+
isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
45+
}
46+
47+
// Set initial color mode
48+
document.documentElement.style.setProperty(
49+
'--initial-color-mode',
50+
isDarkMode ? 'dark' : 'light'
51+
);
52+
53+
// Banner initialization
54+
var banner = sessionStorage.getItem('banner');
55+
if (banner === null)
56+
document.body.classList.add('banner1');
57+
else
58+
document.body.classList.add('banner' + banner);
59+
} catch (e) {
60+
console.error('Error in theme initialization:', e);
61+
}
62+
})();
63+
`,
64+
}}
4165
/>
4266
{props.preBodyComponents}
4367
<div

‎src/sections/Blog/Blog-single/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,13 @@ const BlogSingle = ({ data }) => {
130130
<div className="post-share-mobile">
131131
<div className="share-icons-container">
132132
<h4>Share Post:</h4>
133-
<TwitterShareButton $url={location.href} title={shareQuote}>
133+
<TwitterShareButton url={location.href} title={shareQuote}>
134134
<AiOutlineTwitter />
135135
</TwitterShareButton>
136-
<FacebookShareButton $url={location.href} quote={shareQuote}>
136+
<FacebookShareButton url={location.href} quote={shareQuote}>
137137
<FaFacebookF />
138138
</FacebookShareButton>
139-
<LinkedinShareButton $url={location.href}>
139+
<LinkedinShareButton url={location.href} title={shareQuote}>
140140
<FaLinkedin />
141141
</LinkedinShareButton>
142142
<CopyToClipboard text={location.href} title="Copy link" onCopy={() => setCopied(true)}>

‎src/sections/Projects/Sistent/components/backdrop/guidance.js‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
44
import { SistentLayout } from "../../sistent-layout";
55
import TabButton from "../../../../../reusecore/Button";
6+
import styled from "styled-components";
7+
8+
const StyledTable = styled.table`
9+
tr {
10+
background-color:${props => props.theme.grey121212ToWhite};
11+
}
12+
`;
613

714
const BackdropGuidance = () => {
815
const location = useLocation();
@@ -89,17 +96,17 @@ const BackdropGuidance = () => {
8996
</a>
9097
<p>Props of the Fade component are also available.</p>
9198

92-
<table>
99+
<StyledTable>
93100
<thead>
94-
<tr style={{ backgroundColor: "#121212" }}>
101+
<tr>
95102
<th>Name</th>
96103
<th>Type</th>
97104
<th>Default</th>
98105
<th>Description</th>
99106
</tr>
100107
</thead>
101108
<tbody>
102-
<tr style={{ backgroundColor: "#121212" }}>
109+
<tr>
103110
<td>
104111
<code>open*</code>
105112
</td>
@@ -111,7 +118,7 @@ const BackdropGuidance = () => {
111118
If <code>true</code>, the component is shown.
112119
</td>
113120
</tr>
114-
<tr style={{ backgroundColor: "#121212" }}>
121+
<tr>
115122
<td>
116123
<code>children</code>
117124
</td>
@@ -121,7 +128,7 @@ const BackdropGuidance = () => {
121128
<td>-</td>
122129
<td>The content of the component.</td>
123130
</tr>
124-
<tr style={{ backgroundColor: "#121212" }}>
131+
<tr>
125132
<td>
126133
<code>classes</code>
127134
</td>
@@ -134,7 +141,7 @@ const BackdropGuidance = () => {
134141
CSS classes API below for more details.
135142
</td>
136143
</tr>
137-
<tr style={{ backgroundColor: "#121212" }}>
144+
<tr>
138145
<td>
139146
<code>component</code>
140147
</td>
@@ -147,7 +154,7 @@ const BackdropGuidance = () => {
147154
an HTML element or a component.
148155
</td>
149156
</tr>
150-
<tr style={{ backgroundColor: "#121212" }}>
157+
<tr>
151158
<td>
152159
<code>components</code>
153160
</td>
@@ -164,7 +171,7 @@ const BackdropGuidance = () => {
164171
deprecated APIs for more details.
165172
</td>
166173
</tr>
167-
<tr style={{ backgroundColor: "#121212" }}>
174+
<tr>
168175
<td>
169176
<code>componentsProps</code>
170177
</td>
@@ -181,7 +188,7 @@ const BackdropGuidance = () => {
181188
prop instead. This prop will be removed in v7.
182189
</td>
183190
</tr>
184-
<tr style={{ backgroundColor: "#121212" }}>
191+
<tr>
185192
<td>
186193
<code>invisible</code>
187194
</td>
@@ -196,7 +203,7 @@ const BackdropGuidance = () => {
196203
popovers or custom selects.
197204
</td>
198205
</tr>
199-
<tr style={{ backgroundColor: "#121212" }}>
206+
<tr>
200207
<td>
201208
<code>slotProps</code>
202209
</td>
@@ -208,7 +215,7 @@ const BackdropGuidance = () => {
208215
</td>
209216
<td>The props used for each slot inside the component.</td>
210217
</tr>
211-
<tr style={{ backgroundColor: "#121212" }}>
218+
<tr>
212219
<td>
213220
<code>slots</code>
214221
</td>
@@ -220,7 +227,7 @@ const BackdropGuidance = () => {
220227
</td>
221228
<td>The components used for each slot inside.</td>
222229
</tr>
223-
<tr style={{ backgroundColor: "#121212" }}>
230+
<tr>
224231
<td>
225232
<code>sx</code>
226233
</td>
@@ -235,7 +242,7 @@ const BackdropGuidance = () => {
235242
details.
236243
</td>
237244
</tr>
238-
<tr style={{ backgroundColor: "#121212" }}>
245+
<tr>
239246
<td>
240247
<code>TransitionComponent</code>
241248
</td>
@@ -250,7 +257,7 @@ const BackdropGuidance = () => {
250257
component requirements.
251258
</td>
252259
</tr>
253-
<tr style={{ backgroundColor: "#121212" }}>
260+
<tr>
254261
<td>
255262
<code>transitionDuration</code>
256263
</td>
@@ -266,7 +273,7 @@ const BackdropGuidance = () => {
266273
</td>
267274
</tr>
268275
</tbody>
269-
</table>
276+
</StyledTable>
270277

271278
<a id="Labeling">
272279
<h2>Labeling</h2>

‎src/theme/app/StyledThemeProvider.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,18 @@ import React, { useContext } from "react";
55
import { ThemeProvider } from "styled-components";
66
import { ThemeManagerContext } from "./ThemeManager";
77

8+
// Safe check for browser environment
9+
const isBrowser = typeof window !== "undefined";
10+
811
export const StyledThemeProvider = (props) => {
912
const { children, darkTheme, lightTheme } = props;
1013
const { isDark, didLoad } = useContext(ThemeManagerContext);
14+
15+
// For SSR, we need to provide a consistent theme initially
16+
// This ensures the server and client render the same thing initially
1117
const currentTheme = isDark ? darkTheme : lightTheme;
1218
const theme = {
13-
...(didLoad ? currentTheme : transformTheme(currentTheme)),
19+
...(didLoad || !isBrowser ? currentTheme : transformTheme(currentTheme)),
1420
};
1521

1622
return (

‎src/theme/app/ThemeManager.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,11 @@ const defaultState = {
2222

2323
export const ThemeManagerContext = createContext(defaultState);
2424

25+
// Safe check for browser environment
26+
const isBrowser = typeof window !== "undefined";
27+
2528
const systemDarkModeSetting = () =>
26-
window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
29+
isBrowser && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
2730
const isDarkModeActive = () => {
2831
// Assume that dark mode is not active if there's no system dark mode setting available
2932
return !!systemDarkModeSetting()?.matches;
@@ -36,15 +39,29 @@ export const ThemeManagerProvider = (props) => {
3639
const [isDark, setIsDark] = useState(false);
3740

3841
useEffect(() => {
42+
if (!isBrowser) return;
43+
3944
const root = window.document.documentElement;
4045
const initialColorValue = root.style.getPropertyValue(
4146
"--initial-color-mode"
4247
);
4348
setIsDark(initialColorValue === ThemeSetting.DARK);
4449
setDidLoad(true);
45-
}, []);
50+
51+
// Add listener for system color scheme changes
52+
const darkModeMediaQuery = systemDarkModeSetting();
53+
if (darkModeMediaQuery && themeSetting === ThemeSetting.SYSTEM) {
54+
const handleChange = (e) => {
55+
setIsDark(e.matches);
56+
};
57+
darkModeMediaQuery.addEventListener("change", handleChange);
58+
return () => darkModeMediaQuery.removeEventListener("change", handleChange);
59+
}
60+
}, [themeSetting]);
4661

4762
const toggleDark = (value) => {
63+
if (!isBrowser) return;
64+
4865
const newIsDark = value ?? !isDark;
4966
const theme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
5067
setIsDark(newIsDark);
@@ -53,6 +70,8 @@ export const ThemeManagerProvider = (props) => {
5370
};
5471

5572
const changeThemeSetting = (setting) => {
73+
if (!isBrowser) return;
74+
5675
switch (setting) {
5776
case ThemeSetting.SYSTEM: {
5877
setIsDark(isDarkModeActive());

0 commit comments

Comments
 (0)