🌟 toggle theme active with styled-components

Author: LuciLua

package-lock.json

@@ -24,9 +24,11 @@
  "@types/mongodb": "^4.0.7",
  "@types/node": "^18.11.15",
  "@types/react": "^18.0.26",
+ "@types/styled-components": "^5.1.26",
  "axios": "^1.2.1",
  "react-icons": "^4.7.1",
  "sass": "^1.56.2",
+ "styled-components": "^5.3.6",
  "typescript": "^4.9.4"
  }
 }

package.json

@@ -0,0 +1,25 @@
+// icons
+import { BiMoon, BiSun } from "react-icons/bi"
+
+function ToggleTheme({ theme, onClick }) {
+ return (
+ <button
+ onClick={() => onClick()}
+ style={{
+ width: '30px',
+ height: '30px',
+ color: '#000',
+ background: '#fff4',
+ borderRadius: "60%",
+ position: "fixed",
+ zIndex: 100,
+ border: 'none',
+ cursor: "pointer",
+ margin: '9px'
+ }}>
+ {theme == 'dark' ? <BiSun /> : <BiMoon />}
+ </button>
+ )
+}
+
+export default ToggleTheme

src/components/toggleTheme/ToggleTheme.tsx

@@ -1,10 +1,28 @@
 // styles
+import { useEffect, useState } from 'react'
+import ToggleTheme from '../components/toggleTheme/ToggleTheme'
 import '../styles/globals.scss'
+import StyleDark from "../styles/themes/dark"
+import StyleLight from "../styles/themes/light"
 
 function App({ Component, pageProps }) {
+ const [theme, setTheme] = useState('dark')
+
+ function onClickToggle() {
+ if (theme == 'dark') {
+ setTheme('light')
+
+ } else {
+ setTheme('dark')
+ }
+ }
 
  return (
- <Component {...pageProps} />
+ <>
+ {theme == 'dark' ? <StyleLight/> : <StyleDark/>}
+ <ToggleTheme onClick={onClickToggle} theme={theme} />
+ <Component {...pageProps} />
+ </>
  )
 }
 

src/pages/_app.tsx

@@ -4,6 +4,7 @@
  margin: 0;
  padding: 0;
  box-sizing: border-box;
+ transition: 0.1s;
 }
 
 body {
@@ -20,17 +21,15 @@ body {
  overflow-x: hidden;
 
  background-color: var(--primaryColor);
-
 }
 
-
 :root {
  --menuWidth: 50px;
 }
 
-// @import "themes/light.scss";
-@import "themes/dark.scss";
-
 .active {
  color: #ff9f19;
-}
+}
+
+// @import 'themes/dark.scss';
+// @import 'themes/light.scss';

src/styles/globals.scss

@@ -0,0 +1,22 @@
+import { createGlobalStyle } from "styled-components";
+
+export default createGlobalStyle`
+:root{
+ --primaryColor: #ff9f19;
+ --secondaryColor: #1f1f1e;
+
+ --primaryColorPastelDark25opacity: #715e438a;
+
+ --primaryColorPastelDark: #7b6240;
+ --primaryColorPastelLight: #c4a67d;
+
+ --primaryColorPastel: #f8b557;
+
+
+ --primaryColorVivid: #ff9500;
+
+ --labelColor: #8e8e8e;
+ --h1Color: #f3f3f3;
+ --h2Color: #8e8d8d;
+}
+`;

src/styles/themes/dark.tsx

@@ -0,0 +1,21 @@
+import { createGlobalStyle } from "styled-components";
+
+export default createGlobalStyle`
+:root{
+ --primaryColor: #f4a73a;
+ --secondaryColor: #ffffff;
+
+ --primaryColorPastelDark25opacity: #e19c3b8a;
+
+ --primaryColorPastelDark: #877762;
+ --primaryColorPastelLight: #c4a67d;
+
+ --primaryColorPastel: #f8b557;
+
+
+ --primaryColorVivid: #ff9500;
+
+ --labelColor: #8e8e8e;
+ --h1Color: #202020;
+ --h2Color: #555555;
+`;