Skip to content

Commit cf013ff

Browse files
author
Boopathi
committed
feat: enhance dark mode with smooth transitions and prevent flash on refresh
1 parent b5c0def commit cf013ff

File tree

6 files changed

+166
-13
lines changed

6 files changed

+166
-13
lines changed

‎out/404.html‎

Lines changed: 27 additions & 1 deletion
Large diffs are not rendered by default.

‎out/index.html‎

Lines changed: 27 additions & 1 deletion
Large diffs are not rendered by default.

‎out/index.txt‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,38 @@
11
2:"$Sreact.suspense"
2-
3:I[74344,["9990","static/chunks/7c86ec74-4d73abbd112d4fa3.js","8415","static/chunks/8415-3647249926a008b4.js","2984","static/chunks/2984-70037d6bbda7b577.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","7423","static/chunks/7423-481c93bc91f92433.js","3145","static/chunks/3145-96a9e135101030c6.js","8437","static/chunks/8437-9cca2dc77cd479a5.js","8626","static/chunks/8626-bf55349e248e624d.js","4090","static/chunks/4090-71fc7452300bacab.js","7094","static/chunks/7094-fdb52e9197204303.js","1931","static/chunks/app/page-6bd92e9c2f682b0c.js"],"default"]
3-
4:I[11225,["8068","static/chunks/8068-111f0b00c8797a1e.js","8415","static/chunks/8415-3647249926a008b4.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","1915","static/chunks/1915-bfb0f97fd1af2908.js","8003","static/chunks/8003-638df8dcb4557297.js","3185","static/chunks/app/layout-fa5f01628486a6eb.js"],"default"]
4-
5:I[4707,[],""]
5-
6:I[36423,[],""]
6-
7:I[75292,["8415","static/chunks/8415-3647249926a008b4.js","5896","static/chunks/5896-dd3fa908e6e2380d.js","9160","static/chunks/app/not-found-4ad8109c7ea602ca.js"],"default"]
7-
8:I[94886,["8068","static/chunks/8068-111f0b00c8797a1e.js","8415","static/chunks/8415-3647249926a008b4.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","1915","static/chunks/1915-bfb0f97fd1af2908.js","8003","static/chunks/8003-638df8dcb4557297.js","3185","static/chunks/app/layout-fa5f01628486a6eb.js"],"Toaster"]
8-
9:I[88003,["8068","static/chunks/8068-111f0b00c8797a1e.js","8415","static/chunks/8415-3647249926a008b4.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","1915","static/chunks/1915-bfb0f97fd1af2908.js","8003","static/chunks/8003-638df8dcb4557297.js","3185","static/chunks/app/layout-fa5f01628486a6eb.js"],""]
9-
a:T43f,
2+
3:I[74344,["9990","static/chunks/7c86ec74-4d73abbd112d4fa3.js","8415","static/chunks/8415-3647249926a008b4.js","2984","static/chunks/2984-70037d6bbda7b577.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","7423","static/chunks/7423-481c93bc91f92433.js","3145","static/chunks/3145-96a9e135101030c6.js","8437","static/chunks/8437-9cca2dc77cd479a5.js","8626","static/chunks/8626-bf55349e248e624d.js","4090","static/chunks/4090-71fc7452300bacab.js","7094","static/chunks/7094-fdb52e9197204303.js","1931","static/chunks/app/page-31f49b948876a96f.js"],"default"]
3+
5:I[11225,["8068","static/chunks/8068-111f0b00c8797a1e.js","8415","static/chunks/8415-3647249926a008b4.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","1915","static/chunks/1915-bfb0f97fd1af2908.js","8003","static/chunks/8003-638df8dcb4557297.js","3185","static/chunks/app/layout-fa5f01628486a6eb.js"],"default"]
4+
6:I[4707,[],""]
5+
7:I[36423,[],""]
6+
8:I[75292,["8415","static/chunks/8415-3647249926a008b4.js","5896","static/chunks/5896-dd3fa908e6e2380d.js","9160","static/chunks/app/not-found-4ad8109c7ea602ca.js"],"default"]
7+
9:I[94886,["8068","static/chunks/8068-111f0b00c8797a1e.js","8415","static/chunks/8415-3647249926a008b4.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","1915","static/chunks/1915-bfb0f97fd1af2908.js","8003","static/chunks/8003-638df8dcb4557297.js","3185","static/chunks/app/layout-fa5f01628486a6eb.js"],"Toaster"]
8+
a:I[88003,["8068","static/chunks/8068-111f0b00c8797a1e.js","8415","static/chunks/8415-3647249926a008b4.js","5844","static/chunks/5844-2fc73a5e88d29aee.js","1915","static/chunks/1915-bfb0f97fd1af2908.js","8003","static/chunks/8003-638df8dcb4557297.js","3185","static/chunks/app/layout-fa5f01628486a6eb.js"],""]
9+
4:T4da,
10+
(function() {
11+
// Add no-transition class to prevent flash during initial load
12+
document.documentElement.classList.add('no-transition');
13+
14+
try {
15+
var theme = localStorage.getItem('theme');
16+
var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
17+
18+
if (theme === 'dark' || (!theme && systemPrefersDark)) {
19+
document.documentElement.classList.add('dark');
20+
} else {
21+
document.documentElement.classList.remove('dark');
22+
}
23+
} catch (e) {
24+
// Fallback to system preference if localStorage fails
25+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
26+
document.documentElement.classList.add('dark');
27+
}
28+
}
29+
30+
// Remove no-transition class after a short delay to enable smooth transitions
31+
setTimeout(function() {
32+
document.documentElement.classList.remove('no-transition');
33+
}, 100);
34+
})();
35+
b:T43f,
1036
window.$zoho = window.$zoho || {};
1137
window.$zoho.salesiq = window.$zoho.salesiq || {
1238
widgetcode: "siq770fac757336897d739f9273d8f8f7b3aec5f63c512be52582e5f9e3440d863b",
@@ -32,6 +58,6 @@ s.defer = true;
3258
s.src = "https://salesiq.zohopublic.in/widget";
3359
var t = d.getElementsByTagName("script")[0];
3460
t.parentNode.insertBefore(s, t);
35-
0:["lvt0-UZFRIhp_mECE3FyO",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1",["$","$2",null,{"fallback":["$","div",null,{"children":"Loading..."}],"children":["$","$L3",null,{}]}],null],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/332ae23d8ed2001c.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","className":"__variable_19640c __variable_9f6af0","suppressHydrationWarning":true,"children":[["$","head",null,{}],["$","body",null,{"className":"antialiased bg-background font-sans","children":[["$","div",null,{"className":"flex flex-col min-h-screen","children":[["$","div",null,{"className":"hidden dark:block","children":["$","$L4",null,{}]}],["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","$L7",null,{}],"notFoundStyles":[]}]]}],["$","$L8",null,{}],["$","$L9",null,{"id":"zoho-salesiq-script","strategy":"lazyOnload","children":"$a"}],["$","$L9",null,{"src":"https://www.google.com/recaptcha/enterprise.js?render=6LfZ4H8rAAAAAA0NMVH1C-sCiE9-Vz4obaWy9eUI","strategy":"lazyOnload"}]]}]]}]],null],null],["$Lb",null]]]]
36-
b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Hustloop | Connect, Collaborate, Build Stronger Startup & Innovators Meet"}],["$","meta","3",{"name":"description","content":"A prototype startup platform that includes modules such as Blog, Mentors, Incubators, Pricing, and MSMEs."}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"48x48"}],["$","meta","5",{"name":"next-size-adjust"}]]
61+
0:["3x7E6Naumm4Xm9tM5g05x",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1",["$","$2",null,{"fallback":["$","div",null,{"children":"Loading..."}],"children":["$","$L3",null,{}]}],null],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5e93fa8544d81b66.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","className":"__variable_19640c __variable_9f6af0","suppressHydrationWarning":true,"children":[["$","head",null,{"children":["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$4"}}]}],["$","body",null,{"className":"antialiased bg-background font-sans","children":[["$","div",null,{"className":"flex flex-col min-h-screen","children":[["$","div",null,{"className":"hidden dark:block","children":["$","$L5",null,{}]}],["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","$L8",null,{}],"notFoundStyles":[]}]]}],["$","$L9",null,{}],["$","$La",null,{"id":"zoho-salesiq-script","strategy":"lazyOnload","children":"$b"}],["$","$La",null,{"src":"https://www.google.com/recaptcha/enterprise.js?render=6LfZ4H8rAAAAAA0NMVH1C-sCiE9-Vz4obaWy9eUI","strategy":"lazyOnload"}]]}]]}]],null],null],["$Lc",null]]]]
62+
c:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Hustloop | Connect, Collaborate, Build Stronger Startup & Innovators Meet"}],["$","meta","3",{"name":"description","content":"A prototype startup platform that includes modules such as Blog, Mentors, Incubators, Pricing, and MSMEs."}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"48x48"}],["$","meta","5",{"name":"next-size-adjust"}]]
3763
1:null

