feat: adjust theme

src/components/layout/use-custom-theme.ts

@@ -2,7 +2,7 @@ import useSWR from "swr";
 import { useMemo } from "react";
 import { createTheme } from "@mui/material";
 import { getVergeConfig } from "../../services/cmds";
-import { defaultTheme as dt } from "../../pages/_theme";
+import { defaultTheme, defaultDarkTheme } from "../../pages/_theme";
 
 /**
  * custome theme
@@ -13,14 +13,9 @@ export default function useCustomTheme() {
 
   const theme = useMemo(() => {
     const mode = theme_mode ?? "light";
-    // const background = mode === "light" ? "#f5f5f5" : "#000";
-    const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
-
-    const rootEle = document.documentElement;
-    rootEle.style.background = "transparent";
-    rootEle.style.setProperty("--selection-color", selectColor);
 
     const setting = theme_setting || {};
+    const dt = mode === "light" ? defaultTheme : defaultDarkTheme;
 
     const theme = createTheme({
       breakpoints: {
@@ -47,6 +42,16 @@ export default function useCustomTheme() {
       },
     });
 
+    // css
+    const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
+    const scrollColor = mode === "light" ? "#90939980" : "#54545480";
+
+    const rootEle = document.documentElement;
+    rootEle.style.background = "transparent";
+    rootEle.style.setProperty("--selection-color", selectColor);
+    rootEle.style.setProperty("--scroller-color", scrollColor);
+    rootEle.style.setProperty("--primary-main", theme.palette.primary.main);
+
     // inject css
     let style = document.querySelector("style#verge-theme");
     if (!style) {

src/components/profile/profile-item.tsx

@@ -165,8 +165,8 @@ const ProfileItem = (props: Props) => {
           const color = {
             "light-true": text.secondary,
             "light-false": text.secondary,
-            "dark-true": alpha(text.secondary, 0.6),
-            "dark-false": alpha(text.secondary, 0.6),
+            "dark-true": alpha(text.secondary, 0.75),
+            "dark-false": alpha(text.secondary, 0.75),
           }[key]!;
 
           const h2color = {

src/components/setting/setting-theme.tsx

@@ -13,9 +13,10 @@ import {
   ListItemText,
   styled,
   TextField,
+  useTheme,
 } from "@mui/material";
 import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
-import { defaultTheme } from "../../pages/_theme";
+import { defaultTheme, defaultDarkTheme } from "../../pages/_theme";
 
 interface Props {
   open: boolean;
@@ -71,15 +72,22 @@ const SettingTheme = (props: Props) => {
     }
   });
 
-  const renderItem = (label: string, key: keyof typeof defaultTheme) => {
+  // default theme
+  const { palette } = useTheme();
+
+  const dt = palette.mode === "light" ? defaultTheme : defaultDarkTheme;
+
+  type ThemeKey = keyof typeof theme & keyof typeof defaultTheme;
+
+  const renderItem = (label: string, key: ThemeKey) => {
     return (
       <Item>
         <ListItemText primary={label} />
-        <Round sx={{ background: theme[key] || defaultTheme[key] }} />
+        <Round sx={{ background: theme[key] || dt[key] }} />
         <TextField
           {...textProps}
           value={theme[key] ?? ""}
-          placeholder={defaultTheme[key]}
+          placeholder={dt[key]}
           onChange={handleChange(key)}
           onKeyDown={(e) => e.key === "Enter" && onSave()}
         />