Skip to content

Commit 173aaa8

Browse files
authored
Improve dark mode initialization and modal UI (#32)
Adds a script to layout.tsx to set dark mode before hydration, preventing UI flicker. Refactors DarkModeProvider to initialize theme and dark state after mount. Updates ScriptDetailModal for improved readability, consistent styling, and better handling of script status, install methods, and notes.
1 parent d59fd16 commit 173aaa8

File tree

3 files changed

+437
-204
lines changed

3 files changed

+437
-204
lines changed

src/app/_components/DarkModeProvider.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,25 @@ const DarkModeContext = createContext<DarkModeContextType | undefined>(undefined
1515
export function DarkModeProvider({ children }: { children: React.ReactNode }) {
1616
const [theme, setThemeState] = useState<Theme>('system');
1717
const [isDark, setIsDark] = useState(false);
18+
const [mounted, setMounted] = useState(false);
1819

19-
// Initialize theme from localStorage or default to system
20+
// Initialize theme from localStorage after mount
2021
useEffect(() => {
22+
setMounted(true);
2123
const stored = localStorage.getItem('theme') as Theme;
2224
if (stored && ['light', 'dark', 'system'].includes(stored)) {
2325
setThemeState(stored);
2426
}
27+
28+
// Set initial isDark state based on current DOM state
29+
const currentlyDark = document.documentElement.classList.contains('dark');
30+
setIsDark(currentlyDark);
2531
}, []);
2632

27-
// Update dark mode state and DOM
33+
// Update dark mode state and DOM when theme changes
2834
useEffect(() => {
35+
if (!mounted) return;
36+
2937
const updateDarkMode = () => {
3038
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
3139
const shouldBeDark = theme === 'dark' || (theme === 'system' && systemDark);
@@ -52,7 +60,7 @@ export function DarkModeProvider({ children }: { children: React.ReactNode }) {
5260

5361
mediaQuery.addEventListener('change', handleChange);
5462
return () => mediaQuery.removeEventListener('change', handleChange);
55-
}, [theme]);
63+
}, [theme, mounted]);
5664

5765
const setTheme = (newTheme: Theme) => {
5866
setThemeState(newTheme);

0 commit comments

Comments
 (0)