Skip to content

Fix: Persist theme selection using localStorage #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 1 commit into from
Aug 1, 2025
Merged

Fix: Persist theme selection using localStorage #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/context/ThemeContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,19 @@ interface ThemeContextType {
export const ThemeContext = createContext<ThemeContextType | null>(null);

const ThemeWrapper = ({ children }: { children: ReactNode }) => {
const [mode, setMode] = useState<'light' | 'dark'>('light');
const [mode, setMode] = useState<'light' | 'dark'>(() => {
const savedMode = localStorage.getItem('theme');
return savedMode === 'dark' ? 'dark' : 'light';
});
Comment on lines +13 to +16
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for localStorage access.

The lazy initializer correctly reads from localStorage and defaults appropriately, but it lacks error handling for cases where localStorage might not be available (e.g., SSR, private browsing, or storage quota exceeded).

  const [mode, setMode] = useState<'light' | 'dark'>(() => {
-  const savedMode = localStorage.getItem('theme');
-  return savedMode === 'dark' ? 'dark' : 'light';
+    try {
+      const savedMode = localStorage.getItem('theme');
+      return savedMode === 'dark' ? 'dark' : 'light';
+    } catch (error) {
+      return 'light';
+    }
  });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const [mode, setMode] = useState<'light' | 'dark'>(() => {
const savedMode = localStorage.getItem('theme');
return savedMode === 'dark' ? 'dark' : 'light';
});
const [mode, setMode] = useState<'light' | 'dark'>(() => {
try {
const savedMode = localStorage.getItem('theme');
return savedMode === 'dark' ? 'dark' : 'light';
} catch (error) {
return 'light';
}
});
🤖 Prompt for AI Agents 
In src/context/ThemeContext.tsx around lines 13 to 16, the useState lazy
initializer accesses localStorage without error handling, which can cause issues
in environments where localStorage is unavailable or restricted. Wrap the
localStorage.getItem call in a try-catch block to safely handle any errors and
default to 'light' mode if an error occurs, ensuring the app does not crash in
such scenarios.



useEffect(() => {
if (mode === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', mode);
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for localStorage persistence.

The localStorage persistence works correctly but lacks error handling. If localStorage is unavailable or full, it could throw an exception and potentially break the theme functionality.

  useEffect(() => {
    if (mode === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
-    localStorage.setItem('theme', mode);
+    try {
+      localStorage.setItem('theme', mode);
+    } catch (error) {
+      console.warn('Failed to save theme preference:', error);
+    }
  }, [mode]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
localStorage.setItem('theme', mode);
useEffect(() => {
if (mode === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
try {
localStorage.setItem('theme', mode);
} catch (error) {
console.warn('Failed to save theme preference:', error);
}
}, [mode]);
🤖 Prompt for AI Agents 
In src/context/ThemeContext.tsx at line 25, the call to
localStorage.setItem('theme', mode) lacks error handling. Wrap this call in a
try-catch block to catch any exceptions thrown if localStorage is unavailable or
full, and handle the error gracefully, such as by logging it or silently failing
without breaking the theme functionality.

}, [mode]);

const toggleTheme = () => {
Expand Down