fix: toggle update

lib/providers/theme/themeContext.tsx

@@ -1,15 +1,10 @@
-import { createContext } from "react";
+import React from "react";
 
 export type Theme = "dark" | "light";
 
-export type ThemeContextValue = {
-    theme: Theme;
-    toggleTheme: (theme: Theme) => void;
+export const initialThemeState = {
+    theme: "light" as Theme,
+    toggleTheme: (() => null) as () => void,
 };
 
-export const ThemeContext = createContext<ThemeContextValue>({
-    theme: "light",
-    toggleTheme: () => {},
-});
-
-export default ThemeContext;
+export const ThemeContext = React.createContext(initialThemeState);

lib/providers/theme/themeProvider.tsx

@@ -15,8 +15,9 @@ export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
 
     const systemPrefersDark = useMediaQuery("(prefers-color-scheme: dark)");
 
-    const toggleTheme = (updatedTheme: Theme) => {
-        setSelectedTheme(updatedTheme);
+    const toggleTheme = () => {
+        const newTheme = currentTheme === "dark" ? "light" : "dark";
+        setSelectedTheme(newTheme);
     };
 
     useEffect(() => {
@@ -36,7 +37,7 @@ export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
 
     return (
         <ThemeContext.Provider value={{ theme: currentTheme, toggleTheme }}>
-            <div className={`theme--${currentTheme}`}>{children}</div>
+            <section className={`theme--${currentTheme}`}>{children}</section>
         </ThemeContext.Provider>
     );
 };