dark mode

src/components/Nav.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-export default memo(() => {
+export default memo(({ themeToggler }) => {
   const router = useRouter()
 
   return (
@@ -25,6 +25,8 @@ export default memo(() => {
       <Link href="/css">
         <a aria-current={router.asPath == '/css' ? 'page' : undefined}>css</a>
       </Link>
+
+      <button onClick={themeToggler}>toggle dark mode</button>
     </nav>
   )
 })

src/helpers/styles.js

@@ -2,38 +2,12 @@ import 'highlight.js/styles/xcode.css'
 import '@exampledev/new.css/new.css'
 import styled, { createGlobalStyle } from 'styled-components'
 
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --nc-tx-1: #ffffff;
-    --nc-tx-2: #eeeeee;
-    --nc-bg-1: #000000;
-    --nc-bg-2: #111111;
-    --nc-bg-3: #222222;
-    --nc-lk-1: #00BFFF;
-    --nc-lk-2: #0D98BA;
-    --nc-lk-tx: #FFFFFF;
-    --nc-ac-1: #7928CA;
-    --nc-ac-tx: #FFFFFF;
-    --custom-bk-code: #ccc;
-    --custom-tx-code: #888
-  }
-} */
-
 export const GlobalStyle = createGlobalStyle`
   :root {
-    --nc-tx-1: rgb(40, 40, 40);
-    --nc-tx-2: rgb(66, 78, 88);
-    --nc-lk-1: rgb(155, 77, 202);
-    --nc-lk-2: rgb(96, 108, 118);
-    --nc-lk-tx: #FFFFFF;
-    --nc-bg-1: #FFFFFF;
-    --nc-bg-2: #F8F8F8;
-    --nc-bg-3: #FFFFFF;
-    --nc-ac-1: rgb(155, 77, 202);
-    --nc-ac-tx: #fff;
-    --custom-bk-code: #f0f0f0
+    ${({ theme }) => theme.variables};
   }
 
+
   body {
     font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
       'Lucida Grande', sans-serif;
@@ -74,9 +48,19 @@ export const GlobalStyle = createGlobalStyle`
 
 export default styled.div`
   nav {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    @media (max-width: 640px) {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
     box-sizing: border-box;
     width: 100%;
     padding: 1rem;
+    position: relative;
 
     @media screen and (min-width: 30em) {
       padding: 2rem;
@@ -120,6 +104,23 @@ export default styled.div`
       transition: opacity 0.15s ease-in;
       text-decoration: underline;
     }
+    button {
+      color: var(--nc-lk-2);
+      font-size: 12px;
+
+      &,
+      :hover,
+      :active,
+      :focus {
+        opacity: 0.7;
+        margin-left: auto;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 25px;
+        overflow: hidden;
+        background-color: transparent;
+      }
+    }
   }
 
   h1,

src/helpers/use-dark-mode.js

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react'
+
+const preference =
+  typeof window !== 'undefined' &&
+  window.matchMedia &&
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+
+const saved =
+  typeof window !== 'undefined' && window.localStorage.getItem('theme')
+
+export const useDarkMode = () => {
+  const [theme, setTheme] = useState(saved ? saved : preference)
+
+  const themeToggler = useCallback(() => {
+    setTheme(theme => {
+      const newTheme = theme === 'light' ? 'dark' : 'light'
+      typeof window !== 'undefined' &&
+        window.localStorage.setItem('theme', newTheme)
+      return newTheme
+    })
+  }, [])
+
+  return [theme, themeToggler]
+}

src/pages/_app.js

@@ -1,16 +1,48 @@
 import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import { useDarkMode } from '../helpers/use-dark-mode'
 import AppStyles, { GlobalStyle } from '../helpers/styles'
 import Nav from '../components/Nav'
 
-const App = ({ Component, pageProps }) => (
-  <>
-    <GlobalStyle />
-    <AppStyles>
-      <Nav />
-      <Component {...pageProps} />
-    </AppStyles>
-    <div id="modal-root"></div>
-  </>
-)
+const lightTheme = {
+  variables: `
+    --nc-tx-1: rgb(40, 40, 40);
+    --nc-tx-2: rgb(66, 78, 88);
+    --nc-lk-1: rgb(155, 77, 202);
+    --nc-lk-2: rgb(96, 108, 118);
+    --nc-bg-1: #FFFFFF;
+    --nc-bg-2: #F8F8F8;
+    --nc-bg-3: #e8e8e8;
+    --custom-bk-code: #f0f0f0
+  `,
+}
+
+const darkTheme = {
+  variables: `
+    --nc-tx-1: #e8e8e8;
+    --nc-tx-2: #ccc;
+    --nc-bg-1: #111111;
+    --nc-bg-2: #181818;
+    --nc-bg-3: #3a3a3a;
+    --nc-lk-1: #99BFFF;
+    --nc-lk-2: rgb(176, 188, 198);
+    --custom-bk-code: #ccc;
+  `,
+}
+
+const App = ({ Component, pageProps }) => {
+  const [theme, themeToggler] = useDarkMode()
+
+  return (
+    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
+      <GlobalStyle />
+      <AppStyles>
+        <Nav themeToggler={themeToggler} />
+        <Component {...pageProps} />
+      </AppStyles>
+      <div id="modal-root"></div>
+    </ThemeProvider>
+  )
+}
 
 export default App

src/pages/_document.js

@@ -16,12 +16,12 @@ export default class MyDocument extends Document {
       const initialProps = await Document.getInitialProps(ctx)
       return {
         ...initialProps,
-        styles: [
+        styles: (
           <>
             {initialProps.styles}
             {sheet.getStyleElement()}
-          </>,
-        ],
+          </>
+        ),
       }
     } finally {
       sheet.seal()