feat(web): add dark mode support (#891) (#900)

Author: genie88

.gitignore

@@ -30,4 +30,5 @@ docs/.vitepress/.temp
 .idea/
 
 update-changelog.sh
-runtimes/nodejs-esm
+runtimes/nodejs-esm
+yarn.lock

web/public/locales/en/translation.json

@@ -267,6 +267,7 @@
   "Back": "Return",
   "Personal Access Token": "Personal Access Token",
   "SwitchLanguage": "Switch Language",
+  "SwitchColorMode": "Switch ColorMode",
   "Storage": "Storage",
   "upload example": "file upload",
   "Unit": {

web/public/locales/zh-CN/translation.json

@@ -267,6 +267,7 @@
   "Back": "返回",
   "Personal Access Token": "访问凭证 (PAT)",
   "SwitchLanguage": "切换语言",
+  "SwitchColorMode": "切换颜色模式",
   "Storage": "云存储",
   "upload example": "文件上传示例",
   "Unit": {

web/public/locales/zh/translation.json

@@ -267,6 +267,7 @@
   "Back": "返回",
   "Personal Access Token": "访问凭证 (PAT)",
   "SwitchLanguage": "切换语言",
+  "SwitchColorMode": "切换颜色模式",
   "Storage": "云存储",
   "upload example": "文件上传示例",
   "Unit": {

web/src/App.css

@@ -11,10 +11,12 @@
   width: 4px;
   height: 6px;
 }
+
 /* 滚动槽 */
 ::-webkit-scrollbar-track {
   border-radius: 2px;
 }
+
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
@@ -26,15 +28,24 @@ body {
   height: 100%;
 }
 
+/* oevrrides chakra default value */
 body {
-  background-color: #f1f3f5 !important;
-  background-image: url("/bg.png") !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
   background-position: center !important;
   font-size: 12px;
 }
 
+[data-theme=light] body {
+  background-color: #f1f3f5 !important;
+  background-image: url("/bg.png") !important;
+}
+
+[data-theme=dark] ::-webkit-scrollbar-thumb {
+  /* 滚动条滑块 */
+  background: rgba(21, 22, 26, 0.4);
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -48,8 +59,9 @@ a {
   html {
     color-scheme: dark;
   }
+
   body {
     color: white;
     background: black;
   }
-}
+}

web/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter, useRoutes } from "react-router-dom";
 import { ChakraProvider } from "@chakra-ui/react";
@@ -7,6 +8,7 @@ import { ClickToComponent } from "click-to-react-component";
 import "@/utils/i18n";
 
 import theme from "./chakraTheme";
+import darkTheme from "./chakraThemeDark";
 import routes from "./routes";
 
 import "./App.css";
@@ -30,11 +32,23 @@ const queryClient = new QueryClient({
 function APP() {
   useTranslation();
 
+  const [colorMode, setColorMode] = useState(localStorage.getItem("chakra-ui-color-mode"));
+  useEffect(() => {
+    function onColorModeChange() {
+      const colorMode = localStorage.getItem("chakra-ui-color-mode");
+      setColorMode(colorMode);
+    }
+    window.addEventListener("ColorModeChange", onColorModeChange);
+    return () => {
+      window.removeEventListener("ColorModeChange", onColorModeChange);
+    };
+  });
+
   return (
     <>
       <QueryClientProvider client={queryClient}>
         {process.env.NODE_ENV === "development" ? <ClickToComponent /> : null}
-        <ChakraProvider theme={theme}>
+        <ChakraProvider theme={colorMode === "light" ? theme : darkTheme}>
           <BrowserRouter>
             <RouteElement />
           </BrowserRouter>

web/src/chakraTheme.ts

@@ -323,6 +323,8 @@ const Menu = {
 };
 
 const theme = extendTheme({
+  initialColorMode: "dark", // 'dark | 'light'
+  useSystemColorMode: false,
   fontSizes: {
     sm: "12px",
     base: "12px",
@@ -424,4 +426,5 @@ const theme = extendTheme({
     Menu,
   },
 });
+
 export default theme;