Move theme configuration to ThemeProvider

src/App.tsx

@@ -1,15 +1,15 @@
-import { MantineProvider, Text, Button, Stack } from "@mantine/core";
+import { Text, Button, Stack } from "@mantine/core";
-import { theme } from "./theme";
+import { ThemeProvider } from "./ThemeProvider";
 
 export default function App() {
   return (
-    <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
+    <ThemeProvider>
       <Stack align="center" mt={50}>
         <Text size="xl" weight={500}>
           Welcome to Mantine!
         </Text>
         <Button>Click the button</Button>
       </Stack>
-    </MantineProvider>
+    </ThemeProvider>
   );
 }

src/ThemeProvider.tsx

@@ -0,0 +1,17 @@
+import { MantineProvider, MantineThemeOverride } from "@mantine/core";
+
+export const theme: MantineThemeOverride = {
+  colorScheme: "dark",
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
+      {children}
+    </MantineProvider>
+  );
+}

src/theme.ts

@@ -1,5 +0,0 @@
-import { MantineThemeOverride } from "@mantine/core";
-
-export const theme: MantineThemeOverride = {
-  colorScheme: "dark",
-};