From 60d86898bc42dfe9e15cb22b0de1402da39e84ab Mon Sep 17 00:00:00 2001
From: Saurabh Chaturvedi <56601821+saurabhchaturvedy@users.noreply.github.com>
Date: Wed, 14 Apr 2021 09:14:19 +0530
Subject: [PATCH] Add light/dark theme toggle to editor #29 (#38)

---
 components/EditorColumn.js | 24 ++++++++++++++++++++++--
 public/toggle_moon.svg     |  1 +
 public/toggle_sun.svg      |  1 +
 styles/globals.css         |  4 ++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 public/toggle_moon.svg
 create mode 100644 public/toggle_sun.svg

diff --git a/components/EditorColumn.js b/components/EditorColumn.js
index c16f6c5..9525a80 100644
--- a/components/EditorColumn.js
+++ b/components/EditorColumn.js
@@ -7,6 +7,7 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
     return section ? section.markdown : ''
   }
   const [markdown, setMarkdown] = useState(getMarkdown())
+  const [toggleState, setToggleState] = useState({ theme: 'vs-dark', img: 'toggle_sun.svg' })
 
   useEffect(() => {
     const markdown = getMarkdown()
@@ -25,14 +26,27 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
     })
   }
 
+  const toggleTheme = () => {
+    toggleDarkMode(toggleState, setToggleState)
+  }
+
   return (
     <div className="flex-1 px-3 full-screen max-w-[50%] min-w-[500px]">
-      <h3 className="mb-3 text-lg font-medium leading-6 text-gray-900">Editor</h3>
+      <h3 className="mb-3 text-lg font-medium leading-6 text-gray-900">
+        Editor
+        <button
+          onClick={toggleTheme}
+          aria-label="Color Mode"
+          className="toggle-dark-mode focus:outline-none transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none"
+        >
+          <img className="w-auto h-8 mr-2" src={toggleState.img} />
+        </button>
+      </h3>
       {focusedSectionSlug ? (
         <Editor
           wrapperClassName="rounded-sm border border-gray-500"
           className="full-screen" // By default, it fully fits with its parent
-          theme="vs-dark"
+          theme={toggleState.theme}
           language="markdown"
           value={markdown}
           onChange={onEdit}
@@ -52,3 +66,9 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
     </div>
   )
 }
+
+const toggleDarkMode = (toggleState, setToggleState) => {
+  toggleState.theme == 'vs-dark'
+    ? setToggleState({ theme: 'light', img: 'toggle_moon.svg' })
+    : setToggleState({ theme: 'vs-dark', img: 'toggle_sun.svg' })
+}
diff --git a/public/toggle_moon.svg b/public/toggle_moon.svg
new file mode 100644
index 0000000..1df3109
--- /dev/null
+++ b/public/toggle_moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#7E7C6A" class="w-5 h-5 transform -rotate-90"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
\ No newline at end of file
diff --git a/public/toggle_sun.svg b/public/toggle_sun.svg
new file mode 100644
index 0000000..8a7a6f9
--- /dev/null
+++ b/public/toggle_sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#DAA520" class="w-5 h-5"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 87f907a..8772cc9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -6,6 +6,10 @@
   max-height: calc(100vh - 160px);
 }
 
+.toggle-dark-mode {
+  float: right;
+}
+
 @layer base {
   html {
     @apply bg-gray-50;