fix(web): fix some dark mode ui bugs (#919)

labring · Mar 17, 2023 · f9e1781 · f9e1781
1 parent 463a1bb
commit f9e1781
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 17 deletions.
diff --git a/web/src/components/DependenceList/index.module.scss b/web/src/components/DependenceList/index.module.scss
@@ -13,14 +13,5 @@
     span {
       vertical-align: middle;
     }
-
-    &:hover,
-    &.active {
-      background-color: var(--chakra-colors-primary-100);
-    }
-
-    &.active {
-      background-color: var(--chakra-colors-primary-300);
-    }
   }
-}
+}
diff --git a/web/src/components/DependenceList/index.tsx b/web/src/components/DependenceList/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
 import styles from "./index.module.scss";
@@ -20,11 +21,17 @@ function Item(props: {
   onClick: () => void;
 }) {
   const { children, isActive, onClick, className, style } = props;
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
+
   return (
     <li
       style={style || {}}
       className={clsx(className, {
-        [styles.active]: isActive,
+        "bg-primary-100": !darkMode && isActive,
+        "hover:bg-primary-100": !darkMode,
+        "hover:bg-lafDark-100": darkMode,
+        "bg-lafDark-100": darkMode && isActive,
       })}
       onClick={onClick}
     >

diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx
@@ -55,8 +55,22 @@ monaco?.editor.defineTheme("lafEditorThemeDark", {
     },
   ],
   colors: {
+    // https://github.com/microsoft/monaco-editor/discussions/3838
     "editor.foreground": "#ffffff",
     "editor.background": "#202631",
+    "editorIndentGuide.activeBackground": "#fff",
+    "editorIndentGuide.background": "#eee",
+    "editor.selectionBackground": "#101621",
+    "menu.selectionBackground": "#101621",
+    "dropdown.background": "#1a202c",
+    "dropdown.foreground": "#f0f0f0",
+    "dropdown.border": "#fff",
+    "quickInputList.focusBackground": "#1a202c",
+    "editorWidget.background": "#1a202c",
+    "editorWidget.foreground": "#f0f0f0",
+    "editorWidget.border": "#1a202c",
+    "input.background": "#1a202c",
+    "list.hoverBackground": "#2a303c",
   },
 });
 

diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -291,7 +291,6 @@ const AddDependenceModal = () => {
                   />
                   <Input
                     rounded={"full"}
-                    bg={"gray.100"}
                     onChange={(e: any) => {
                       search(e.target.value);
                     }}

diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -32,7 +32,7 @@ const AppEnvList = () => {
         <div className="flex h-[50px] flex-none justify-between">
           <HStack spacing={2}>
             <Box
-              className={clsx("text-xl text-grayModern-900 font-medium", {
+              className={clsx("text-xl font-medium", {
                 "text-grayModern-100": darkMode,
               })}
             >

diff --git a/web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx b/web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx
@@ -1,6 +1,15 @@
 import { useForm } from "react-hook-form";
 import { MdKeyboardArrowLeft } from "react-icons/md";
-import { Button, FormControl, FormErrorMessage, FormLabel, Input, VStack } from "@chakra-ui/react";
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  useColorMode,
+  VStack,
+} from "@chakra-ui/react";
+import clsx from "clsx";
 import { t } from "i18next";
 
 export default function AuthDetail(props: { onBack: () => void }) {
@@ -17,6 +26,9 @@ export default function AuthDetail(props: { onBack: () => void }) {
     formState: { errors },
   } = useForm<FormData>();
 
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
+
   const onSubmit = async (data: any) => {};
   return (
     <>
@@ -33,7 +45,13 @@ export default function AuthDetail(props: { onBack: () => void }) {
         </span>
       </p>
       <div className="flex-grow w-full flex flex-col justify-around">
-        <p className="text-grayModern-900 text-xl text-center mb-6">{t("SettingPanel.Auth")}</p>
+        <p
+          className={clsx("text-xl text-center mb-6", {
+            "text-grayModern-900": !darkMode,
+          })}
+        >
+          {t("SettingPanel.Auth")}
+        </p>
         <VStack spacing={6} align="flex-start" className="w-[48%] mx-auto">
           <FormControl isRequired isInvalid={!!errors?.tel} className="relative">
             <div className="flex relative">

diff --git a/web/src/pages/app/setting/UserInfo/index.tsx b/web/src/pages/app/setting/UserInfo/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Avatar, Box, HStack } from "@chakra-ui/react";
+import { Avatar, Box, HStack, useColorMode } from "@chakra-ui/react";
+import clsx from "clsx";
 import { t } from "i18next";
 
 import { formatDate } from "@/utils/format";
@@ -11,6 +12,8 @@ export default function UserInfo() {
   const [showAuth, setShowAuth] = useState(false);
 
   const { userInfo } = useGlobalStore((state) => state);
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
 
   return (
     <div className="h-full flex flex-col items-center justify-center">
@@ -31,7 +34,11 @@ export default function UserInfo() {
               color="white"
               boxShadow="base"
             />
-            <p className="text-center text-3xl font-medium text-grayModern-900 mb-2">
+            <p
+              className={clsx("text-center text-3xl font-medium mb-2", {
+                "text-grayModern-900": !darkMode,
+              })}
+            >
               {userInfo?.username}
             </p>
             {/* <span className="inline-block px-2 h-[24px]  rounded-full border border-grayModern-400 text-grayModern-400 pt-[1px]">