feat: support dark mode

Author: FutabaRio

src/components/ThemeSwitchButton.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@blueprintjs/core'
+
+import { useEffect, useState } from 'react'
+
+export const ThemeSwitchButton = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || '')
+  const handleThemeSwitch = () => {
+    const isCurrentDark = theme === 'dark'
+    setTheme(isCurrentDark ? 'light' : 'dark')
+    localStorage.setItem('theme', isCurrentDark ? 'light' : 'dark')
+  }
+  useEffect(() => {
+    if (theme == 'dark') {
+      document.body.classList.add('bp4-dark')
+      document.body.classList.add('dark')
+    } else {
+      document.body.classList.remove('bp4-dark')
+      document.body.classList.remove('dark')
+    }
+  }, [theme])
+  return (
+    <Button
+      className="mr-4"
+      onClick={handleThemeSwitch}
+      icon={theme === 'dark' ? 'moon' : 'flash'}
+    ></Button>
+  )
+}

src/components/drawer/OperationDrawer.tsx

@@ -5,7 +5,7 @@ export const OperationDrawer: FCC<{
 }> = ({ title, children }) => {
   return (
     <section className="flex flex-col relative h-full">
-      <div className="px-8 py-2 text-lg font-medium flex items-center bg-slate-100 shadow w-full h-12">
+      <div className="px-8 py-2 text-lg font-medium flex items-center bg-slate-100 shadow w-full h-12 dark:bg-slate-900 dark:text-white">
         {title}
       </div>
 

src/components/editor/source/SourceEditor.tsx

@@ -75,7 +75,7 @@ export const SourceEditor: FC<SourceEditorProps> = ({
         />
       }
     >
-      <div className="px-8 py-4 flex-grow flex flex-col bg-zinc-50">
+      <div className="px-8 py-4 flex-grow flex flex-col bg-zinc-50 dark:bg-slate-900 dark:text-white">
         <Callout
           className=" [&_h4]:text-sm"
           intent="primary"
@@ -103,7 +103,7 @@ export const SourceEditor: FC<SourceEditorProps> = ({
           </Tooltip2>
         </div>
         <textarea
-          className="mt-4 p-1 flex-grow bg-white text-xm font-mono resize-none focus:outline focus:outline-2 focus:outline-blue-300"
+          className="mt-4 p-1 flex-grow bg-white text-xm font-mono resize-none focus:outline focus:outline-2 focus:outline-blue-300 dark:bg-slate-900 dark:text-white"
           value={text}
           onChange={(e) => setText(e.target.value)}
           onBlur={(e) => handleChange(e.target.value)}

src/layouts/AppLayout.tsx

@@ -1,10 +1,11 @@
-import { Button, IconName, Tag } from '@blueprintjs/core'
+import { Button, IconName, Navbar, Tag } from '@blueprintjs/core'
 
 import { Link, NavLink } from 'react-router-dom'
 import { FCC } from 'types'
 
 import { AccountManager } from 'components/AccountManager'
 import { BackToTop } from 'components/BackToTop'
+import { ThemeSwitchButton } from 'components/ThemeSwitchButton'
 
 const LINKS: {
   to: string
@@ -23,10 +24,12 @@ const LINKS: {
   },
 ]
 
+// const darkMode = localStorage.getItem('darkMode') === 'true'
+
 export const AppLayout: FCC = ({ children }) => (
-  <div className="flex flex-col h-full w-full bg-zinc-50">
-    <nav className="flex w-full px-8 py-2 items-center bg-zinc-100 shadow fixed h-14 z-10 whitespace-nowrap overflow-x-auto overflow-y-hidden">
-      <Link to="/" className="flex items-center hover:no-underline">
+  <div className="flex flex-col h-full w-full bg-zinc-50 ">
+    <Navbar className="flex w-full px-8 py-2 items-center bg-zinc-100 shadow fixed h-14 z-10 whitespace-nowrap overflow-x-auto overflow-y-hidden">
+      <Link to="/" className="flex items-center hover:no-underline ">
         <div className="select-none text-lg font-bold leading-none">
           MAA Copilot
         </div>
@@ -54,10 +57,11 @@ export const AppLayout: FCC = ({ children }) => (
 
       <div className="flex-1" />
 
+      <ThemeSwitchButton />
       <AccountManager />
-    </nav>
+    </Navbar>
 
-    <div className="pt-14 pb-16">{children}</div>
+    <div className="docs-content-wrapper pt-14 pb-16">{children}</div>
 
     <BackToTop />
   </div>

src/styles/blueprint.less

@@ -233,3 +233,17 @@ body {
     @apply select-none;
   }
 }
+
+
+.bp4-dark {
+  .docs-content-wrapper {
+    background-color: #2f343c;
+  }
+  .bp4-tag{
+    background-color: #141c2b;
+  }
+  div,
+  p,span {
+    color: #fff;
+  }
+}

tailwind.config.js

@@ -12,5 +12,6 @@ module.exports = {
       },
     },
   },
+  darkMode: 'class',
   plugins: [],
 }