feat: Add react and mobx integration

1 files changed, 26 insertions, 0 deletions

diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..8be4f6a
--- /dev/null
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -0,0 +1,26 @@
+import { observer } from 'mobx-react-lite';
+import {
+  unstable_createMuiStrictModeTheme as createTheme,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+import React from 'react';
+
+import { useStore } from './StoreProvider';
+
+export const ThemeProvider = observer(({ children }: {
+  children: JSX.Element | JSX.Element[],
+}): JSX.Element => {
+  const { shared: { shouldUseDarkColors } } = useStore();
+
+  const theme = createTheme({
+    palette: {
+      mode: shouldUseDarkColors ? 'dark' : 'light',
+    },
+  });
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      {children}
+    </MuiThemeProvider>
+  );
+});