feat: Add dark mode

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>

src/layout.js

@@ -1,9 +1,12 @@
 import React from 'react'
-import { ThemeProvider } from 'theme-ui'
-import { theme } from '@blocks/editor'
+import { ThemeProvider, ColorMode } from 'theme-ui'
+import ThemeSwitcher from './themeSwitcher';
+import theme from './theme'
 
 export default ({ children }) => (
   <ThemeProvider theme={theme}>
+    <ThemeSwitcher />
+    <ColorMode />
     {children}
   </ThemeProvider>
 )

src/theme.js

@@ -0,0 +1,16 @@
+import { theme } from '@blocks/editor'
+
+export default {
+    ...theme,
+    initialColorMode: 'light',
+    colors: {
+        ...theme.colors,
+        background: '#fff',
+        modes: {
+            dark: {
+                ...theme.colors.dark,
+                background: '#000',
+            }
+        }
+    }
+}

src/themeSwitcher.js

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { jsx, useColorMode } from 'theme-ui'
+import { Sun, Moon } from 'react-feather'
+
+export default props => {
+  const [ mode, setMode ] = useColorMode()
+
+  return (
+    <a
+      {...props}
+      onClick={e => {
+        const next = mode === 'dark' ? 'light' : 'dark'
+        setMode(next)
+      }}
+    >
+      {mode == 'dark' ? <Sun /> : <Moon />}
+    </a>
+  )
+}