Dark mode (#223)

* dark mode * highlightjs dark mode * fix top button visibility in dark mode
cedmax · Mar 17, 2024 · 2403496 · 2403496
1 parent dc6f37b
commit 2403496
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 46 deletions.
diff --git a/src/components/CodeComparison.js b/src/components/CodeComparison.js
@@ -41,7 +41,7 @@ const NotesLinks = styled.div`
   }
 
   code {
-    color: black;
+    color: var(--nc-tx-1);
     background: var(--custom-bk-code);
     border-radius: 7px;
     padding: 3px 5px;

diff --git a/src/components/LibPage.js b/src/components/LibPage.js
@@ -92,7 +92,21 @@ export default memo(({ data: initialData, frw }) => {
         </Row>
       ))}
 
-      <ScrollToTop style={{ fontSize: 26, bottom: 30 }} showUnder={160}>
+      <ScrollToTop
+        style={{
+          fontSize: 23,
+          bottom: 30,
+          background: 'rgba(255, 255, 255, .5)',
+          borderRadius: 5,
+          aspectRatio: 1,
+          height: 30,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          border: '1px solid var(--nc-bg-3)',
+        }}
+        showUnder={160}
+      >
         <span role="img" aria-label="Go To Top">
           🔝
         </span>

diff --git a/src/components/Nav.js b/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>
   )
 })
diff --git a/src/helpers/styles.js b/src/helpers/styles.js
@@ -1,39 +1,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 +47,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 +103,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,

diff --git a/src/helpers/use-dark-mode.js b/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]
+}
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,16 +1,64 @@
-import React from 'react'
+import React, { useEffect } 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: #282c34;
+  `,
+}
+
+const App = ({ Component, pageProps }) => {
+  const [theme, themeToggler] = useDarkMode()
+
+  useEffect(() => {
+    let link = document.getElementById('highlightjs-css')
+    if (!link) {
+      link = document.createElement('link')
+      link.id = 'highlightjs-css'
+      link.rel = 'stylesheet'
+      const head = document.getElementsByTagName('head')[0]
+      head.appendChild(link)
+    }
+
+    const themefile = theme === 'light' ? 'xcode' : 'hybrid'
+    link.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/${themefile}.min.css`
+
+    // import 'highlight.js/styles/xcode.css'
+  }, [theme])
+
+  return (
+    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
+      <GlobalStyle />
+      <AppStyles>
+        <Nav themeToggler={themeToggler} />
+        <Component {...pageProps} />
+      </AppStyles>
+      <div id="modal-root"></div>
+    </ThemeProvider>
+  )
+}
 
 export default App
diff --git a/src/pages/_document.js b/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()