Add the themeprovider and themecontext.

Author: peeweetje

netflix-create-react-vite-app/src/app/App.tsx

@@ -8,10 +8,22 @@ import { PopularAndTrending } from '../pages/popular-trending/popularAndTrending
 import { Shows } from '../pages/shows/shows';
 
 import { GlobalStyle } from '../styles/global';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { ThemeProvider, useTheme } from '../context/themeContext';
 
 export const App = () => {
   return (
-    <>
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+};
+
+const AppContent = () => {
+  const { theme } = useTheme();
+
+  return (
+    <StyledThemeProvider theme={theme}>
       <GlobalStyle />
       <Routes>
         <Route element={<Homepage />} path='/' />
@@ -22,6 +34,6 @@ export const App = () => {
         <Route element={<MediaDetail type="movie" />} path='/movies/:id' />
         <Route element={<MediaDetail type="tv" />} path='/shows/:id' />
       </Routes>
-    </>
+    </StyledThemeProvider>
   );
 };

netflix-create-react-vite-app/src/context/themeContext.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+import { DefaultTheme } from 'styled-components';
+import { purpleTheme, yellowTheme } from '../styles/themes/themes';
+
+interface ThemeContextType {
+  theme: DefaultTheme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [currentTheme, setCurrentTheme] = useState<DefaultTheme>(purpleTheme);
+
+  const toggleTheme = () => {
+    setCurrentTheme((prevTheme) =>
+      prevTheme === purpleTheme ? yellowTheme : purpleTheme
+    );
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme: currentTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

netflix-create-react-vite-app/src/main.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { ThemeProvider } from 'styled-components';
-import { theme } from './styles/theme';
 import '../i18n';
 import { App } from './app/App';
 import { MyListProvider } from './context/myListContext';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <BrowserRouter>
-        <MyListProvider>
-          <App />
-        </MyListProvider>
-      </BrowserRouter>
-    </ThemeProvider>
+    <BrowserRouter>
+      <MyListProvider>
+        <App />
+      </MyListProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );