make the theme loading work somehow

components/Navbar.tsx

@@ -7,7 +7,7 @@ const Navbar = () => {
     <>
       <div className={styles.center}>
         <Title />
-        <ThemeToggle/>
+        <ThemeToggle />
       </div>
     </>
   );

components/toggle/theme.tsx

@@ -12,11 +12,11 @@ function the(t) {
 }
 
 const ThemeToggle = () => {
-    const { resolvedTheme: theme, setTheme } = useTheme();
+    const { resolvedTheme: theme, setTheme: set } = useTheme();
 
     return (
         <>
-            <button data-theme={theme} onClick={() => setTheme(the(theme))} className={styles.button}>
+            <button data-theme={theme} onClick={() => set(the(theme))} className={styles.button}>
                 <Icon icon="asterisk" />
             </button>
         </>

pages/_app.tsx

@@ -4,18 +4,20 @@ import { ThemeProvider } from "next-themes";
 import "../styles/main.sass";
 import LoadingScreen from "components/LoadingScreen";
 
-function MyApp({ Component, pageProps }) {
+function Void({ Component, pageProps }) {
   const [loading, setLoading] = useState(true)
+
   useEffect(() => setLoading(false), [])
 
-  return (
+  if (loading) return <LoadingScreen isLoading={loading} />
 
-    <ThemeProvider>
+  return (
-      <LoadingScreen isLoading={loading} />
+    <ThemeProvider enableSystem enableColorScheme >
+      {/* <LoadingScreen isLoading={loading} /> */}
       <Component {...pageProps} />
     </ThemeProvider>
 
   );
 }
 
-export default MyApp;
+export default Void;