feat: adjust theme

src/assets/styles/index.scss

@@ -11,6 +11,7 @@ body {
   --primary-main: #5b5c9d;
   --text-primary: #637381;
   --selection-color: #f5f5f5;
+  --scroller-color: #90939980;
 }
 
 ::selection {
@@ -25,7 +26,7 @@ body {
 }
 *::-webkit-scrollbar-thumb {
   border-radius: 6px;
-  background-color: rgba(#909399, 0.5);
+  background-color: var(--scroller-color);
 }
 
 @import "./layout.scss";

src/assets/styles/layout.scss

@@ -10,7 +10,7 @@
     height: 100%;
     max-width: 225px;
     min-width: 125px;
-    padding: 8px 0;
+    padding: 16px 0 8px;
     flex-direction: column;
     box-sizing: border-box;
     user-select: none;
@@ -23,14 +23,14 @@
       max-width: 168px;
       max-height: 168px;
       margin: 0 auto;
-      padding: 0 8px;
+      padding: 0 16px;
       text-align: center;
       box-sizing: border-box;
 
       img,
       svg {
-        width: 100%;
-        height: 100%;
+        width: 96%;
+        height: 96%;
         pointer-events: none;
       }
 
@@ -43,7 +43,7 @@
     }
 
     .the-menu {
-      flex: 1 1 75%;
+      flex: 1 1 80%;
       overflow-y: auto;
       margin-bottom: 8px;
     }

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()}
         />

src/pages/_layout.tsx

@@ -72,7 +72,7 @@ const Layout = () => {
           }}
           sx={[
             ({ palette }) => ({
-              bgcolor: alpha(palette.background.paper, theme_blur ? 0.85 : 1),
+              bgcolor: alpha(palette.background.paper, theme_blur ? 0.8 : 1),
             }),
           ]}
         >
@@ -83,7 +83,7 @@ const Layout = () => {
               <UpdateButton className="the-newbtn" />
             </div>
 
-            <List className="the-menu" data-windrag>
+            <List className="the-menu">
               {routers.map((router) => (
                 <LayoutItem key={router.label} to={router.link}>
                   {t(router.label)}

src/pages/_theme.tsx

@@ -10,3 +10,10 @@ export const defaultTheme = {
   success_color: "#2e7d32",
   font_family: `"Roboto", "Helvetica", "Arial", sans-serif`,
 };
+
+// dark mode
+export const defaultDarkTheme = {
+  ...defaultTheme,
+  primary_text: "#757575",
+  secondary_text: "#637381",
+};