Skip to content

Commit c73399f

Browse files
Arun-kushwaha007Arun-kushwaha007
committed
refactor(theme): simplify theme provider and remove inline initialization script
- Remove theme initialization script from layout.tsx - Refactor ThemeProvider to only resolve themes without applying DOM changes - Hardcode dark background and text colors in globals.css - Enhance ThemeToggle with framer-motion animations and resolved theme usage
1 parent 2ed04b9 commit c73399f

4 files changed

Lines changed: 10 additions & 28 deletions

File tree

‎apps/web/app/globals.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
}
1818

1919
body {
20-
background-color: var(--fs-background);
21-
color: var(--fs-text-primary);
20+
background-color: #030303;
21+
color: white;
2222
font-family: var(--fs-font-sans);
2323
@apply transition-colors duration-300;
2424
}

‎apps/web/app/layout.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,6 @@ import { themeStylesheet } from '../src/design/theme';
77
import { Navbar } from '../components/layout/Navbar';
88
import { Footer } from '../components/layout/Footer';
99

10-
const themeInitScript = `
11-
(function() {
12-
try {
13-
var storageKey = 'fs-theme';
14-
var stored = localStorage.getItem(storageKey);
15-
var mode = stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system';
16-
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
17-
var resolved = mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode;
18-
document.documentElement.dataset.theme = resolved;
19-
} catch (_) {}
20-
})();
21-
`;
22-
2310
export const metadata: Metadata = {
2411
title: 'FairShare - Smart Expense Sharing',
2512
description: 'Split group expenses without confusion. FairShare helps friends, roommates, and teams track shared spending and settle up faster.',
@@ -44,7 +31,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
4431
<html lang="en" className={`${manrope.variable} ${spaceGrotesk.variable}`}>
4532
<head>
4633
<style id="fs-theme-vars">{themeStylesheet}</style>
47-
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
4834
</head>
4935
<body className="min-h-screen selection:bg-[var(--fs-primary)] selection:text-white">
5036
<Providers>
@@ -56,4 +42,3 @@ export default function RootLayout({ children }: { children: React.ReactNode })
5642
</html>
5743
);
5844
}
59-

‎apps/web/src/components/theme/ThemeProvider.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,9 @@ function getSystemTheme(): ResolvedTheme {
2020
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
2121
}
2222

23-
function resolveAndApplyTheme(mode: ThemeMode): ResolvedTheme {
24-
const resolved: ResolvedTheme = mode === 'system' ? getSystemTheme() : mode;
25-
if (typeof document !== 'undefined') {
26-
document.documentElement.dataset.theme = resolved;
27-
document.body.dataset.theme = resolved;
28-
}
29-
return resolved;
23+
function resolveTheme(mode: ThemeMode): ResolvedTheme {
24+
if (mode === 'system') return getSystemTheme();
25+
return mode;
3026
}
3127

3228
export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -42,14 +38,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
4238

4339
const stored = readStored();
4440
setModeState(stored);
45-
setResolved(resolveAndApplyTheme(stored));
41+
setResolved(resolveTheme(stored));
4642
}, []);
4743

4844
useEffect(() => {
4945
const media = window.matchMedia('(prefers-color-scheme: dark)');
5046
const handler = () => {
5147
if (mode === 'system') {
52-
setResolved(resolveAndApplyTheme('system'));
48+
setResolved(resolveTheme('system'));
5349
}
5450
};
5551
media.addEventListener('change', handler);
@@ -61,7 +57,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
6157
if (typeof window !== 'undefined') {
6258
localStorage.setItem(STORAGE_KEY, next);
6359
}
64-
setResolved(resolveAndApplyTheme(next));
60+
setResolved(resolveTheme(next));
6561
};
6662

6763
const value = useMemo(() => ({ mode, resolved, setMode }), [mode, resolved]);

‎apps/web/src/components/theme/ThemeToggle.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22

33
import { useThemeMode } from './ThemeProvider';
44
import { Sun, Moon, Laptop } from 'lucide-react';
5+
import { motion, AnimatePresence } from 'framer-motion';
56

67
export function ThemeToggle() {
7-
const { mode, setMode } = useThemeMode();
8+
const { mode, resolved, setMode } = useThemeMode();
89

910
return (
1011
<div className="flex items-center gap-1 rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-1 backdrop-blur-md shadow-sm">

0 commit comments

Comments
 (0)