From 4f474a9182c9c1fd3422344af9ff48b1c61db4b2 Mon Sep 17 00:00:00 2001
From: John Letey <30328854+johnletey@users.noreply.github.com>
Date: Tue, 30 Jul 2019 12:49:22 +0100
Subject: [PATCH 1/4] [wip] feat: Add dark mode

---
 src/index.js  | 16 +++++++++++++++-
 src/layout.js |  6 ++++--
 src/theme.js  | 12 ++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/theme.js

diff --git a/src/index.js b/src/index.js
index a07b896..f59689b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useState, useEffect } from 'react'
 import { remote, ipcRenderer } from 'electron'
-import { jsx, Styled } from 'theme-ui'
+import { jsx, Styled, useColorMode } from 'theme-ui'
 import { render } from 'react-dom'
 import { Editor, serializer, stringifyMDX } from '@blocks/editor'
 import { Folder, FileText, ArrowLeft } from 'react-feather'
@@ -16,6 +16,8 @@ const App = () => {
   const [dirname, setDirname] = useState(remote.app.getPath('home'))
   const [files, setFiles] = useState([])
 
+  const [colorMode, setColorMode] = useColorMode()
+
   const updateFileList = async () => {
     const filelist = await getFiles({ dirname })
     setFiles(filelist)
@@ -82,6 +84,12 @@ const App = () => {
           <ArrowLeft />
           <span sx={{ ml: 2 }}>Back</span>
         </Styled.a>
+        <button
+          onClick={e => {
+            setColorMode(colorMode === 'light' ? 'dark' : 'light')
+          }}>
+          Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
+        </button>
         <Styled.p
           css={{
             display: 'flex',
@@ -113,6 +121,12 @@ const App = () => {
             marginTop: '40px'
           }}
         >
+          <button
+            onClick={e => {
+              setColorMode(colorMode === 'light' ? 'dark' : 'light')
+            }}>
+            Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
+          </button>
           <Styled.ul>
             <Styled.li
               sx={{
diff --git a/src/layout.js b/src/layout.js
index 3927646..6f2301a 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -1,9 +1,11 @@
 import React from 'react'
-import { ThemeProvider } from 'theme-ui'
+import { ThemeProvider, ColorMode } from 'theme-ui'
 import { theme } from '@blocks/editor'
+import desktopTheme from './theme'
 
 export default ({ children }) => (
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={theme && desktopTheme}>
+    <ColorMode />
     {children}
   </ThemeProvider>
 )
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..36a45db
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,12 @@
+export default {
+    initialColorMode: 'light',
+    useCustomProperties: true,
+    colors: {
+        background: '#fff',
+        modes: {
+            dark: {
+                background: '#000',
+            }
+        }
+    }
+}
\ No newline at end of file

From d0d1f27ca2b2b8d1be98e9f0c7422cae579c1c5f Mon Sep 17 00:00:00 2001
From: John Letey <30328854+johnletey@users.noreply.github.com>
Date: Wed, 31 Jul 2019 17:05:12 +0100
Subject: [PATCH 2/4] [wip] refactor: Update dark mode

---
 src/index.js         | 18 ++----------------
 src/layout.js        |  7 ++++---
 src/theme.js         |  3 +++
 src/themeSwitcher.js | 29 +++++++++++++++++++++++++++++
 4 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 src/themeSwitcher.js

diff --git a/src/index.js b/src/index.js
index f59689b..f8ba711 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useState, useEffect } from 'react'
 import { remote, ipcRenderer } from 'electron'
-import { jsx, Styled, useColorMode } from 'theme-ui'
+import { jsx, Styled } from 'theme-ui'
 import { render } from 'react-dom'
 import { Editor, serializer, stringifyMDX } from '@blocks/editor'
 import { Folder, FileText, ArrowLeft } from 'react-feather'
@@ -16,8 +16,6 @@ const App = () => {
   const [dirname, setDirname] = useState(remote.app.getPath('home'))
   const [files, setFiles] = useState([])
 
-  const [colorMode, setColorMode] = useColorMode()
-
   const updateFileList = async () => {
     const filelist = await getFiles({ dirname })
     setFiles(filelist)
@@ -69,7 +67,7 @@ const App = () => {
           marginRight: 'auto',
           marginTop: '40px'
         }}
-        >
+      >
         <Styled.a
           css={{
             display: 'flex',
@@ -84,12 +82,6 @@ const App = () => {
           <ArrowLeft />
           <span sx={{ ml: 2 }}>Back</span>
         </Styled.a>
-        <button
-          onClick={e => {
-            setColorMode(colorMode === 'light' ? 'dark' : 'light')
-          }}>
-          Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
-        </button>
         <Styled.p
           css={{
             display: 'flex',
@@ -121,12 +113,6 @@ const App = () => {
             marginTop: '40px'
           }}
         >
-          <button
-            onClick={e => {
-              setColorMode(colorMode === 'light' ? 'dark' : 'light')
-            }}>
-            Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
-          </button>
           <Styled.ul>
             <Styled.li
               sx={{
diff --git a/src/layout.js b/src/layout.js
index 6f2301a..2cfe20b 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import { ThemeProvider, ColorMode } from 'theme-ui'
-import { theme } from '@blocks/editor'
-import desktopTheme from './theme'
+import ThemeSwitcher from './themeSwitcher';
+import theme from './theme'
 
 export default ({ children }) => (
-  <ThemeProvider theme={theme && desktopTheme}>
+  <ThemeProvider theme={theme}>
+    <ThemeSwitcher />
     <ColorMode />
     {children}
   </ThemeProvider>
diff --git a/src/theme.js b/src/theme.js
index 36a45db..ba15ee8 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,4 +1,7 @@
+import { theme } from '@blocks/editor'
+
 export default {
+    ...theme,
     initialColorMode: 'light',
     useCustomProperties: true,
     colors: {
diff --git a/src/themeSwitcher.js b/src/themeSwitcher.js
new file mode 100644
index 0000000..da38e9f
--- /dev/null
+++ b/src/themeSwitcher.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { useColorMode, Styled } from 'theme-ui'
+
+export default () => {
+  const [colorMode, setColorMode] = useColorMode()
+  return (
+    <Styled.root
+      css={{
+        maxWidth: '48em',
+        padding: 32,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        marginTop: '40px'
+      }}
+    >
+      <Styled.button
+        css={{
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer'
+        }}
+        onClick={e => {
+          setColorMode(colorMode === 'light' ? 'dark' : 'light')
+        }}>
+        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
+      </Styled.button>
+    </Styled.root>
+  )
+}
\ No newline at end of file

From 18e72dc90440c486b66115f44402018e00cfe4b3 Mon Sep 17 00:00:00 2001
From: John Letey <30328854+johnletey@users.noreply.github.com>
Date: Tue, 6 Aug 2019 11:16:53 +0100
Subject: [PATCH 3/4] dark mode now works ... still some bugs

---
 src/index.js         | 80 +++++++++++++++++++++++---------------------
 src/theme.js         |  3 +-
 src/themeSwitcher.js | 36 +++++++-------------
 3 files changed, 56 insertions(+), 63 deletions(-)

diff --git a/src/index.js b/src/index.js
index f8ba711..029ea06 100644
--- a/src/index.js
+++ b/src/index.js
@@ -59,47 +59,49 @@ const App = () => {
     const parentDir = getParentDirectory(openFilePathname)
     
     return (
-      <Styled.root
-        css={{
-          maxWidth: '48em',
-          padding: 32,
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          marginTop: '40px'
-        }}
-      >
-        <Styled.a
-          css={{
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer',
-            marginBottom: '2px'
-          }}
-          onClick={() => {
-            handleFileListSelection(parentDir)
-          }}
-        >
-          <ArrowLeft />
-          <span sx={{ ml: 2 }}>Back</span>
-        </Styled.a>
-        <Styled.p
+      <Layout>
+        <Styled.root
           css={{
-            display: 'flex',
-            alignItems: 'center',
-            marginBottom: '20px'
+            maxWidth: '48em',
+            padding: 32,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            marginTop: '40px'
           }}
         >
-            <FileText />
-            <span sx={{ ml: 2 }}>{openFilePathname}</span>
-        </Styled.p>
-        <Editor
-          initialValue={openFileContents}
-          onChange={({ value }) => {
-            write({ value })
-          }}
-          components={{}}
-        />
-      </Styled.root>
+          <Styled.a
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              cursor: 'pointer',
+              marginBottom: '2px'
+            }}
+            onClick={() => {
+              handleFileListSelection(parentDir)
+            }}
+          >
+            <ArrowLeft />
+            <span sx={{ ml: 2 }}>Back</span>
+          </Styled.a>
+          <Styled.p
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: '20px'
+            }}
+          >
+              <FileText />
+              <span sx={{ ml: 2 }}>{openFilePathname}</span>
+          </Styled.p>
+          <Editor
+            initialValue={openFileContents}
+            onChange={({ value }) => {
+              write({ value })
+            }}
+            components={{}}
+          />
+        </Styled.root>
+      </Layout>
     )
   } else {
     return (
@@ -110,7 +112,7 @@ const App = () => {
             padding: 32,
             marginLeft: 'auto',
             marginRight: 'auto',
-            marginTop: '40px'
+            // marginTop: 'auto'
           }}
         >
           <Styled.ul>
diff --git a/src/theme.js b/src/theme.js
index ba15ee8..c7fefaa 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -3,11 +3,12 @@ import { theme } from '@blocks/editor'
 export default {
     ...theme,
     initialColorMode: 'light',
-    useCustomProperties: true,
     colors: {
+        ...theme.colors,
         background: '#fff',
         modes: {
             dark: {
+                ...theme.colors.dark,
                 background: '#000',
             }
         }
diff --git a/src/themeSwitcher.js b/src/themeSwitcher.js
index da38e9f..47b61d0 100644
--- a/src/themeSwitcher.js
+++ b/src/themeSwitcher.js
@@ -1,29 +1,19 @@
-import React from 'react'
-import { useColorMode, Styled } from 'theme-ui'
+/** @jsx jsx */
+import { jsx, useColorMode } from 'theme-ui'
+import { Sun, Moon } from 'react-feather'
+
+export default props => {
+  const [ mode, setMode ] = useColorMode()
 
-export default () => {
-  const [colorMode, setColorMode] = useColorMode()
   return (
-    <Styled.root
-      css={{
-        maxWidth: '48em',
-        padding: 32,
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        marginTop: '40px'
+    <a
+      {...props}
+      onClick={e => {
+        const next = mode === 'dark' ? 'light' : 'dark'
+        setMode(next)
       }}
     >
-      <Styled.button
-        css={{
-          display: 'flex',
-          alignItems: 'center',
-          cursor: 'pointer'
-        }}
-        onClick={e => {
-          setColorMode(colorMode === 'light' ? 'dark' : 'light')
-        }}>
-        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
-      </Styled.button>
-    </Styled.root>
+      {mode == 'dark' ? <Sun /> : <Moon />}
+    </a>
   )
 }
\ No newline at end of file

From 8cee484ce0b2eee0b895bbc4d568634e37960a93 Mon Sep 17 00:00:00 2001
From: John Letey <30328854+johnletey@users.noreply.github.com>
Date: Tue, 6 Aug 2019 11:18:11 +0100
Subject: [PATCH 4/4] add newline to end of files

---
 src/theme.js         | 2 +-
 src/themeSwitcher.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme.js b/src/theme.js
index c7fefaa..11be6f3 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -13,4 +13,4 @@ export default {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/themeSwitcher.js b/src/themeSwitcher.js
index 47b61d0..562a2c8 100644
--- a/src/themeSwitcher.js
+++ b/src/themeSwitcher.js
@@ -16,4 +16,4 @@ export default props => {
       {mode == 'dark' ? <Sun /> : <Moon />}
     </a>
   )
-}
\ No newline at end of file
+}