feat: add dark mode 🌔

seunbayo · Feb 20, 2021 · 585b929 · 585b929
1 parent 06074f0
commit 585b929
Show file tree

Hide file tree

Showing 13 changed files with 276 additions and 40 deletions.
diff --git a/components/DarkModeToggle.js b/components/DarkModeToggle.js
@@ -0,0  1,21 @@
 import React from "react";
 import Toggle from "./Toggle";
 import useDarkMode from "use-dark-mode";
 
 const DarkModeToggle = () => {
   const darkMode = useDarkMode(false);
 
   return (
     <div className="dark-mode-toggle">
       <button type="button" onClick={darkMode.disable}>
         ☀
       </button>
       <Toggle checked={darkMode.value} onChange={darkMode.toggle} />
       <button type="button" onClick={darkMode.enable}>
         ☽
       </button>
     </div>
   );
 };
 
 export default DarkModeToggle;
diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js
@@ -0,0  1,14 @@
 import React from "react";
 import styles from "./Footer.module.css";
 
 const footerYear = new Date().getFullYear();
 
 const Footer = () => {
   return (
     <footer className={styles.footer}>
       &copy; Bolaji Ayodeji | 2019 - {footerYear}.
     </footer>
   );
 };
 
 export default Footer;
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
@@ -0,0  1,8 @@
 .footer {
   width: 100%;
   height: 100px;
   border-top: 2px solid var(--primaryMainColor);
   display: flex;
   justify-content: center;
   align-items: center;
 }
diff --git a/components/Toggle.js b/components/Toggle.js
@@ -0,0  1,16 @@
 import React from "react";
 
 const Toggle = ({ checked, onChange }) => (
   <span className="toggle-control">
     <input
       className="dmcheck"
       type="checkbox"
       checked={checked}
       onChange={onChange}
       id="dmcheck"
     />
     <label htmlFor="dmcheck" />
   </span>
 );
 
 export default Toggle;
diff --git a/next.config.js b/next.config.js
@@ -3,7  3,7 @@ module.exports = {
       return [
         {
           source: "/newsletter",
-          destination: "https://tinyletter.com/bolajiayodeji",
           destination: "https://bawd.bolajiayodeji.com",
         },
         {
           source: "/blog",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6  11,7 @@
   "dependencies": {
     "next": "10.0.3",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
     "react-dom": "17.0.1",
     "use-dark-mode": "^2.3.1"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,4  1,4 @@
-import '../styles/globals.css'
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

diff --git a/pages/_document.js b/pages/_document.js
@@ -11,6  11,7 @@ class MyDocument extends Document {
           <script src="/__/firebase/8.2.1/firebase-app.js"></script>
           <script src="/__/firebase/8.2.1/firebase-analytics.js"></script>
           <script src="/__/firebase/init.js"></script>
           <script src="noflash.js" />
         </body>
       </Html>
     );

diff --git a/pages/index.js b/pages/index.js
@@ -1,5  1,7 @@
 import Head from "next/head";
 import styles from "../styles/Home.module.css";
 import DarkModeToggle from "../components/DarkModeToggle";
 import Footer from "../components/Footer/Footer";
 
 const metaData = {
   pageTitle:
@@ -56,6  58,8 @@ export default function Home() {
         <link rel="icon" href={favicon} />
       </Head>
 
       <DarkModeToggle />
 
       <main className={styles.main}>
         <h1 className={styles.title}>BOLAJI AYODEJI</h1>
 
@@ -106,12  110,17 @@ export default function Home() {
           >
             YouTube)
           </a>
-          , build useful <a href="https://github.com/BolajiAyodeji" target="_blank"
-            rel="noopener noreferrer">open-source projects</a>, speak at some meetups/conferences, and build technical communities.
           , build useful{" "}
           <a
             href="https://github.com/BolajiAyodeji"
             target="_blank"
             rel="noopener noreferrer"
           >
             open-source projects
           </a>
           , speak at some meetups/conferences, and build technical communities.
         </p>
 
-
-
         <div className={styles.grid}>
           <a href="https://blog.bolajiayodeji.com" className={styles.card}>
             <h2>✍🏾 Blog</h2>
@@ -148,9  157,7 @@ export default function Home() {
         </div>
       </main>
 
-      <footer className={styles.footer}>
-        &copy; Bolaji Ayodeji | 2019 - Today.
-      </footer>
       <Footer />
     </div>
   );
 }
diff --git a/public/noflash.js b/public/noflash.js
@@ -0,0  1,40 @@
 // Insert this script in your index.html right after the <body> tag.
 // This will help to prevent a flash if dark mode is the default.
 
 (function() {
     // Change these if you use something different in your hook.
     var storageKey = 'darkMode';
     var classNameDark = 'dark-mode';
     var classNameLight = 'light-mode';
 
     function setClassOnDocumentBody(darkMode) {
       document.body.classList.add(darkMode ? classNameDark : classNameLight);
       document.body.classList.remove(darkMode ? classNameLight : classNameDark);
     }
 
     var preferDarkQuery = '(prefers-color-scheme: dark)';
     var mql = window.matchMedia(preferDarkQuery);
     var supportsColorSchemeQuery = mql.media === preferDarkQuery;
     var localStorageTheme = null;
     try {
       localStorageTheme = localStorage.getItem(storageKey);
     } catch (err) {}
     var localStorageExists = localStorageTheme !== null;
     if (localStorageExists) {
       localStorageTheme = JSON.parse(localStorageTheme);
     }
 
     // Determine the source of truth
     if (localStorageExists) {
       // source of truth from localStorage
       setClassOnDocumentBody(localStorageTheme);
     } else if (supportsColorSchemeQuery) {
       // source of truth from system
       setClassOnDocumentBody(mql.matches);
       localStorage.setItem(storageKey, mql.matches);
     } else {
       // source of truth from document.body
       var isDarkMode = document.body.classList.contains(classNameDark);
       localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
     }
   })();
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -8,7  8,7 @@
 }
 
 .main {
-  padding: 5rem 0;
   padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -20,7  20,7 @@
   margin: 0;
   line-height: 1.15;
   font-size: 5.5rem;
-  color: #3a7ebf;
   color: var(--primaryMainColor);
   text-align: center;
 }
 
@@ -39,13  39,13 @@
 }
 
 .description a {
-  border-bottom: 2px dotted #3a7ebf;
   border-bottom: 2px dotted var(--primaryMainColor);
   text-decoration: none;
 }
 
 .description a:hover {
-  color: #3a7ebf;
-  border-bottom: 2px dotted #000000;
   color: var(--primaryMainColor);
   border-bottom: 2px dotted var(--primaryTextColor);
 }
 
 .grid {
@@ -64,7  64,7 @@
   text-align: left;
   color: inherit;
   text-decoration: none;
-  border: 5px solid #3a7ebf;
   border: 5px solid var(--primaryMainColor);
 }
 
 .card:hover,
@@ -87,15  87,6 @@
   line-height: 1.5;
 }
 
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 @media (max-width: 600px) {
   .grid {
     width: 100%;
@@ -108,6  99,6 @@
     padding: 1.5rem;
   }
   .card {
-    border: 3px solid #3a7ebf;
     border: 3px solid var(--primaryMainColor);
   }
 }