fix!: change default theme to dark mode (#18)

- Change default theme to dark mode. - Update theme.test.tsx to make dark mode the initial state for tests.
cognovi-ai · Nov 1, 2024 · 0798c70 · 0798c70
1 parent 808cb93
commit 0798c70
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx
@@ -11,13 +11,19 @@ interface ThemeContextType {
 
 export const ThemeContext = createContext<ThemeContextType>({
   toggleTheme: () => {},
-  isDarkMode: false,
+  isDarkMode: true,
 });
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
+    if (typeof window !== 'undefined') {
+      const savedTheme = localStorage.getItem('theme');
+      return savedTheme ? savedTheme === 'dark' : true;
+    }
+    return true;
+  });
 
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme');

diff --git a/tests/theme/theme.test.tsx b/tests/theme/theme.test.tsx
@@ -50,9 +50,9 @@ describe('ThemeProvider functionality', () => {
     );
 
   describe('Initial Render', () => {
-    it('renders in light mode by default when no theme is stored', () => {
+    it('renders in dark mode by default when no theme is stored', () => {
       renderWithThemeProvider();
-      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode');
+      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode');
       expect(localStorage.getItem('theme')).toBeNull();
     });
 
@@ -74,27 +74,27 @@ describe('ThemeProvider functionality', () => {
   });
 
   describe('Theme Toggle Functionality', () => {
-    it('toggles from light to dark mode', async () => {
+    it('toggles from dark to light mode', async () => {
       renderWithThemeProvider();
 
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
 
-      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode');
-      expect(localStorage.getItem('theme')).toBe('dark');
+      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode');
+      expect(localStorage.getItem('theme')).toBe('light');
     });
 
-    it('toggles from dark to light mode', async () => {
-      localStorage.setItem('theme', 'dark');
+    it('toggles from light to dark mode', async () => {
+      localStorage.setItem('theme', 'light');
       renderWithThemeProvider();
 
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
 
-      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode');
-      expect(localStorage.getItem('theme')).toBe('light');
+      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode');
+      expect(localStorage.getItem('theme')).toBe('dark');
     });
 
     it('persists theme choice across multiple toggles', async () => {
@@ -103,75 +103,75 @@ describe('ThemeProvider functionality', () => {
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
-      expect(localStorage.getItem('theme')).toBe('dark');
+      expect(localStorage.getItem('theme')).toBe('light');
 
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
-      expect(localStorage.getItem('theme')).toBe('light');
+      expect(localStorage.getItem('theme')).toBe('dark');
     });
   });
 
   describe('Theme Properties', () => {
-    it('applies correct light theme properties', () => {
+    it('applies correct dark theme properties', () => {
       renderWithThemeProvider();
 
       expect(screen.getByTestId('primary-color')).toHaveTextContent(
-        lightTheme.palette.primary.main
+        darkTheme.palette.primary.main
       );
       expect(screen.getByTestId('background-color')).toHaveTextContent(
-        lightTheme.palette.background.default
+        darkTheme.palette.background.default
       );
       expect(screen.getByTestId('text-color')).toHaveTextContent(
-        lightTheme.palette.text.primary
+        darkTheme.palette.text.primary
       );
     });
 
-    it('applies correct dark theme properties', async () => {
+    it('applies correct light theme properties after toggle', async () => {
       renderWithThemeProvider();
 
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
 
       expect(screen.getByTestId('primary-color')).toHaveTextContent(
-        darkTheme.palette.primary.main
+        lightTheme.palette.primary.main
       );
       expect(screen.getByTestId('background-color')).toHaveTextContent(
-        darkTheme.palette.background.default
+        lightTheme.palette.background.default
       );
       expect(screen.getByTestId('text-color')).toHaveTextContent(
-        darkTheme.palette.text.primary
+        lightTheme.palette.text.primary
       );
     });
 
     it('maintains theme properties after multiple toggles', async () => {
       renderWithThemeProvider();
 
       expect(screen.getByTestId('primary-color')).toHaveTextContent(
-        lightTheme.palette.primary.main
+        darkTheme.palette.primary.main
       );
 
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
       expect(screen.getByTestId('primary-color')).toHaveTextContent(
-        darkTheme.palette.primary.main
+        lightTheme.palette.primary.main
       );
 
       await act(async () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
       expect(screen.getByTestId('primary-color')).toHaveTextContent(
-        lightTheme.palette.primary.main
+        darkTheme.palette.primary.main
       );
     });
   });
 
   describe('Theme Context', () => {
     it('provides isDarkMode value through context', () => {
       renderWithThemeProvider();
-      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode');
+      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode');
     });
 
     it('updates context value when theme changes', async () => {
@@ -181,7 +181,7 @@ describe('ThemeProvider functionality', () => {
         fireEvent.click(screen.getByText('Toggle Theme'));
       });
 
-      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode');
+      expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode');
     });
   });
 });