refactor: ui theme

src/assets/styles/layout.scss

@@ -18,7 +18,7 @@
 
     .the-logo {
       position: relative;
-      flex: 0 1 180px;
+      flex: 0 1 168px;
       width: 100%;
       max-width: 168px;
       max-height: 168px;
@@ -27,8 +27,11 @@
       text-align: center;
       box-sizing: border-box;
 
-      img {
+      img,
+      svg {
         width: 100%;
+        height: 100%;
+        pointer-events: none;
       }
 
       .the-newbtn {

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

@@ -0,0 +1,49 @@
+import useSWR from "swr";
+import { useMemo } from "react";
+import { createTheme } from "@mui/material";
+import { getVergeConfig } from "../../services/cmds";
+
+/**
+ * wip: custome theme
+ */
+export default function useCustomTheme() {
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
+  const mode = data?.theme_mode ?? "light";
+
+  const theme = useMemo(() => {
+    // 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 theme = createTheme({
+      breakpoints: {
+        values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
+      },
+      palette: {
+        mode,
+        primary: { main: "#5b5c9d" },
+        text: { primary: "#637381", secondary: "#909399" },
+      },
+    });
+
+    const { palette } = theme;
+
+    setTimeout(() => {
+      const dom = document.querySelector("#Gradient2");
+      if (dom) {
+        dom.innerHTML = `
+        <stop offset="0%" stop-color="${palette.primary.main}" />
+        <stop offset="80%" stop-color="${palette.primary.dark}" />
+        <stop offset="100%" stop-color="${palette.primary.dark}" />
+        `;
+      }
+    }, 0);
+
+    return theme;
+  }, [mode]);
+
+  return { theme };
+}

src/components/layout/use-traffic-graph.ts

@@ -1,19 +1,17 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+import { useTheme } from "@mui/material";
 
 const minPoint = 10;
 const maxPoint = 36;
 
-const refLineAlpha = 0.5;
+const refLineAlpha = 1;
 const refLineWidth = 2;
-const refLineColor = "#ccc";
 
 const upLineAlpha = 0.6;
 const upLineWidth = 4;
-const upLineColor = "#9c27b0";
 
 const downLineAlpha = 1;
 const downLineWidth = 4;
-const downLineColor = "#5b5c9d";
 
 /**
  * draw the traffic graph
@@ -24,11 +22,23 @@ export default function useTrafficGraph() {
   const styleRef = useRef(true);
   const canvasRef = useRef<HTMLCanvasElement>(null!);
 
+  const { palette } = useTheme();
+  const paletteRef = useRef(palette);
+
+  useEffect(() => {
+    paletteRef.current = palette;
+  }, [palette]);
+
   const drawGraph = () => {
     const canvas = canvasRef.current!;
 
     if (!canvas) return;
 
+    const { primary, secondary, divider } = paletteRef.current;
+    const refLineColor = divider || "rgba(0, 0, 0, 0.12)";
+    const upLineColor = secondary.main || "#9c27b0";
+    const downLineColor = primary.main || "#5b5c9d";
+
     const context = canvas.getContext("2d")!;
     const width = canvas.width;
     const height = canvas.height;

src/main.tsx

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
 import "./assets/styles/index.scss";
 
 import React from "react";

src/pages/_layout.tsx

@@ -2,20 +2,21 @@ import dayjs from "dayjs";
 import i18next from "i18next";
 import relativeTime from "dayjs/plugin/relativeTime";
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Route, Routes } from "react-router-dom";
-import { alpha, createTheme, List, Paper, ThemeProvider } from "@mui/material";
+import { alpha, List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
 import { appWindow } from "@tauri-apps/api/window";
 import { routers } from "./_routers";
 import { getAxios } from "../services/api";
 import { getVergeConfig } from "../services/cmds";
-import LogoSvg from "../assets/image/logo.svg";
+import { ReactComponent as LogoSvg } from "../assets/image/logo.svg";
 import LayoutItem from "../components/layout/layout-item";
 import LayoutControl from "../components/layout/layout-control";
 import LayoutTraffic from "../components/layout/layout-traffic";
 import UpdateButton from "../components/layout/update-button";
+import useCustomTheme from "../components/layout/use-custom-theme";
 import getSystem from "../utils/get-system";
 import "dayjs/locale/zh-cn";
 
@@ -26,10 +27,11 @@ const OS = getSystem();
 const Layout = () => {
   const { t } = useTranslation();
   const { mutate } = useSWRConfig();
-  const { data } = useSWR("getVergeConfig", getVergeConfig);
 
-  const blur = !!data?.theme_blur;
-  const mode = data?.theme_mode ?? "light";
+  const { theme } = useCustomTheme();
+
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_blur, language } = vergeConfig || {};
 
   useEffect(() => {
     window.addEventListener("keydown", (e) => {
@@ -48,37 +50,11 @@ const Layout = () => {
   }, []);
 
   useEffect(() => {
-    if (data?.language) {
-      dayjs.locale(data.language === "zh" ? "zh-cn" : data.language);
-      i18next.changeLanguage(data.language);
+    if (language) {
+      dayjs.locale(language === "zh" ? "zh-cn" : language);
+      i18next.changeLanguage(language);
     }
-  }, [data?.language]);
-
-  const theme = useMemo(() => {
-    // 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);
-
-    return createTheme({
-      breakpoints: {
-        values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
-      },
-      palette: {
-        mode,
-        primary: { main: "#5b5c9d" },
-        text: { primary: "#637381", secondary: "#909399" },
-      },
-    });
-  }, [mode]);
-
-  const onDragging = (e: any) => {
-    if (e?.target?.dataset?.windrag) {
-      appWindow.startDragging();
-    }
-  };
+  }, [language]);
 
   return (
     <SWRConfig value={{}}>
@@ -87,20 +63,22 @@ const Layout = () => {
           square
           elevation={0}
           className={`${OS} layout`}
-          onPointerDown={onDragging}
+          onPointerDown={(e: any) => {
+            if (e.target?.dataset?.windrag) appWindow.startDragging();
+          }}
           onContextMenu={(e) => {
             // only prevent it on Windows
             if (OS === "windows") e.preventDefault();
           }}
           sx={[
-            (theme) => ({
-              bgcolor: alpha(theme.palette.background.paper, blur ? 0.85 : 1),
+            ({ palette }) => ({
+              bgcolor: alpha(palette.background.paper, theme_blur ? 0.85 : 1),
             }),
           ]}
         >
           <div className="layout__left" data-windrag>
             <div className="the-logo" data-windrag>
-              <img src={LogoSvg} alt="" data-windrag />
+              <LogoSvg />
 
               <UpdateButton className="the-newbtn" />
             </div>