Add theme button
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 2444795..38c1275 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import Styles from '../styles/navbar.module.css';
import Cookies from 'js-cookie';
+import ThemeChangeButton from './ThemeChangeButton';
// import { setInfo } from "../redux/actions/main"
// import { connect } from "react-redux";
// import { makeStore } from "../redux/store";
@@ -57,20 +58,6 @@
}));
}
- updateCookie(that) {
- // return () => {
- // if (that.props.theme == "light") {
- // that.props.setInfo('dark')
- // } else {
- // that.props.setInfo('light')
- // }
- // this.setState({
- // cookie: that.props.theme
- // })
- // // store.dispatch();
- // }
- }
-
render() {
return (
<>
@@ -85,11 +72,7 @@
{/* <a href="https://clcks.dev"><img className={Styles.icon} src="/Icons/CL.svg"/></a> */}
</div>
<div className={Styles.group}>
- <a onClick={this.updateCookie(this)}><img
- alt="Theme"
- className={Styles.icon}
- src={"/light.svg"}
- /></a>
+ <ThemeChangeButton/>
</div>
</div>
</>
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
new file mode 100644
index 0000000..50f1cc2
--- /dev/null
+++ b/Components/ThemeChangeButton.js
@@ -0,0 +1,22 @@
+/** @jsxImportSource theme-ui */
+import { useColorMode } from 'theme-ui';
+import Styles from '../styles/navbar.module.css'
+
+const ThemeChangeButton = () => {
+ const [colorMode, setColorMode] = useColorMode()
+ return (
+ <header>
+ <a onClick={(e) => {
+ e.preventDefault();
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
+ }}>
+ <img
+ alt="Theme"
+ className={Styles.icon}
+ src={`/${colorMode}.svg`}
+ /></a>
+ </header>
+ )
+}
+
+export default ThemeChangeButton;
\ No newline at end of file
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>
</>
}