‎src/app/globals.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,24 @@
6464
}
6565
body {
6666
@apply bg-background text-foreground;
67+
transition: background-color 0.3s ease, color 0.3s ease;
68+
}
69+
70+
/* Smooth transitions for theme switching */
71+
html {
72+
transition: color-scheme 0.3s ease;
73+
}
74+
75+
/* Ensure all elements transition smoothly */
76+
*, *::before, *::after {
77+
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
78+
}
79+
80+
/* Disable transitions during initial load to prevent flash */
81+
html.no-transition *,
82+
html.no-transition *::before,
83+
html.no-transition *::after {
84+
transition: none !important;
6785
}
6886
}
6987

‎src/app/layout.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,39 @@ export default function RootLayout({
3030
}>) {
3131
return (
3232
<html lang="en" className={`${fontSans.variable} ${fontHeadline.variable}`} suppressHydrationWarning>
33-
<head />
33+
<head>
34+
<script
35+
dangerouslySetInnerHTML={{
36+
__html: `
37+
(function() {
38+
// Add no-transition class to prevent flash during initial load
39+
document.documentElement.classList.add('no-transition');
40+
41+
try {
42+
var theme = localStorage.getItem('theme');
43+
var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
44+
45+
if (theme === 'dark' || (!theme && systemPrefersDark)) {
46+
document.documentElement.classList.add('dark');
47+
} else {
48+
document.documentElement.classList.remove('dark');
49+
}
50+
} catch (e) {
51+
// Fallback to system preference if localStorage fails
52+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
53+
document.documentElement.classList.add('dark');
54+
}
55+
}
56+
57+
// Remove no-transition class after a short delay to enable smooth transitions
58+
setTimeout(function() {
59+
document.documentElement.classList.remove('no-transition');
60+
}, 100);
61+
})();
62+
`,
63+
}}
64+
/>
65+
</head>
3466
<body className="antialiased bg-background font-sans">
3567
<div className="flex flex-col min-h-screen">
3668
<div className="hidden dark:block">

‎src/components/views/main-view.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,17 @@ export default function MainView() {
6565
const initialTheme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
6666
setTheme(initialTheme);
6767

68+
// Listen for system theme changes
69+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
70+
const handleSystemThemeChange = (e: MediaQueryListEvent) => {
71+
if (!localStorage.getItem('theme')) {
72+
// Only update if user hasn't manually set a theme
73+
setTheme(e.matches ? 'dark' : 'light');
74+
}
75+
};
76+
77+
mediaQuery.addEventListener('change', handleSystemThemeChange);
78+
6879
// Auth and other state from localStorage
6980
const savedIsLoggedIn = localStorage.getItem('isLoggedIn');
7081
const savedUserRole = localStorage.getItem('userRole') as UserRole | null;
@@ -87,6 +98,9 @@ export default function MainView() {
8798
}
8899
}
89100
setIsLoading(false);
101+
102+
// Cleanup listener
103+
return () => mediaQuery.removeEventListener('change', handleSystemThemeChange);
90104
}, []);
91105

92106
useEffect(() => {
@@ -105,12 +119,23 @@ export default function MainView() {
105119

106120
useEffect(() => {
107121
if (theme) {
122+
// Add transition class for smooth theme switching
123+
document.documentElement.style.transition = 'color-scheme 0.3s ease, background-color 0.3s ease';
124+
108125
if (theme === 'dark') {
109126
document.documentElement.classList.add('dark');
127+
document.documentElement.style.colorScheme = 'dark';
110128
} else {
111129
document.documentElement.classList.remove('dark');
130+
document.documentElement.style.colorScheme = 'light';
112131
}
132+
113133
localStorage.setItem('theme', theme);
134+
135+
// Remove transition after animation completes
136+
setTimeout(() => {
137+
document.documentElement.style.transition = '';
138+
}, 300);
114139
}
115140
}, [theme]);
116141

0 commit comments

Comments
 (0)