Skip to content

Commit 9ad62cb

Browse files
authored
Refactor StyledThemeProvider with improved comments
Updated comments for clarity and added a fallback for SSR-injected CSS variables during hydration. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
1 parent ed0aa74 commit 9ad62cb

File tree

1 file changed

+4
-3
lines changed

1 file changed

+4
-3
lines changed

src/theme/app/StyledThemeProvider.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export const StyledThemeProvider = (props) => {
1212
const { children, darkTheme, lightTheme } = props;
1313
const { isDark, didLoad } = useContext(ThemeManagerContext);
1414

15-
// For SSR, we need to provide a consistent theme initially
16-
// This ensures the server and client render the same thing initially
1715
const currentTheme = isDark ? darkTheme : lightTheme;
16+
17+
// Fallback to SSR-injected CSS variables during hydration to prevent FOUC.
1818
const theme = {
1919
...(didLoad ? currentTheme : transformTheme(currentTheme)),
2020
};
@@ -26,7 +26,8 @@ export const StyledThemeProvider = (props) => {
2626
);
2727
};
2828

29-
// Maps JS theme object to raw CSS variables (--key) initialized via onRenderBody.const transformTheme = (theme) => {
29+
// Maps JS theme object to raw CSS variables (--key) initialized via onRenderBody.
30+
const transformTheme = (theme) => {
3031
const newTheme = {};
3132
Object.keys(theme).forEach((key) => {
3233
const value = theme[key];

0 commit comments

Comments
 (0)