Add light/dark theme toggle to editor octokatherine#29 (octokatherine#38

)

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' })
+}

styles/globals.css

@@ -6,6 +6,10 @@
   max-height: calc(100vh - 160px);
 }
 
+.toggle-dark-mode {
+  float: right;
+}
+
 @layer base {
   html {
     @apply bg-gray-50;