Initial Commit

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-icons": "^3.11.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,63 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
+import React from "react";
+import useDarkMode from "./useDarkMode";
+import { BsMoon, BsSun } from "react-icons/bs";
 function App() {
+  const [isDark, setIsDark] = useDarkMode();
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <nav className="navigation">
+        <div className="logo">Dark Mode</div>
+        <button className="toggle_btn" onClick={() => setIsDark(!isDark)}>
+          {isDark ? (
+            <BsSun size="24" color="#ff0" />
+          ) : (
+            <BsMoon size="24" color="#000" />
+          )}
+        </button>
+      </nav>
+      <h1>This is a heading</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit earum
+        molestias, error, architecto unde accusamus quae quo reprehenderit,
+        quasi nesciunt perferendis saepe debitis necessitatibus perspiciatis
+        vitae eaque quaerat libero corporis? Eligendi iste ipsam harum veritatis
+        aspernatur deleniti, aliquid autem earum nemo recusandae natus officia
+        dolores neque ad asperiores nihil voluptate voluptas. Minus, at
+        doloribus commodi veritatis enim corrupti quis voluptatem! Ex soluta ut
+        quo dignissimos molestiae voluptate corrupti ab laborum quaerat,
+        mollitia labore delectus possimus ea vitae architecto voluptatum sed
+        fugit distinctio! Minus perferendis harum praesentium rerum et, tenetur
+        quod. Dolorum obcaecati possimus, magni ea earum hic consectetur. Eos
+        placeat recusandae dolores commodi tenetur officiis. Fugit ipsa odit
+        eveniet omnis quasi. Numquam natus temporibus architecto tempore ducimus
+        minima ex molestiae. Necessitatibus iure nesciunt exercitationem magni
+        omnis a, obcaecati, laudantium deserunt sit fugiat, quibusdam aspernatur
+        placeat. Vero at tempora, voluptatem ducimus minima impedit eius
+        reiciendis eaque repellendus maiores deleniti fugit repudiandae?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus
+        asperiores assumenda earum voluptatibus a. Nam ullam alias consequuntur
+        odio voluptates laudantium enim architecto a, distinctio deserunt
+        corrupti, placeat quisquam minus. Reprehenderit sequi ipsam fuga minus
+        at harum quo aspernatur suscipit minima illum commodi laboriosam sit
+        autem officiis, magni error! Accusamus iusto dolores voluptatem
+        inventore quae, velit nisi! Odit, in mollitia. Dicta, sunt debitis,
+        nesciunt reprehenderit vel aperiam accusamus vitae tenetur officia
+        exercitationem iusto harum voluptate officiis corrupti odio nulla soluta
+        quibusdam quae. Optio dicta recusandae, quia animi delectus deleniti
+        placeat? Tempora, nam sequi? Maxime assumenda, quo animi tempore
+        inventore cupiditate deleniti aut harum nam porro, fugiat quaerat
+        consequuntur excepturi expedita facilis maiores eveniet ullam, eum
+        saepe! Sunt cumque voluptates nobis. Nisi perspiciatis, necessitatibus,
+        aperiam sequi debitis consectetur veniam exercitationem autem quis natus
+        aut laborum omnis non. Quam, rem ratione praesentium sit ab dolores
+        facilis tenetur quia deleniti beatae, illum officia. Accusantium
+        recusandae ab numquam quaerat quos deserunt unde magni, debitis animi
+        incidunt, aliquam corporis repellat quod soluta! Perspiciatis molestias
+        possimus aperiam nobis at fuga iusto officia deleniti omnis beatae.
+        Aspernatur?
+      </p>
     </div>
   );
 }

src/index.css

@@ -1,13 +1,28 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  margin: 1rem auto;
+  max-width: 800px;
+  background-color: #fff;
+  color: #000;
+  --button-text: #000;
+  --button-bg: #fff;
+}
+body.dark {
+  background-color: #000;
+  color: #fff;
+  --button-text: #fff;
+  --button-bg: #000;
+}
+.navigation {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.logo {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+.toggle_btn {
+  color: var(--button-text);
+  background-color: var(--button-bg);
+  cursor: pointer;
 }

src/index.js

@@ -1,17 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();