Skip to content

Commit 545dd74

Browse files
author
Saloni Tarone
committed
Ad Proper Load Switer
Signed-off-by: Saloni Tarone <[email protected]>
1 parent 5176139 commit 545dd74

File tree

2 files changed

+99
-44
lines changed

2 files changed

+99
-44
lines changed

‎src/sections/General/Navigation/utility/ScrollspyMenu.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ import { useInView } from "react-intersection-observer";
1515
import { useStyledDarkMode } from "../../../../theme/app/useStyledDarkMode";
1616

1717
const ScrollspyMenu = ({ menuItems, ...props }) => {
18-
const { blogData,className } = props;
18+
const { blogData, className } = props;
19+
const { isDark } = useStyledDarkMode();
1920

2021
const addAllClasses = className ? [className] : [""];
21-
const [activeState,setActiveState] = useState(null);
22+
const [activeState, setActiveState] = useState(null);
2223

23-
const [isWrapVisible,setIsWrapperVisible] = useState(false);
24+
const [isWrapVisible, setIsWrapperVisible] = useState(false);
2425
const [imageInView, setimageInView] = useState(false);
25-
const { isDark } = useStyledDarkMode();
2626

2727
const handleMouseOver = (index) => {
2828
setActiveState(menuItems[index]);
@@ -45,17 +45,16 @@ const ScrollspyMenu = ({ menuItems, ...props }) => {
4545
const [transitionRef, inView] = useInView({ threshold: 0.7 });
4646

4747
useEffect(() => {
48-
if (inView && !imageInView){
48+
if (inView && !imageInView) {
4949
setimageInView(true);
50-
} else if (imageInView && !inView){
50+
} else if (imageInView && !inView) {
5151
setimageInView(false);
5252
}
53-
},[inView,imageInView]);
53+
}, [inView, imageInView]);
5454

5555
return (
5656
<ul className={addAllClasses.join(" ")} onMouseEnter={wrapDisplay} onMouseLeave={wrapNone}>
5757
{menuItems.map((menu, index) => (
58-
5958
<li
6059
key={index}
6160
className={
@@ -159,7 +158,7 @@ const ScrollspyMenu = ({ menuItems, ...props }) => {
159158
<div className="transition-container" ref={transitionRef}>
160159
<img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
161160
<ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
162-
<IngressGatewayImage alt="IngressGatewayImage" className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"}/>
161+
<IngressGatewayImage alt="IngressGatewayImage" className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"} />
163162
{isDark ? <KubernetesImage className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" /> : <KubernetesImage1 className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" />}
164163
<PodImage className={imageInView ? "pod-transition pod" : "pod"} alt="PodImage" />
165164
<PrometheusImage className={imageInView ? "prometheus-transition prometheus" : "prometheus"} alt="PrometheusImage" />

‎src/theme/app/ThemeManager.js‎

Lines changed: 91 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
//context provider for app to make accessible theme setting, toggle function, etc.
44

5-
import React, { createContext, useState, useEffect } from "react";
5+
import React, { createContext, useState, useEffect, useCallback } from "react";
66

77
export const ThemeSetting = {
88
LIGHT: "light",
@@ -28,10 +28,15 @@ const isBrowser = typeof window !== "undefined";
2828
const systemDarkModeSetting = () =>
2929
isBrowser && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
3030
const isDarkModeActive = () => {
31-
// Assume that dark mode is not active if there's no system dark mode setting available
3231
return !!systemDarkModeSetting()?.matches;
3332
};
3433

34+
const applyThemeToDOM = (theme) => {
35+
if (!isBrowser) return;
36+
const root = window.document.documentElement;
37+
root.style.setProperty("--initial-color-mode", theme);
38+
root.setAttribute("data-theme", theme);
39+
};
3540

3641
export const ThemeManagerProvider = (props) => {
3742
const [themeSetting, setThemeSetting] = useState(ThemeSetting.SYSTEM);
@@ -42,49 +47,100 @@ export const ThemeManagerProvider = (props) => {
4247
if (!isBrowser) return;
4348

4449
const root = window.document.documentElement;
45-
const initialColorValue = root.style.getPropertyValue(
46-
"--initial-color-mode"
47-
);
48-
setIsDark(initialColorValue === ThemeSetting.DARK);
50+
const initialColorValue = root.style.getPropertyValue("--initial-color-mode");
51+
52+
// Get stored theme from localStorage
53+
const storedTheme = localStorage.getItem(DarkThemeKey);
54+
55+
if (storedTheme && storedTheme !== ThemeSetting.SYSTEM) {
56+
const isDarkTheme = storedTheme === ThemeSetting.DARK;
57+
setIsDark(isDarkTheme);
58+
setThemeSetting(storedTheme);
59+
applyThemeToDOM(storedTheme);
60+
} else if (initialColorValue) {
61+
setIsDark(initialColorValue === ThemeSetting.DARK);
62+
setThemeSetting(ThemeSetting.SYSTEM);
63+
} else {
64+
// Fallback to system preference
65+
const systemIsDark = isDarkModeActive();
66+
setIsDark(systemIsDark);
67+
const theme = systemIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
68+
applyThemeToDOM(theme);
69+
}
70+
4971
setDidLoad(true);
72+
}, []);
73+
74+
// Listen to system color scheme changes only when on SYSTEM mode
75+
useEffect(() => {
76+
if (!isBrowser || themeSetting !== ThemeSetting.SYSTEM) return;
5077

51-
// Add listener for system color scheme changes
5278
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-
}
79+
if (!darkModeMediaQuery) return;
80+
81+
const handleChange = (e) => {
82+
setIsDark(e.matches);
83+
applyThemeToDOM(e.matches ? ThemeSetting.DARK : ThemeSetting.LIGHT);
84+
};
85+
86+
darkModeMediaQuery.addEventListener("change", handleChange);
87+
return () => darkModeMediaQuery.removeEventListener("change", handleChange);
6088
}, [themeSetting]);
6189

62-
const toggleDark = (value) => {
90+
const toggleDark = useCallback(() => {
6391
if (!isBrowser) return;
6492

65-
const newIsDark = value ?? !isDark;
66-
const theme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
93+
const newIsDark = !isDark;
94+
const newTheme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
95+
96+
// Update state
6797
setIsDark(newIsDark);
68-
setThemeSetting(theme);
69-
localStorage.setItem(DarkThemeKey, theme);
70-
};
98+
setThemeSetting(newTheme);
99+
100+
// Apply to DOM immediately
101+
applyThemeToDOM(newTheme);
102+
103+
// Persist to localStorage
104+
localStorage.setItem(DarkThemeKey, newTheme);
105+
}, [isDark]);
106+
107+
const changeThemeSetting = useCallback(
108+
(setting) => {
109+
if (!isBrowser) return;
110+
111+
let newIsDark = isDark;
112+
let themeToApply = setting;
113+
114+
switch (setting) {
115+
case ThemeSetting.SYSTEM: {
116+
newIsDark = isDarkModeActive();
117+
themeToApply = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
118+
break;
119+
}
120+
case ThemeSetting.LIGHT:
121+
newIsDark = false;
122+
themeToApply = ThemeSetting.LIGHT;
123+
break;
124+
case ThemeSetting.DARK:
125+
newIsDark = true;
126+
themeToApply = ThemeSetting.DARK;
127+
break;
128+
default:
129+
return;
130+
}
71131

72-
const changeThemeSetting = (setting) => {
73-
if (!isBrowser) return;
132+
// Update state
133+
setIsDark(newIsDark);
134+
setThemeSetting(setting);
74135

75-
switch (setting) {
76-
case ThemeSetting.SYSTEM: {
77-
setIsDark(isDarkModeActive());
78-
break;
79-
}
80-
case ThemeSetting.LIGHT:
81-
case ThemeSetting.DARK:
82-
setIsDark(setting === ThemeSetting.DARK);
83-
break;
84-
}
85-
setThemeSetting(setting);
86-
localStorage.setItem(DarkThemeKey, setting);
87-
};
136+
// Apply to DOM immediately
137+
applyThemeToDOM(themeToApply);
138+
139+
// Persist to localStorage
140+
localStorage.setItem(DarkThemeKey, setting);
141+
},
142+
[isDark]
143+
);
88144

89145
return (
90146
<ThemeManagerContext.Provider

0 commit comments

Comments
 (0)