Add theme button
diff --git a/pages/_app.js b/pages/_app.js
index 48674ca..23c45ff 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,22 +1,46 @@
import '../styles/globals.css';
import NavBar from '../Components/NavBar';
-// import { wrapper } from "../redux/store";
+import { ThemeProvider } from 'theme-ui';
-// function App({ Component, pageProps }) {
-// return (
-// <>
-// <Component {...pageProps} />
-// <NavBar />
-// </>
-// );
-// }
+const theme = {
+ config: {
+ useColorSchemeMediaQuery: true,
+ initialColorModeName: 'light',
+ },
+ colors: {
+ text: '#424242',
+ background: '#ffffff',
+ primary: '#6576CC',
+ cardText: '#ffffff',
+ cardBackground: 'rgba(255, 255, 255, 0.65)',
+ cardBorder: '#C4C4C4',
+ cardFilter: 'rgba(0, 0, 0, 0)',
+ cardOverlay: '#00000080',
+ hint: '#f1f1f1',
-// export default wrapper.withRedux(App);
+ modes: {
+ dark: {
+ text: '#ffffff',
+ background: '#252525',
+ primary: '#6576CC',
+ cardText: '#424242',
+ cardBackground: 'rgba(0, 0, 0, 0.65)',
+ cardBorder: '#424242',
+ cardFilter: 'brightness(0.7)',
+ cardOverlay: '#42424280',
+ hint: '#101010',
+ }
+ }
+ },
+};
+
function App({ Component, pageProps }) {
return <>
- <Component {...pageProps} />
- <NavBar />
+ <ThemeProvider theme={theme}>
+ <Component {...pageProps} />
+ <NavBar />
+ </ThemeProvider>
</>
}