Mr.Pratik Vermun

dark-mode/README.md

@@ -1,15 +1,17 @@
 # Dark Mode Pairing/Small Coding Challenge 🌙
 
-### Difficulty: Medium 
+### Difficulty: Medium
 
 # Requirements
-- Add dark-mode switching functionality to the *existing* dark-mode button
-  - Utilise the *existing* dark-mode scss file by adding a `dark-mode` class to the root `html` element
+
+- Add dark-mode switching functionality to the _existing_ dark-mode button
+  - Utilise the _existing_ dark-mode scss file by adding a `dark-mode` class to the root `html` element
 - When in Dark mode:
   - The button icon should be `faSun`
   - The button icon colour should be `(#FFA500)`. You can use the `color` prop on the `Icon` component.
 
 # Think about
+
 - How we would use Dark mode on other potential routes/components in a bigger application. Would your solution work for this?
 - How we can apply a class to the `html` DOM element
 

dark-mode/src/contexts/ModeContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ModeContext = createContext();

dark-mode/src/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import AppContainer from './common/containers/App';
-import './styles/_main.scss';
-import Routes from './routes';
+import React from "react";
+import ReactDOM from "react-dom";
+import AppContainer from "./common/containers/App";
+import "./styles/_main.scss";
+import Routes from "./routes";
 
 ReactDOM.render(
   <AppContainer>
     <Routes />
   </AppContainer>,
-  document.getElementById('root')
+  document.getElementById("root")
 );

dark-mode/src/routes/App/components/App.js

@@ -1,9 +1,11 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMoon } from '@fortawesome/free-solid-svg-icons';
-import '../styles/_app.scss';
-
+import React, { useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import "../styles/_app.scss";
+import { ModeContext } from "../../../contexts/ModeContext";
 function App() {
+  const [darkMode, setDarkMode] = useContext(ModeContext);
+
   return (
     <div className="app">
       <div className="level">
@@ -12,18 +14,38 @@ function App() {
         </div>
 
         {/* --The button that should toggle dark mode-- */}
-        <button className="app__dark-mode-btn icon level-right">
-          <FontAwesomeIcon icon={faMoon} />
+        <button
+          onClick={() => {
+            setDarkMode(!darkMode);
+          }}
+          className="app__dark-mode-btn icon level-right"
+        >
+          <FontAwesomeIcon
+            color={darkMode ? "#FFA500" : "#000000"}
+            icon={darkMode ? faSun : faMoon}
+          />
         </button>
-
       </div>
 
       <div className="columns">
         <div className="column">
-          <p>Lollipop powder powder. Cotton candy caramels chupa chups halvah muffin caramels apple pie topping cake. Topping chocolate bar pastry chocolate cake. Cupcake tart jujubes dragée jelly-o icing sugar plum. Chocolate bar lollipop candy canes. Biscuit croissant apple pie pudding caramels wafer tart tootsie roll macaroon. Croissant tiramisu chocolate bar carrot cake lemon drops halvah.</p>
+          <p>
+            Lollipop powder powder. Cotton candy caramels chupa chups halvah
+            muffin caramels apple pie topping cake. Topping chocolate bar pastry
+            chocolate cake. Cupcake tart jujubes dragée jelly-o icing sugar
+            plum. Chocolate bar lollipop candy canes. Biscuit croissant apple
+            pie pudding caramels wafer tart tootsie roll macaroon. Croissant
+            tiramisu chocolate bar carrot cake lemon drops halvah.
+          </p>
         </div>
         <div className="column">
-          <p>Marshmallow tiramisu liquorice bear claw chocolate bar bear claw tart. Muffin chupa chups pie. Brownie apple pie topping lemon drops marzipan toffee. Pudding macaroon icing ice cream bonbon cake tart. Pudding sugar plum chocolate cake cake biscuit pastry pastry chocolate bar tart. Lemon drops dessert gummies icing.</p>
+          <p>
+            Marshmallow tiramisu liquorice bear claw chocolate bar bear claw
+            tart. Muffin chupa chups pie. Brownie apple pie topping lemon drops
+            marzipan toffee. Pudding macaroon icing ice cream bonbon cake tart.
+            Pudding sugar plum chocolate cake cake biscuit pastry pastry
+            chocolate bar tart. Lemon drops dessert gummies icing.
+          </p>
         </div>
       </div>
 

dark-mode/src/routes/index.js

@@ -1,5 +1,19 @@
-import Home from './App';
-
+import App from "./App";
+import { ModeContext } from "../contexts/ModeContext";
 // Use something like react-router-dom to manage multiple pages/routes
+import React, { useState } from "react";
+
+const Home = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  darkMode
+    ? document.documentElement.setAttribute("class", "dark-mode")
+    : document.documentElement.removeAttribute("class");
+
+  return (
+    <ModeContext.Provider value={[darkMode, setDarkMode]}>
+      <App />
+    </ModeContext.Provider>
+  );
+};
 
 export default Home;