🌙 Dark Mode Added

aromalanil · Sep 5, 2020 · b7e5c2b · b7e5c2b
1 parent 1bfe874
commit b7e5c2b
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {

diff --git a/src/App.scss b/src/App.scss
@@ -16,10 +16,13 @@ body {
   --body-accent-color: #e1e4e8;
   --alternate-table-color: #eaecef;
   --primary-text-color: #24292e;
+  --link-color:var(--primary-color);
   --table-border-color: #ddd;
   --source-code-font: "Source Code Pro", monospace;
   --open-sans-font: "Open Sans", sans-serif;
+  --color-transition : .5s ease;
   background-color: var(--body-color);
+  transition: background-color var(--color-transition);
   margin: 0;
   color: var(--primary-text-color);
   font-family: var(--open-sans-font);
@@ -45,6 +48,7 @@ body {
   border-radius: 0.2rem;
   color: var(--nav-item-color);
   background-color: var(--primary-color);
+  transition: color,background-color var(--color-transition);
   border: none;
   transition: filter 200ms ease;
   margin: 0 0.5rem;
@@ -60,15 +64,18 @@ body {
 .navbar {
   margin: 0;
   background-color: var(--primary-color);
+  transition: background-color var(--color-transition);
   color: var(--nav-item-color);
   height: 3.75rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  .title {
+  *{
     user-select: none;
+  }
+  .title {
     margin: 0;
     line-height: 30px;
     display: flex;
@@ -103,8 +110,7 @@ body {
         width: 2rem;
         height: 2rem;
         border-radius: 50%;
-        border: 0.18rem solid white;
-        background-color: var(--primary-color);
+        border: 0.15rem solid white;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -122,6 +128,7 @@ body {
         width: 15.625rem;
         height: 18.75rem;
         background-color: var(--primary-color);
+        transition: background-color,border var(--color-transition);
         border: 0.1rem solid var(--accent-color);
         padding: 1rem 1.5rem;
         border-radius: 0.6rem;
@@ -134,6 +141,9 @@ body {
           padding-bottom: 1rem;
           border-bottom: 0.1rem solid var(--accent-color);
         }
+        h4{
+          margin-bottom: 0em;
+        }
       }
       .theme-btn {
         display: flex;
@@ -188,9 +198,9 @@ body {
   height: 2.5rem;
   width: 100%;
   background-color: var(--accent-color);
+  transition: background-color var(--color-transition);
   color: var(--nav-section-text-color);
   text-transform: uppercase;
-  user-select: none;
   h3 {
     font-weight: 600;
     margin: 0;
@@ -210,6 +220,7 @@ body {
     color: var(--primary-text-color);
     border: none;
     background-color: var(--body-color);
+    transition: background-color var(--color-transition);
     font-size: 1rem;
     font-weight: 400;
     margin-top: 2rem;
@@ -227,6 +238,7 @@ body {
   width: 100%;
   .html-div {
     background-color: var(--body-color);
+    transition: background-color var(--color-transition);
     margin-top: 2rem;
     overflow-y: scroll;
   }
@@ -246,7 +258,7 @@ body {
     line-height: 1.5;
   }
   a {
-    color: var(--primary-color);
+    color: var(--link-color);
     &:hover {
       filter: brightness(1.2);
     }
@@ -256,6 +268,7 @@ body {
     height: 0.187rem;
     margin: 1.5rem 0;
     background-color: var(--body-accent-color);
+    transition: background-color var(--color-transition);
   }
   pre {
     padding: 1rem;
@@ -273,6 +286,7 @@ body {
   }
   blockquote {
     border-left: 0.312em solid var(--body-accent-color);
+    transition: border-color var(--color-transition);
     padding-left: 1rem;
   }
   img {
@@ -283,12 +297,14 @@ body {
     line-height: 1.33;
     padding-bottom: 0.3em;
     border-bottom: 1px solid var(--body-accent-color);
+    transition: border-color var(--color-transition);
   }
   h2 {
     margin: 1.5rem 0 1rem;
     line-height: 1.33;
     padding-bottom: 0.3em;
     border-bottom: 1px solid var(--body-accent-color);
+    transition: border-color var(--color-transition);
   }
   h3 {
     margin: 1.5rem 0 1rem;
@@ -306,17 +322,20 @@ body {
   th,
   td {
     border: 0.08rem solid var(--table-border-color);
+    transition: border-color var(--color-transition);
     text-align: left;
     text-align: center;
     padding: 0.5rem 1.25rem;
   }
 
   tr:nth-child(even) {
     background-color: var(--alternate-table-color);
+    transition: background-color var(--color-transition);
   }
 
   th {
     background-color: var(--primary-color);
+    transition: background-color var(--color-transition);
     color: white;
   }
   summary:focus{

diff --git a/src/components/DarkModeToggle.jsx b/src/components/DarkModeToggle.jsx
@@ -0,0 +1,28 @@
+import React, { useEffect } from "react";
+import Switch from "@material-ui/core/Switch";
+import useLocalStorage from "../hooks/useLocalStorage";
+
+function DarkModeToggle() {
+  const [darkMode, setDarkMode] = useLocalStorage("darkMode", false);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
+
+  const handleSwitchToggle = (e) => {
+    setDarkMode(e.target.checked);
+  };
+
+  return (
+    <>
+      <h4>Dark Mode</h4>
+      <Switch checked={darkMode} onChange={handleSwitchToggle} />
+    </>
+  );
+}
+
+export default DarkModeToggle;
diff --git a/src/components/MarkdownPreview.jsx b/src/components/MarkdownPreview.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
 import * as marked from "marked";
 import Prism from 'prismjs';
-import '../styles/github.css';
 import '../utils/prism-imports';
+//css for Prism is imported in ThemeSelector
 
 function MarkdownPreview({ content }) {
   const [html, setHtml] = useState(getHtml(content));

diff --git a/src/components/ThemeSelector.jsx b/src/components/ThemeSelector.jsx
@@ -1,19 +1,23 @@
 import React, { useEffect, useRef } from "react";
 import themeData from "../data/theme";
 import tickIcon from "../icons/tick.svg";
+import DarkModeToggle from "./DarkModeToggle";
+
+require("prismjs/themes/prism-okaidia.css");
 
 function ThemeSelector({ isVisible, setVisible, activeTheme, setActiveTheme }) {
+
   const themeSelectorRef = useRef(null);
 
   const handleThemeButtonClick = (theme) => {
-    setVisible(false);
     setActiveTheme(theme);
   };
 
   useEffect(() => {
     const hideDropDown = (e) => {
       if (
         themeSelectorRef.current &&
+        !themeSelectorRef.current.parentElement.contains(e.target) &&
         !themeSelectorRef.current.contains(e.target)
       ) {
         setVisible(false);
@@ -23,7 +27,7 @@ function ThemeSelector({ isVisible, setVisible, activeTheme, setActiveTheme }) {
     return () => {
       document.removeEventListener("click", hideDropDown);
     };
-  }, [themeSelectorRef, setVisible]);
+  }, [themeSelectorRef]);
 
   const themeButtons = themeData.map((theme) => {
     return (
@@ -39,13 +43,16 @@ function ThemeSelector({ isVisible, setVisible, activeTheme, setActiveTheme }) {
     );
   });
 
-  return isVisible ? (
-    <div className="all-theme-wrapper" ref={themeSelectorRef}>
+  return (
+
+    <div
+      className="all-theme-wrapper"
+      ref={themeSelectorRef}
+      style={{ display: isVisible ? "block" : "none" }}>
       <h3>Change Theme</h3>
       <div className="theme-btn">{themeButtons}</div>
+      <DarkModeToggle />
     </div>
-  ) : (
-    <></>
   );
 }
 

diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
@@ -21,24 +21,21 @@ function ThemeToggle() {
       <div className="theme-icon" onClick={handleToggleClick}>
         <img src={themeIcon} alt="Theme Icon" />
       </div>
-      {dropDownVisible && (
         <ThemeSelector
           isVisible={dropDownVisible}
           setVisible={setDropDownVisible}
           activeTheme={activeTheme}
           setActiveTheme={setActiveTheme}
         />
-      )}
     </div>
   );
 }
 
 const changeTheme = (theme) => {
   document.body.style.setProperty("--primary-color", theme.primaryColor);
   document.body.style.setProperty("--accent-color", theme.accentColor);
-  if (theme.textColor) {
-    document.body.style.setProperty("--text-color", theme.textColor);
-  }
+  document.body.style.setProperty("--link-color", theme.linkColor ? theme.linkColor : theme.primaryColor);
+  theme.textColor && document.body.style.setProperty("--nav-section-text-color", theme.textColor);
 };
 
 export default ThemeToggle;
diff --git a/src/data/theme.js b/src/data/theme.js
@@ -9,7 +9,8 @@ const themeData = [
         name: "Dessert",
         primaryColor: "#46211a",
         accentColor: "#693d3d",
-        textColor: "#e0e0e0"
+        textColor: "#eaecef",
+        linkColor:"#693d3d"
     }, {
         name: "Red",
         primaryColor: "#f44336",
@@ -40,7 +41,8 @@ const themeData = [
         name: "Github",
         primaryColor: "#24292E",
         accentColor: "#3F4448",
-        textColor: "#CFD0D1"
+        textColor: "#CFD0D1",
+        linkColor:"#eaecef"
     },{
         name: "lightGreen",
         primaryColor: "#4caf50",