✏️ Theming

Theming

README.md

@@ -9,3 +9,5 @@
 4. [Pseudo Classes](https://github.com/SaishJ/React-Styled-Components/commit/a7d2d4c83ccb1b9a8989666e90ed46d65eaeba82)
 
 5. [Pass Props and Adding Attributes](https://github.com/SaishJ/React-Styled-Components/commit/8f539b92b7f699a2b25d967373270eae1da6e7ea)
+
+6. [Animations](https://github.com/SaishJ/React-Styled-Components/commit/c8331ef90df567127673490e00ffd3c48858667a)

src/App.js

@@ -1,7 +1,12 @@
 import "./App.css";
 import logo from "./logo.svg";
 // import styled from "styled-components";
-import StyledButton, { FancyButton, SubmitButton } from "./components/Button";
+import { ThemeProvider } from "styled-components";
+import StyledButton, {
+  FancyButton,
+  SubmitButton,
+  DarkButton,
+} from "./components/Button";
 import { AnimatedLogo } from "./components/Button.styles";
 
 // const StyledButton = styled.button`
@@ -18,28 +23,45 @@ import { AnimatedLogo } from "./components/Button.styles";
 // `;
 // Also make seprate button styled component
 
+const theme = {
+  dark: {
+    primary: "#000",
+    text: "#fff",
+  },
+  light: {
+    primary: "#fff",
+    text: "#000",
+  },
+};
+
 function App() {
   return (
-    <div className="App">
-      <AnimatedLogo src={logo} />
-      <div>
-        <br />
-      </div>
-      <StyledButton type="submit">Styled Button</StyledButton>
-      <div>
-        <br />
-      </div>
-      <StyledButton variant="outline">Styled Button</StyledButton>
-      <div>
-        <br />
-      </div>
-      <FancyButton as="a">Fancy Button</FancyButton>
-      {/* as - is a polymorphic prop => pass anchor tag */}
-      <div>
-        <br />
+    <ThemeProvider theme={theme}>
+      <div className="App">
+        <AnimatedLogo src={logo} />
+        <div>
+          <br />
+        </div>
+        <StyledButton type="submit">Styled Button</StyledButton>
+        <div>
+          <br />
+        </div>
+        <StyledButton variant="outline">Styled Button</StyledButton>
+        <div>
+          <br />
+        </div>
+        <FancyButton as="a">Fancy Button</FancyButton>
+        {/* as - is a polymorphic prop => pass anchor tag */}
+        <div>
+          <br />
+        </div>
+        <SubmitButton>Submit Button</SubmitButton>
+        <div>
+          <br />
+        </div>
+        <DarkButton>Dark Button</DarkButton>
       </div>
-      <SubmitButton>Submit Button</SubmitButton>
-    </div>
+    </ThemeProvider>
   );
 }
 

src/components/Button.js

@@ -1,4 +1,9 @@
-import { StyledButton, FancyButton, SubmitButton } from "./Button.styles";
+import {
+  StyledButton,
+  FancyButton,
+  SubmitButton,
+  DarkButton,
+} from "./Button.styles";
 
 export default StyledButton;
-export { FancyButton, SubmitButton };
+export { FancyButton, SubmitButton, DarkButton };

src/components/Button.styles.js

@@ -51,3 +51,9 @@ export const AnimatedLogo = styled.img`
   pointer-events: none;
   animation: ${rotate} infinite 20s linear;
 `;
+
+export const DarkButton = styled(StyledButton)`
+  border: 2px solid ${(props) => props.theme.dark.primary};
+  background-color: ${(props) => props.theme.dark.primary};
+  color: ${(props) => props.theme.dark.text};
+`;