theme hook and provider

andrewsolonets · Sep 17, 2022 · f9dce7d · f9dce7d
1 parent b92235b
commit f9dce7d
Show file tree

Hide file tree

Showing 35 changed files with 208 additions and 1,269 deletions.
diff --git a/src/App.css b/src/App.css
@@ -16,15 +16,15 @@ a {
 }
 
 body {
-  background-color: var(--background);
+  background-color: ${({ theme }) => theme.bg};
   box-sizing: border-box;
 }
 h1 {
   font-size: 4.4rem;
   font-weight: 500;
   font-style: normal;
   line-height: 5.8rem;
-  color: var(--textBlack);
+  color: ${({ theme }) => theme.textMain};
   margin-bottom: 0.694vw;
 }
 .greetings p {
@@ -50,7 +50,7 @@ h1 {
   font-size: 2rem;
   line-height: 2vw;
   margin-bottom: 2.9rem;
-  color: var(--textBlack);
+  color: ${({ theme }) => theme.textMain};
 }
 
 .parent {
@@ -70,7 +70,7 @@ h1 {
   top: 2vw;
 }
 .logotext path {
-  fill: var(--textBlack);
+  fill: ${({ theme }) => theme.textMain};
 }
 section {
   display: flex;
@@ -94,28 +94,28 @@ section {
 }
 
 .option-button:hover div {
-  border: 4px solid var(--backgroundBlock);
+  border: 4px solid ${({ theme }) => theme.backgroundBlock};
 }
 
 .option-button:active div {
-  border: 4px solid var(--btnColor);
+  border: 4px solid ${({ theme }) => theme.btnColor};
 }
 
 .option-button:hover Button {
-  background: var(--btnColor);
+  background: ${({ theme }) => theme.btnColor};
 }
 .option-button:active Button {
-  color: var(--textWhite);
-  background: var(--main);
+  color: ${({ theme }) => theme.textWhite};
+  background: ${({ theme }) => theme.main};
 }
 
 .option-button.active div {
-  border: 4px solid var(--btnColor);
+  border: 4px solid ${({ theme }) => theme.btnColor};
 }
 
 .option-button.active Button {
-  color: var(--textWhite);
-  background: var(--main);
+  color: ${({ theme }) => theme.textWhite};
+  background: ${({ theme }) => theme.main};
 }
 
 .option-button {
@@ -127,10 +127,10 @@ section {
 }
 
 .options div button {
-  background: var(--backgroundBlock);
+  background: ${({ theme }) => theme.backgroundBlock};
   border-radius: 10px;
   border: 0;
-  color: var(--main);
+  color: ${({ theme }) => theme.main};
   padding: 10px;
 }
 
@@ -200,7 +200,7 @@ section {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--btnColor);
+  background-color: ${({ theme }) => theme.btnColor};
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
@@ -212,17 +212,17 @@ section {
   width: 1.111vw;
   left: 4px;
   bottom: 4px;
-  background-color: var(--main);
+  background-color: ${({ theme }) => theme.main};
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
 input:checked + .slider {
-  background-color: var(--btnColor);
+  background-color: ${({ theme }) => theme.btnColor};
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--btnColor);
+  box-shadow: 0 0 1px ${({ theme }) => theme.btnColor};
 }
 
 input:checked + .slider:before {
@@ -315,7 +315,7 @@ input:checked + .slider:before {
     position: relative;
     left: 0;
     height: auto;
-    background: var(--background);
+    background: ${({ theme }) => theme.bg};
   }
   .switch {
     position: relative;
@@ -333,7 +333,7 @@ input:checked + .slider:before {
     width: 3vw;
     left: 4px;
     bottom: 20%;
-    background-color: var(--main);
+    background-color: ${({ theme }) => theme.main};
     -webkit-transition: 0.4s;
     transition: 0.4s;
   }
@@ -400,7 +400,7 @@ input:checked + .slider:before {
     position: relative;
     left: 0;
     height: auto;
-    background: var(--background);
+    background: ${({ theme }) => theme.bg};
   }
   .switch {
     position: relative;
@@ -419,7 +419,7 @@ input:checked + .slider:before {
     width: 2vw;
     left: 4px;
     bottom: 20%;
-    background-color: var(--main);
+    background-color: ${({ theme }) => theme.main};
     -webkit-transition: 0.4s;
     transition: 0.4s;
   }

diff --git a/src/App.js b/src/App.js
@@ -14,62 +14,17 @@ import {
   TextLogoContainer,
 } from "./App.styles";
 import { MainPageFixed } from "./Components/MainPageFixed/MainPageFixed";
+import { ThemeProvider } from "styled-components";
+import { darkTheme, lightTheme } from "./Components/styles/themes";
+import { useThemeChange } from "./hooks/useThemeChange";
 
 let subId = Math.random().toString(36).substring(7);
 function App() {
-  const [theme, setTheme] = useState("light");
   const [results, setResults] = useState([]);
   const [breed, setBreed] = useState(false);
+  const [theme, themeToggler] = useThemeChange();
 
-  // const defaultDarkTheme =
-  //   window.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false;
-
-  const toggleThemeHandler = () => {
-    console.log("theme");
-    if (theme === "light") {
-      document.documentElement.style.setProperty(
-        "--background",
-        "var(--darkBg)"
-      );
-      document.documentElement.style.setProperty("--textBlack", "var(--white)");
-      document.documentElement.style.setProperty(
-        "--backgroundBlock",
-        "var(--dark)"
-      );
-      document.documentElement.style.setProperty(
-        "--backgroundBlock2",
-        "var(--dark2)"
-      );
-      document.documentElement.style.setProperty(
-        "--btnColor",
-        "var(--btnColorDark)"
-      );
-      setTheme("dark");
-    }
-    if (theme === "dark") {
-      document.documentElement.style.setProperty(
-        "--background",
-        "var(--whiteBg)"
-      );
-      document.documentElement.style.setProperty(
-        "--textBlack",
-        "var(--darkBg)"
-      );
-      document.documentElement.style.setProperty(
-        "--backgroundBlock",
-        "var(--white)"
-      );
-      document.documentElement.style.setProperty(
-        "--backgroundBlock2",
-        "var(--whiteBg)"
-      );
-      document.documentElement.style.setProperty(
-        "--btnColor",
-        "var(--btnColorLight)"
-      );
-      setTheme("light");
-    }
-  };
+  const themeMode = theme === "light" ? lightTheme : darkTheme;
 
   const catHandler = ({ results, breed }) => {
     console.log(results);
@@ -85,29 +40,31 @@ function App() {
 
   return (
     <React.Fragment>
-      <MainContainer>
-        <LogoSwitchContainer>
-          <LogoContainerLink to={"/"}>
-            <Logo1></Logo1>
-            <TextLogoContainer />
-          </LogoContainerLink>
-          <SwitchContainer>
-            <input type="checkbox" onClick={toggleThemeHandler} />
-            <span></span>
-          </SwitchContainer>
-        </LogoSwitchContainer>
-        <FixedMainContainer>
-          <MainPageFixed />
-        </FixedMainContainer>
-        <RoutesContainer
-          subId={subId}
-          catHandler={catHandler}
-          results={results}
-          breed={breed}
-          searchClickHandler={searchClickHandler}
-        />
-      </MainContainer>
-      <GlobalStyles />
+      <ThemeProvider theme={themeMode}>
+        <MainContainer>
+          <LogoSwitchContainer>
+            <LogoContainerLink to={"/"}>
+              <Logo1></Logo1>
+              <TextLogoContainer />
+            </LogoContainerLink>
+            <SwitchContainer>
+              <input type="checkbox" onClick={themeToggler} />
+              <span></span>
+            </SwitchContainer>
+          </LogoSwitchContainer>
+          <FixedMainContainer>
+            <MainPageFixed />
+          </FixedMainContainer>
+          <RoutesContainer
+            subId={subId}
+            catHandler={catHandler}
+            results={results}
+            breed={breed}
+            searchClickHandler={searchClickHandler}
+          />
+        </MainContainer>
+        <GlobalStyles />
+      </ThemeProvider>
     </React.Fragment>
   );
 }

diff --git a/src/App.styles.js b/src/App.styles.js
@@ -59,7 +59,7 @@ export const LogoContainerLink = styled(Link)`
 export const TextLogoContainer = styled(TextLogo)`
   width: 7.5rem;
   path {
-    fill: var(--textBlack);
+    fill: ${({ theme }) => theme.textMain};
   }
 `;
 
@@ -78,15 +78,15 @@ export const SwitchContainer = styled.label`
     opacity: 0;
     width: 4.4rem;
     &:checked ~ span {
-      background-color: var(--btnColor);
+      background-color: ${({ theme }) => theme.btnColor};
     }
     &:checked ~ span:before {
       -webkit-transform: translateX(2rem);
       -ms-transform: translateX(2rem);
       transform: translateX(2rem);
     }
     &:focus ~ span {
-      box-shadow: 0 0 1px var(--btnColor);
+      box-shadow: 0 0 1px ${({ theme }) => theme.btnColor};
     }
   }
   span {
@@ -97,7 +97,7 @@ export const SwitchContainer = styled.label`
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--btnColor);
+    background-color: ${({ theme }) => theme.btnColor};
     -webkit-transition: 0.4s;
     transition: 0.4s;
     &:before {
@@ -107,7 +107,7 @@ export const SwitchContainer = styled.label`
       width: 1.6rem;
       left: 0.4rem;
       bottom: 0.4rem;
-      background-color: var(--main);
+      background-color: ${({ theme }) => theme.main};
       -webkit-transition: 0.4s;
       transition: 0.4s;
       border-radius: 50%;