v0.0.28

.github/workflows/ci.yml

@@ -106,7 +106,7 @@ jobs:
       - name: Yarn install
         run: yarn install
 
-      - name: Release update.json
+      - name: Release updater file
-        run: yarn run release
+        run: yarn run updater
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/updater.yml

@@ -0,0 +1,32 @@
+name: Updater CI
+
+on: workflow_dispatch
+
+jobs:
+  release-update:
+    runs-on: macos-latest
+    if: startsWith(github.repository, 'zzzgydi')
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Get yarn cache dir path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Yarn Cache
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Release updater file
+        run: yarn run updater
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -12,7 +12,8 @@ A <a href="https://github.com/Dreamacro/clash">Clash</a> GUI based on <a href="h
 ## Features
 
 - Full `clash` config supported, Partial `clash premium` config supported.
-- Profiles management and enhancement (by yaml and Javascript).
+- Profiles management and enhancement (by yaml and Javascript). [Doc](https://github.com/zzzgydi/clash-verge/issues/12)
+- Simple UI and supports custom theme color.
 - System proxy setting and guard.
 
 ## Install
@@ -64,6 +65,17 @@ yarn build
   <img src="./docs/demo6.png" alt="demo6" width="32%" />
 </div>
 
+### Custom Theme
+
+<div align="center">
+  <img src="./docs/color1.png" alt="demo1" width="16%" />
+  <img src="./docs/color2.png" alt="demo2" width="16%" />
+  <img src="./docs/color3.png" alt="demo3" width="16%" />
+  <img src="./docs/color4.png" alt="demo4" width="16%" />
+  <img src="./docs/color5.png" alt="demo5" width="16%" />
+  <img src="./docs/color6.png" alt="demo6" width="16%" />
+</div>
+
 ## Disclaimer
 
 This is a learning project for Rust practice.

UPDATELOG.md

@@ -1,3 +1,30 @@
+## v0.0.28
+
+### Features
+
+- enable to use clash config fields (UI)
+
+### Bug Fixes
+
+- remove the character
+- fix some icon color
+
+---
+
+## v0.0.27
+
+### Features
+
+- supports custom theme color
+- tun mode setting control the final config
+
+### Bug Fixes
+
+- fix transition flickers (macOS)
+- reduce proxy page render
+
+---
+
 ## v0.0.26
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "license": "GPL-3.0",
   "scripts": {
     "dev": "tauri dev",
@@ -12,34 +12,35 @@
     "check": "node scripts/check.mjs",
     "green": "node scripts/green.mjs",
     "publish": "node scripts/publish.mjs",
-    "release": "node scripts/release.mjs",
+    "updater": "node scripts/updater.mjs",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.4.4",
+    "@mui/icons-material": "^5.5.1",
-    "@mui/material": "^5.4.4",
+    "@mui/material": "^5.5.3",
-    "@tauri-apps/api": "^1.0.0-rc.2",
+    "@tauri-apps/api": "^1.0.0-rc.3",
-    "ahooks": "^3.1.13",
+    "ahooks": "^3.2.0",
     "axios": "^0.26.0",
-    "dayjs": "^1.10.8",
+    "dayjs": "^1.11.0",
     "i18next": "^21.6.14",
     "monaco-editor": "^0.33.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.6",
     "react-router-dom": "^6.2.2",
-    "react-virtuoso": "^2.7.0",
+    "react-virtuoso": "~2.7.2",
     "recoil": "^0.6.1",
     "snarkdown": "^2.0.0",
-    "swr": "^1.2.1"
+    "swr": "^1.2.2"
   },
   "devDependencies": {
     "@actions/github": "^5.0.0",
-    "@tauri-apps/cli": "^1.0.0-rc.7",
+    "@tauri-apps/cli": "^1.0.0-rc.8",
     "@types/fs-extra": "^9.0.13",
     "@types/js-cookie": "^3.0.1",
+    "@types/lodash": "^4.14.180",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.2.0",
@@ -51,7 +52,8 @@
     "sass": "^1.49.7",
     "typescript": "^4.5.5",
     "vite": "^2.8.6",
-    "vite-plugin-monaco-editor": "^1.0.10"
+    "vite-plugin-monaco-editor": "^1.0.10",
+    "vite-plugin-svgr": "^1.1.0"
   },
   "prettier": {
     "tabWidth": 2,

scripts/updater.mjs

@@ -8,7 +8,7 @@ const UPDATE_JSON_PROXY = "update-proxy.json";
 
 /// generate update.json
 /// upload to update tag's release asset
-async function resolveRelease() {
+async function resolveUpdater() {
   if (process.env.GITHUB_TOKEN === undefined) {
     throw new Error("GITHUB_TOKEN is required");
   }
@@ -38,9 +38,14 @@ async function resolveRelease() {
     notes: await resolveUpdateLog(tag.name), // use updatelog.md
     pub_date: new Date().toISOString(),
     platforms: {
-      win64: { signature: "", url: "" },
+      win64: { signature: "", url: "" }, // compatible with older formats
-      linux: { signature: "", url: "" },
+      linux: { signature: "", url: "" }, // compatible with older formats
-      darwin: { signature: "", url: "" },
+      darwin: { signature: "", url: "" }, // compatible with older formats
+      "darwin-aarch64": { signature: "", url: "" },
+      "darwin-intel": { signature: "", url: "" },
+      "linux-x86_64": { signature: "", url: "" },
+      "windows-x86_64": { signature: "", url: "" },
+      "windows-i686": { signature: "", url: "" }, // no supported
     },
   };
 
@@ -48,36 +53,49 @@ async function resolveRelease() {
     const { name, browser_download_url } = asset;
 
     // win64 url
-    if (/\.msi\.zip$/.test(name)) {
+    if (name.endsWith(".msi.zip")) {
       updateData.platforms.win64.url = browser_download_url;
+      updateData.platforms["windows-x86_64"].url = browser_download_url;
     }
     // win64 signature
-    if (/\.msi\.zip\.sig$/.test(name)) {
+    if (name.endsWith(".msi.zip.sig")) {
-      updateData.platforms.win64.signature = await getSignature(
+      const sig = await getSignature(browser_download_url);
-        browser_download_url
+      updateData.platforms.win64.signature = sig;
-      );
+      updateData.platforms["windows-x86_64"].signature = sig;
     }
 
-    // darwin url
+    // darwin url (intel)
-    if (/\.app\.tar\.gz$/.test(name)) {
+    if (name.endsWith(".app.tar.gz") && !name.includes("aarch")) {
       updateData.platforms.darwin.url = browser_download_url;
+      updateData.platforms["darwin-intel"].url = browser_download_url;
     }
-    // darwin signature
+    // darwin signature (intel)
-    if (/\.app\.tar\.gz\.sig$/.test(name)) {
+    if (name.endsWith(".app.tar.gz.sig") && !name.includes("aarch")) {
-      updateData.platforms.darwin.signature = await getSignature(
+      const sig = await getSignature(browser_download_url);
-        browser_download_url
+      updateData.platforms.darwin.signature = sig;
-      );
+      updateData.platforms["darwin-intel"].signature = sig;
+    }
+
+    // darwin url (aarch)
+    if (name.endsWith("aarch.app.tar.gz")) {
+      updateData.platforms["darwin-aarch64"].url = browser_download_url;
+    }
+    // darwin signature (aarch)
+    if (name.endsWith("aarch.app.tar.gz.sig")) {
+      const sig = await getSignature(browser_download_url);
+      updateData.platforms["darwin-aarch64"].signature = sig;
     }
 
     // linux url
-    if (/\.AppImage\.tar\.gz$/.test(name)) {
+    if (name.endsWith(".AppImage.tar.gz")) {
       updateData.platforms.linux.url = browser_download_url;
+      updateData.platforms["linux-x86_64"].url = browser_download_url;
     }
     // linux signature
-    if (/\.AppImage\.tar\.gz\.sig$/.test(name)) {
+    if (name.endsWith(".AppImage.tar.gz.sig")) {
-      updateData.platforms.linux.signature = await getSignature(
+      const sig = await getSignature(browser_download_url);
-        browser_download_url
+      updateData.platforms.linux.signature = sig;
-      );
+      updateData.platforms["linux-x86_64"].signature = sig;
     }
   });
 
@@ -85,29 +103,24 @@ async function resolveRelease() {
   console.log(updateData);
 
   // maybe should test the signature as well
-  const { darwin, win64, linux } = updateData.platforms;
+  // delete the null field
-  if (!darwin.url) {
+  Object.entries(updateData.platforms).forEach(([key, value]) => {
-    console.log(`[Error]: failed to parse release for darwin`);
+    if (!value.url) {
-    delete updateData.platforms.darwin;
+      console.log(`[Error]: failed to parse release for "${key}"`);
-  }
+      delete updateData.platforms[key];
-  if (!win64.url) {
+    }
-    console.log(`[Error]: failed to parse release for win64`);
+  });
-    delete updateData.platforms.win64;
-  }
-  if (!linux.url) {
-    console.log(`[Error]: failed to parse release for linux`);
-    delete updateData.platforms.linux;
-  }
 
   // 生成一个代理github的更新文件
   // 使用 https://hub.fastgit.xyz/ 做github资源的加速
   const updateDataNew = JSON.parse(JSON.stringify(updateData));
 
-  Object.keys(updateDataNew.platforms).forEach((key) => {
+  Object.entries(updateDataNew.platforms).forEach(([key, value]) => {
-    if (updateDataNew.platforms[key]) {
+    if (value.url) {
-      updateDataNew.platforms[key].url = updateDataNew.platforms[
+      updateDataNew.platforms[key].url = value.url.replace(
-        key
+        "https://github.com/",
-      ].url.replace("https://github.com/", "https://hub.fastgit.xyz/");
+        "https://hub.fastgit.xyz/"
+      );
     } else {
       console.log(`[Error]: updateDataNew.platforms.${key} is null`);
     }
@@ -135,7 +148,7 @@ async function resolveRelease() {
     }
   }
 
-  // upload assets
+  // upload new assets
   await github.rest.repos.uploadReleaseAsset({
     ...options,
     release_id: updateRelease.id,
@@ -161,4 +174,4 @@ async function getSignature(url) {
   return response.text();
 }
 
-resolveRelease().catch(console.error);
+resolveUpdater().catch(console.error);

src-tauri/Cargo.toml

@@ -10,7 +10,7 @@ edition = "2021"
 build = "build.rs"
 
 [build-dependencies]
-tauri-build = { version = "1.0.0-rc.4", features = [] }
+tauri-build = { version = "1.0.0-rc.5", features = [] }
 
 [dependencies]
 anyhow = "1.0"
@@ -22,7 +22,7 @@ chrono = "0.4.19"
 serde_json = "1.0"
 serde_yaml = "0.8"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.0.0-rc.4", features = ["process-all", "shell-all", "system-tray", "updater", "window-all"] }
+tauri = { version = "1.0.0-rc.6", features = ["process-all", "shell-all", "system-tray", "updater", "window-all"] }
 window-shadows = { git = "https://github.com/tauri-apps/window-shadows" }
 window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy" }
 
@@ -42,6 +42,7 @@ winreg = { version = "0.10", features = ["transactions"] }
 default = [ "custom-protocol" ]
 custom-protocol = [ "tauri/custom-protocol" ]
 verge-dev = []
+debug-yml = []
 
 [profile.release]
 panic = "abort"

src-tauri/src/cmds.rs

@@ -125,6 +125,23 @@ pub fn change_profile_chain(
   wrap_err!(clash.activate_enhanced(&profiles, false, false))
 }
 
+/// change the profile valid fields
+#[tauri::command]
+pub fn change_profile_valid(
+  valid: Option<Vec<String>>,
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+  let mut profiles = profiles_state.0.lock().unwrap();
+
+  profiles.put_valid(valid);
+  clash.set_window(app_handle.get_window("main"));
+
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
+}
+
 /// manually exec enhanced profile
 #[tauri::command]
 pub fn enhance_profiles(
@@ -317,16 +334,6 @@ pub fn patch_verge_config(
   let tun_mode = payload.enable_tun_mode.clone();
   let system_proxy = payload.enable_system_proxy.clone();
 
-  // change tun mode
-  if tun_mode.is_some() {
-    let mut clash = clash_state.0.lock().unwrap();
-    let profiles = profiles_state.0.lock().unwrap();
-
-    wrap_err!(clash.tun_mode(tun_mode.unwrap()))?;
-    clash.update_config();
-    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
-  }
-
   let mut verge = verge_state.0.lock().unwrap();
   wrap_err!(verge.patch_config(payload))?;
 
@@ -339,6 +346,23 @@ pub fn patch_verge_config(
       .unwrap();
   }
 
+  // change tun mode
+  if tun_mode.is_some() {
+    #[cfg(target_os = "windows")]
+    if *tun_mode.as_ref().unwrap() {
+      let wintun_dll = dirs::app_home_dir().join("wintun.dll");
+      if !wintun_dll.exists() {
+        log::error!("failed to enable TUN for missing `wintun.dll`");
+        return Err("failed to enable TUN for missing `wintun.dll`".into());
+      }
+    }
+
+    let clash = clash_state.0.lock().unwrap();
+    let profiles = profiles_state.0.lock().unwrap();
+
+    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
+  }
+
   Ok(())
 }
 

src-tauri/src/core/clash.rs

@@ -1,4 +1,4 @@
-use super::{PrfEnhancedResult, Profiles, Verge};
+use super::{PrfEnhancedResult, Profiles, Verge, VergeConfig};
 use crate::log_if_err;
 use crate::utils::{config, dirs, help};
 use anyhow::{bail, Result};
@@ -222,18 +222,8 @@ impl Clash {
     Ok(())
   }
 
-  /// enable tun mode
+  /// revise the `tun` and `dns` config
-  /// only revise the config
+  fn _tun_mode(mut config: Mapping, enable: bool) -> Mapping {
-  pub fn tun_mode(&mut self, enable: bool) -> Result<()> {
-    // Windows 需要wintun.dll文件
-    #[cfg(target_os = "windows")]
-    if enable {
-      let wintun_dll = dirs::app_home_dir().join("wintun.dll");
-      if !wintun_dll.exists() {
-        bail!("failed to enable TUN for missing `wintun.dll`");
-      }
-    }
-
     macro_rules! revise {
       ($map: expr, $key: expr, $val: expr) => {
         let ret_key = Value::String($key.into());
@@ -252,7 +242,7 @@ impl Clash {
     }
 
     // tun config
-    let tun_val = self.config.get(&Value::from("tun"));
+    let tun_val = config.get(&Value::from("tun"));
     let mut new_tun = Mapping::new();
 
     if tun_val.is_some() && tun_val.as_ref().unwrap().is_mapping() {
@@ -260,15 +250,18 @@ impl Clash {
     }
 
     revise!(new_tun, "enable", enable);
-    append!(new_tun, "stack", "gvisor");
-    append!(new_tun, "dns-hijack", vec!["198.18.0.2:53"]);
-    append!(new_tun, "auto-route", true);
-    append!(new_tun, "auto-detect-interface", true);
 
-    revise!(self.config, "tun", new_tun);
+    if enable {
+      append!(new_tun, "stack", "gvisor");
+      append!(new_tun, "dns-hijack", vec!["198.18.0.2:53"]);
+      append!(new_tun, "auto-route", true);
+      append!(new_tun, "auto-detect-interface", true);
+    }
+
+    revise!(config, "tun", new_tun);
 
     // dns config
-    let dns_val = self.config.get(&Value::from("dns"));
+    let dns_val = config.get(&Value::from("dns"));
     let mut new_dns = Mapping::new();
 
     if dns_val.is_some() && dns_val.as_ref().unwrap().is_mapping() {
@@ -277,34 +270,41 @@ impl Clash {
 
     // 借鉴cfw的默认配置
     revise!(new_dns, "enable", enable);
-    append!(new_dns, "enhanced-mode", "fake-ip");
-    append!(
-      new_dns,
-      "nameserver",
-      vec!["114.114.114.114", "223.5.5.5", "8.8.8.8"]
-    );
-    append!(new_dns, "fallback", vec![] as Vec<&str>);
 
-    #[cfg(target_os = "windows")]
+    if enable {
-    append!(
+      append!(new_dns, "enhanced-mode", "fake-ip");
-      new_dns,
+      append!(
-      "fake-ip-filter",
+        new_dns,
-      vec![
+        "nameserver",
-        "dns.msftncsi.com",
+        vec!["114.114.114.114", "223.5.5.5", "8.8.8.8"]
-        "www.msftncsi.com",
+      );
-        "www.msftconnecttest.com"
+      append!(new_dns, "fallback", vec![] as Vec<&str>);
-      ]
-    );
 
-    revise!(self.config, "dns", new_dns);
+      #[cfg(target_os = "windows")]
+      append!(
+        new_dns,
+        "fake-ip-filter",
+        vec![
+          "dns.msftncsi.com",
+          "www.msftncsi.com",
+          "www.msftconnecttest.com"
+        ]
+      );
+    }
 
-    self.save_config()
+    revise!(config, "dns", new_dns);
+    config
   }
 
   /// activate the profile
   /// generate a new profile to the temp_dir
   /// then put the path to the clash core
   fn _activate(info: ClashInfo, config: Mapping, window: Option<Window>) -> Result<()> {
+    let verge_config = VergeConfig::new();
+    let tun_enable = verge_config.enable_tun_mode.unwrap_or(false);
+
+    let config = Clash::_tun_mode(config, tun_enable);
+
     let temp_path = dirs::profiles_temp_path();
     config::save_yaml(temp_path.clone(), &config, Some("# Clash Verge Temp File"))?;
 

src-tauri/src/core/profiles.rs

@@ -316,6 +316,9 @@ pub struct Profiles {
   /// same as PrfConfig.chain
   chain: Option<Vec<String>>,
 
+  /// record valid fields for clash
+  valid: Option<Vec<String>>,
+
   /// profile list
   items: Option<Vec<PrfItem>>,
 }
@@ -399,6 +402,11 @@ impl Profiles {
     self.chain = chain;
   }
 
+  /// just change the `field`
+  pub fn put_valid(&mut self, valid: Option<Vec<String>>) {
+    self.valid = valid;
+  }
+
   /// find the item by the uid
   pub fn get_item(&self, uid: &String) -> Result<&PrfItem> {
     if self.items.is_some() {
@@ -599,9 +607,12 @@ impl Profiles {
       None => vec![],
     };
 
+    let valid = self.valid.clone().unwrap_or(vec![]);
+
     Ok(PrfEnhanced {
       current,
       chain,
+      valid,
       callback,
     })
   }
@@ -613,6 +624,8 @@ pub struct PrfEnhanced {
 
   pub chain: Vec<PrfData>,
 
+  pub valid: Vec<String>,
+
   pub callback: String,
 }
 

src-tauri/src/core/verge.rs

@@ -45,6 +45,25 @@ pub struct VergeConfig {
 
   /// proxy guard duration
   pub proxy_guard_duration: Option<u64>,
+
+  /// theme setting
+  pub theme_setting: Option<VergeTheme>,
+}
+
+#[derive(Default, Debug, Clone, Deserialize, Serialize)]
+pub struct VergeTheme {
+  pub primary_color: Option<String>,
+  pub secondary_color: Option<String>,
+  pub primary_text: Option<String>,
+  pub secondary_text: Option<String>,
+
+  pub info_color: Option<String>,
+  pub error_color: Option<String>,
+  pub warning_color: Option<String>,
+  pub success_color: Option<String>,
+
+  pub font_family: Option<String>,
+  pub css_injection: Option<String>,
 }
 
 impl VergeConfig {
@@ -203,6 +222,9 @@ impl Verge {
     if patch.enable_silent_start.is_some() {
       self.config.enable_silent_start = patch.enable_silent_start;
     }
+    if patch.theme_setting.is_some() {
+      self.config.theme_setting = patch.theme_setting;
+    }
 
     // should update system startup
     if patch.enable_auto_launch.is_some() {

src-tauri/src/main.rs

@@ -119,6 +119,7 @@ fn main() -> std::io::Result<()> {
       cmds::sync_profiles,
       cmds::enhance_profiles,
       cmds::change_profile_chain,
+      cmds::change_profile_valid,
       cmds::read_profile_file,
       cmds::save_profile_file
     ]);
@@ -144,11 +145,14 @@ fn main() -> std::io::Result<()> {
     .build(tauri::generate_context!())
     .expect("error while running tauri application")
     .run(|app_handle, e| match e {
-      tauri::RunEvent::CloseRequested { label, api, .. } => {
+      tauri::RunEvent::WindowEvent { label, event, .. } => match event {
-        let app_handle = app_handle.clone();
+        tauri::WindowEvent::CloseRequested { api, .. } => {
-        api.prevent_close();
+          let app_handle = app_handle.clone();
-        app_handle.get_window(&label).unwrap().hide().unwrap();
+          api.prevent_close();
-      }
+          app_handle.get_window(&label).unwrap().hide().unwrap();
+        }
+        _ => {}
+      },
       tauri::RunEvent::ExitRequested { .. } => {
         resolve::resolve_reset(app_handle);
         api::process::kill_children();

src-tauri/src/utils/dirs.rs

@@ -53,5 +53,9 @@ pub fn profiles_path() -> PathBuf {
 }
 
 pub fn profiles_temp_path() -> PathBuf {
-  temp_dir().join(PROFILE_TEMP)
+  #[cfg(not(feature = "debug-yml"))]
+  return temp_dir().join(PROFILE_TEMP);
+
+  #[cfg(feature = "debug-yml")]
+  return app_home_dir().join(PROFILE_TEMP);
 }

src-tauri/src/utils/resolve.rs

@@ -28,14 +28,6 @@ pub fn resolve_setup(app: &App) {
   log_if_err!(clash.activate_enhanced(&profiles, true, true));
 
   verge.init_sysproxy(clash.info.port.clone());
-  // enable tun mode
-  if verge.config.enable_tun_mode.clone().unwrap_or(false)
-    && verge.cur_sysproxy.is_some()
-    && verge.cur_sysproxy.as_ref().unwrap().enable
-  {
-    log::info!("enable tun mode");
-    clash.tun_mode(true).unwrap();
-  }
 
   log_if_err!(verge.init_launch());
 

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "Clash Verge",
-    "version": "0.0.26"
+    "version": "0.0.28"
   },
   "build": {
     "distDir": "../dist",
@@ -83,7 +83,7 @@
       }
     ],
     "security": {
-      "csp": "script-src 'unsafe-eval' 'self'; default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self'; img-src 'self';"
+      "csp": "script-src 'unsafe-eval' 'self'; default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self'; img-src data: 'self';"
     }
   }
 }

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,79 @@
+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";
+
+/**
+ * custome theme
+ */
+export default function useCustomTheme() {
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_mode, theme_setting } = data ?? {};
+
+  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 theme = createTheme({
+      breakpoints: {
+        values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
+      },
+      palette: {
+        mode,
+        primary: { main: setting.primary_color || dt.primary_color },
+        secondary: { main: setting.secondary_color || dt.secondary_color },
+        info: { main: setting.info_color || dt.info_color },
+        error: { main: setting.error_color || dt.error_color },
+        warning: { main: setting.warning_color || dt.warning_color },
+        success: { main: setting.success_color || dt.success_color },
+        text: {
+          primary: setting.primary_text || dt.primary_text,
+          secondary: setting.secondary_text || dt.secondary_text,
+        },
+      },
+      typography: {
+        // todo
+        fontFamily: setting.font_family
+          ? `${setting.font_family}, ${dt.font_family}`
+          : dt.font_family,
+      },
+    });
+
+    // inject css
+    let style = document.querySelector("style#verge-theme");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "verge-theme";
+      document.head.appendChild(style!);
+    }
+    if (style) {
+      style.innerHTML = setting.css_injection || "";
+    }
+
+    // update svg icon
+    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;
+  }, [theme_mode, theme_setting]);
+
+  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/components/profile/enhanced.tsx

@@ -0,0 +1,221 @@
+import useSWR from "swr";
+import { useState } from "react";
+import { useLockFn } from "ahooks";
+import {
+  Box,
+  Divider,
+  Grid,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+} from "@mui/material";
+import {
+  AddchartRounded,
+  CheckRounded,
+  MenuRounded,
+  RestartAltRounded,
+} from "@mui/icons-material";
+import {
+  getProfiles,
+  deleteProfile,
+  enhanceProfiles,
+  changeProfileChain,
+  changeProfileValid,
+} from "../../services/cmds";
+import { CmdType } from "../../services/types";
+import getSystem from "../../utils/get-system";
+import ProfileMore from "./profile-more";
+import Notice from "../base/base-notice";
+
+interface Props {
+  items: CmdType.ProfileItem[];
+  chain: string[];
+}
+
+const OS = getSystem();
+
+const EnhancedMode = (props: Props) => {
+  const { items, chain } = props;
+
+  const { data, mutate } = useSWR("getProfiles", getProfiles);
+  const valid = data?.valid || [];
+
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+
+  // handler
+  const onEnhance = useLockFn(async () => {
+    try {
+      await enhanceProfiles();
+      Notice.success("Refresh clash config", 2000);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  const onEnhanceEnable = useLockFn(async (uid: string) => {
+    if (chain.includes(uid)) return;
+
+    const newChain = [...chain, uid];
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  const onEnhanceDisable = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = chain.filter((i) => i !== uid);
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  const onEnhanceDelete = useLockFn(async (uid: string) => {
+    try {
+      await onEnhanceDisable(uid);
+      await deleteProfile(uid);
+      mutate();
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
+
+  const onMoveTop = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = [uid].concat(chain.filter((i) => i !== uid));
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  const onMoveEnd = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = chain.filter((i) => i !== uid).concat([uid]);
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  // update valid list
+  const onToggleValid = useLockFn(async (key: string) => {
+    try {
+      const newValid = valid.includes(key)
+        ? valid.filter((i) => i !== key)
+        : valid.concat(key);
+      await changeProfileValid(newValid);
+      mutate();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Box sx={{ mt: 4 }}>
+      <Stack
+        spacing={1}
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        sx={{ mb: 0.5 }}
+      >
+        <IconButton
+          size="small"
+          color="inherit"
+          title="refresh enhanced profiles"
+          onClick={onEnhance}
+        >
+          <RestartAltRounded />
+        </IconButton>
+
+        <IconButton
+          size="small"
+          color="inherit"
+          id="profile-use-button"
+          title="enable clash fields"
+          aria-controls={!!anchorEl ? "profile-use-menu" : undefined}
+          aria-haspopup="true"
+          aria-expanded={!!anchorEl ? "true" : undefined}
+          onClick={(e) => setAnchorEl(e.currentTarget)}
+        >
+          <MenuRounded />
+        </IconButton>
+
+        <Menu
+          id="profile-use-menu"
+          open={!!anchorEl}
+          anchorEl={anchorEl}
+          onClose={() => setAnchorEl(null)}
+          transitionDuration={225}
+          TransitionProps={
+            OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+          }
+          MenuListProps={{
+            dense: true,
+            "aria-labelledby": "profile-use-button",
+          }}
+          onContextMenu={(e) => {
+            setAnchorEl(null);
+            e.preventDefault();
+          }}
+        >
+          <MenuItem>
+            <ListItemIcon color="inherit">
+              <AddchartRounded />
+            </ListItemIcon>
+            Use Clash Fields
+          </MenuItem>
+
+          <Divider />
+
+          {[
+            "tun",
+            "dns",
+            "hosts",
+            "script",
+            "profile",
+            "payload",
+            "interface-name",
+            "routing-mark",
+          ].map((key) => {
+            const has = valid.includes(key);
+
+            return (
+              <MenuItem
+                key={key}
+                sx={{ width: 180 }}
+                onClick={() => onToggleValid(key)}
+              >
+                {has && (
+                  <ListItemIcon color="inherit">
+                    <CheckRounded />
+                  </ListItemIcon>
+                )}
+                <ListItemText inset={!has}>{key}</ListItemText>
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </Stack>
+
+      <Grid container spacing={2}>
+        {items.map((item) => (
+          <Grid item xs={12} sm={6} key={item.file}>
+            <ProfileMore
+              selected={!!chain.includes(item.uid)}
+              itemData={item}
+              enableNum={chain.length}
+              onEnable={() => onEnhanceEnable(item.uid)}
+              onDisable={() => onEnhanceDisable(item.uid)}
+              onDelete={() => onEnhanceDelete(item.uid)}
+              onMoveTop={() => onMoveTop(item.uid)}
+              onMoveEnd={() => onMoveEnd(item.uid)}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default EnhancedMode;

src/components/profile/profile-item.tsx

@@ -20,6 +20,7 @@ import { CmdType } from "../../services/types";
 import { atomLoadingCache } from "../../services/states";
 import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
 import parseTraffic from "../../utils/parse-traffic";
+import getSystem from "../../utils/get-system";
 import ProfileEdit from "./profile-edit";
 import FileEditor from "./file-editor";
 import Notice from "../base/base-notice";
@@ -40,6 +41,8 @@ const round = keyframes`
   to { transform: rotate(360deg); }
 `;
 
+const OS = getSystem();
+
 interface Props {
   selected: boolean;
   itemData: CmdType.ProfileItem;
@@ -267,6 +270,9 @@ const ProfileItem = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
         onContextMenu={(e) => {
           setAnchorEl(null);
           e.preventDefault();

src/components/profile/profile-more.tsx

@@ -13,6 +13,7 @@ import {
 } from "@mui/material";
 import { CmdType } from "../../services/types";
 import { viewProfile } from "../../services/cmds";
+import getSystem from "../../utils/get-system";
 import enhance from "../../services/enhance";
 import ProfileEdit from "./profile-edit";
 import FileEditor from "./file-editor";
@@ -29,15 +30,17 @@ const Wrapper = styled(Box)(({ theme }) => ({
   boxSizing: "border-box",
 }));
 
+const OS = getSystem();
+
 interface Props {
   selected: boolean;
   itemData: CmdType.ProfileItem;
+  enableNum: number;
   onEnable: () => void;
   onDisable: () => void;
   onMoveTop: () => void;
   onMoveEnd: () => void;
   onDelete: () => void;
-  onEnhance: () => void;
 }
 
 // profile enhanced item
@@ -45,12 +48,12 @@ const ProfileMore = (props: Props) => {
   const {
     selected,
     itemData,
+    enableNum,
     onEnable,
     onDisable,
     onMoveTop,
     onMoveEnd,
     onDelete,
-    onEnhance,
   } = props;
 
   const { uid, type } = itemData;
@@ -92,14 +95,15 @@ const ProfileMore = (props: Props) => {
     return fn();
   };
 
+  const showMove = enableNum > 1 && !hasError;
+
   const enableMenu = [
     { label: "Disable", handler: fnWrapper(onDisable) },
-    { label: "Refresh", handler: fnWrapper(onEnhance) },
     { label: "Edit Info", handler: onEditInfo },
     { label: "Edit File", handler: onEditFile },
     { label: "Open File", handler: onOpenFile },
-    { label: "To Top", show: !hasError, handler: fnWrapper(onMoveTop) },
+    { label: "To Top", show: showMove, handler: fnWrapper(onMoveTop) },
-    { label: "To End", show: !hasError, handler: fnWrapper(onMoveEnd) },
+    { label: "To End", show: showMove, handler: fnWrapper(onMoveEnd) },
     { label: "Delete", handler: fnWrapper(onDelete) },
   ];
 
@@ -219,6 +223,9 @@ const ProfileMore = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
         onContextMenu={(e) => {
           setAnchorEl(null);
           e.preventDefault();

src/components/proxy/proxy-global.tsx

@@ -124,18 +124,25 @@ const ProxyGlobal = (props: Props) => {
         <IconButton
           size="small"
           title="location"
+          color="inherit"
           onClick={() => onLocation(true)}
         >
           <MyLocationRounded />
         </IconButton>
 
-        <IconButton size="small" title="check" onClick={onCheckAll}>
+        <IconButton
+          size="small"
+          title="delay check"
+          color="inherit"
+          onClick={onCheckAll}
+        >
           <NetworkCheckRounded />
         </IconButton>
 
         <IconButton
           size="small"
-          title="check"
+          title="proxy detail"
+          color="inherit"
           onClick={() => setShowType(!showType)}
         >
           {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
@@ -143,7 +150,8 @@ const ProxyGlobal = (props: Props) => {
 
         <IconButton
           size="small"
-          title="check"
+          title="filter"
+          color="inherit"
           onClick={() => setShowFilter(!showFilter)}
         >
           {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}

src/components/proxy/proxy-group.tsx

@@ -149,18 +149,25 @@ const ProxyGroup = ({ group }: Props) => {
           <IconButton
             size="small"
             title="location"
+            color="inherit"
             onClick={() => onLocation(true)}
           >
             <MyLocationRounded />
           </IconButton>
 
-          <IconButton size="small" title="check" onClick={onCheckAll}>
+          <IconButton
+            size="small"
+            title="delay check"
+            color="inherit"
+            onClick={onCheckAll}
+          >
             <NetworkCheckRounded />
           </IconButton>
 
           <IconButton
             size="small"
-            title="check"
+            title="proxy detail"
+            color="inherit"
             onClick={() => setShowType(!showType)}
           >
             {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
@@ -168,7 +175,8 @@ const ProxyGroup = ({ group }: Props) => {
 
           <IconButton
             size="small"
-            title="check"
+            title="filter"
+            color="inherit"
             onClick={() => setShowFilter(!showFilter)}
           >
             {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
@@ -176,7 +184,6 @@ const ProxyGroup = ({ group }: Props) => {
 
           {showFilter && (
             <TextField
-              autoFocus
               hiddenLabel
               value={filterText}
               size="small"

src/components/setting/setting-theme.tsx

@@ -0,0 +1,146 @@
+import useSWR from "swr";
+import { useEffect, useState } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemText,
+  styled,
+  TextField,
+} from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { defaultTheme } from "../../pages/_theme";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onError?: (err: Error) => void;
+}
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));
+
+const Round = styled("div")(() => ({
+  width: "24px",
+  height: "24px",
+  borderRadius: "18px",
+  display: "inline-block",
+  marginRight: "8px",
+}));
+
+const SettingTheme = (props: Props) => {
+  const { open, onClose, onError } = props;
+
+  const { t } = useTranslation();
+  const { data: vergeConfig, mutate } = useSWR(
+    "getVergeConfig",
+    getVergeConfig
+  );
+
+  const { theme_setting } = vergeConfig ?? {};
+  const [theme, setTheme] = useState(theme_setting || {});
+
+  useEffect(() => {
+    setTheme({ ...theme_setting } || {});
+  }, [theme_setting]);
+
+  const textProps = {
+    size: "small",
+    autoComplete: "off",
+    sx: { width: 135 },
+  } as const;
+
+  const handleChange = (field: keyof typeof theme) => (e: any) => {
+    setTheme((t) => ({ ...t, [field]: e.target.value }));
+  };
+
+  const onSave = useLockFn(async () => {
+    try {
+      await patchVergeConfig({ theme_setting: theme });
+      mutate();
+      onClose();
+    } catch (err: any) {
+      onError?.(err);
+    }
+  });
+
+  const renderItem = (label: string, key: keyof typeof defaultTheme) => {
+    return (
+      <Item>
+        <ListItemText primary={label} />
+        <Round sx={{ background: theme[key] || defaultTheme[key] }} />
+        <TextField
+          {...textProps}
+          value={theme[key] ?? ""}
+          placeholder={defaultTheme[key]}
+          onChange={handleChange(key)}
+          onKeyDown={(e) => e.key === "Enter" && onSave()}
+        />
+      </Item>
+    );
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t("Theme Setting")}</DialogTitle>
+
+      <DialogContent
+        sx={{ width: 400, maxHeight: 300, overflow: "auto", pb: 0 }}
+      >
+        <List sx={{ pt: 0 }}>
+          {renderItem("Primary Color", "primary_color")}
+
+          {renderItem("Secondary Color", "secondary_color")}
+
+          {renderItem("Primary Text", "primary_text")}
+
+          {renderItem("Secondary Text", "secondary_text")}
+
+          {renderItem("Info Color", "info_color")}
+
+          {renderItem("Error Color", "error_color")}
+
+          {renderItem("Warning Color", "warning_color")}
+
+          {renderItem("Success Color", "success_color")}
+
+          <Item>
+            <ListItemText primary="Font Family" />
+            <TextField
+              {...textProps}
+              value={theme.font_family ?? ""}
+              onChange={handleChange("font_family")}
+              onKeyDown={(e) => e.key === "Enter" && onSave()}
+            />
+          </Item>
+
+          <Item>
+            <ListItemText primary="CSS Injection" />
+            <TextField
+              {...textProps}
+              value={theme.css_injection ?? ""}
+              onChange={handleChange("css_injection")}
+              onKeyDown={(e) => e.key === "Enter" && onSave()}
+            />
+          </Item>
+        </List>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>{t("Cancel")}</Button>
+        <Button onClick={onSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SettingTheme;

src/components/setting/setting-verge.tsx

@@ -1,4 +1,5 @@
 import useSWR, { useSWRConfig } from "swr";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   IconButton,
@@ -20,6 +21,7 @@ import { CmdType } from "../../services/types";
 import { version } from "../../../package.json";
 import PaletteSwitch from "./palette-switch";
 import GuardState from "./guard-state";
+import SettingTheme from "./setting-theme";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -32,6 +34,8 @@ const SettingVerge = ({ onError }: Props) => {
 
   const { theme_mode, theme_blur, traffic_graph, language } = vergeConfig ?? {};
 
+  const [themeOpen, setThemeOpen] = useState(false);
+
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
     mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
@@ -99,6 +103,17 @@ const SettingVerge = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
+      <SettingItem>
+        <ListItemText primary={t("Theme Setting")} />
+        <IconButton
+          color="inherit"
+          size="small"
+          onClick={() => setThemeOpen(true)}
+        >
+          <ArrowForward />
+        </IconButton>
+      </SettingItem>
+
       <SettingItem>
         <ListItemText primary={t("Open App Dir")} />
         <IconButton color="inherit" size="small" onClick={openAppDir}>
@@ -117,6 +132,8 @@ const SettingVerge = ({ onError }: Props) => {
         <ListItemText primary={t("Version")} />
         <Typography sx={{ py: "6px" }}>v{version}</Typography>
       </SettingItem>
+
+      <SettingTheme open={themeOpen} onClose={() => setThemeOpen(false)} />
     </SettingList>
   );
 };

src/locales/en.json

@@ -48,6 +48,7 @@
   "Proxy Bypass": "Proxy Bypass",
   "Theme Mode": "Theme Mode",
   "Theme Blur": "Theme Blur",
+  "Theme Setting": "Theme Setting",
   "Traffic Graph": "Traffic Graph",
   "Language": "Language",
   "Open App Dir": "Open App Dir",

src/locales/zh.json

@@ -48,6 +48,7 @@
   "Proxy Bypass": "Proxy Bypass",
   "Theme Mode": "暗夜模式",
   "Theme Blur": "背景模糊",
+  "Theme Setting": "主题设置",
   "Traffic Graph": "流量图显",
   "Language": "语言设置",
   "Open App Dir": "应用目录",

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 { theme } = useCustomTheme();
-  const mode = data?.theme_mode ?? "light";
+
+  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) {
+    if (language) {
-      dayjs.locale(data.language === "zh" ? "zh-cn" : data.language);
+      dayjs.locale(language === "zh" ? "zh-cn" : language);
-      i18next.changeLanguage(data.language);
+      i18next.changeLanguage(language);
     }
-  }, [data?.language]);
+  }, [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();
-    }
-  };
 
   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) => ({
+            ({ palette }) => ({
-              bgcolor: alpha(theme.palette.background.paper, blur ? 0.85 : 1),
+              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>

src/pages/_theme.tsx

@@ -0,0 +1,12 @@
+// default theme setting
+export const defaultTheme = {
+  primary_color: "#5b5c9d",
+  secondary_color: "#9c27b0",
+  primary_text: "#637381",
+  secondary_text: "#909399",
+  info_color: "#0288d1",
+  error_color: "#d32f2f",
+  warning_color: "#ed6c02",
+  success_color: "#2e7d32",
+  font_family: `"Roboto", "Helvetica", "Arial", sans-serif`,
+};

src/pages/profiles.tsx

@@ -6,18 +6,15 @@ import { useTranslation } from "react-i18next";
 import {
   getProfiles,
   patchProfile,
-  deleteProfile,
   selectProfile,
   importProfile,
-  enhanceProfiles,
-  changeProfileChain,
 } from "../services/cmds";
 import { getProxies, updateProxy } from "../services/api";
 import Notice from "../components/base/base-notice";
 import BasePage from "../components/base/base-page";
 import ProfileNew from "../components/profile/profile-new";
 import ProfileItem from "../components/profile/profile-item";
-import ProfileMore from "../components/profile/profile-more";
+import EnhancedMode from "../components/profile/enhanced";
 
 const ProfilePage = () => {
   const { t } = useTranslation();
@@ -130,54 +127,6 @@ const ProfilePage = () => {
     }
   });
 
-  /** enhanced profile mode */
-
-  const chain = profiles.chain || [];
-
-  const onEnhance = useLockFn(enhanceProfiles);
-
-  const onEnhanceEnable = useLockFn(async (uid: string) => {
-    if (chain.includes(uid)) return;
-
-    const newChain = [...chain, uid];
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
-  const onEnhanceDisable = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = chain.filter((i) => i !== uid);
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
-  const onEnhanceDelete = useLockFn(async (uid: string) => {
-    try {
-      await onEnhanceDisable(uid);
-      await deleteProfile(uid);
-      mutate("getProfiles");
-    } catch (err: any) {
-      Notice.error(err?.message || err.toString());
-    }
-  });
-
-  const onMoveTop = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = [uid].concat(chain.filter((i) => i !== uid));
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
-  const onMoveEnd = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = chain.filter((i) => i !== uid).concat([uid]);
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
   return (
     <BasePage title={t("Profiles")}>
       <Box sx={{ display: "flex", mb: 2.5 }}>
@@ -216,22 +165,9 @@ const ProfilePage = () => {
         ))}
       </Grid>
 
-      <Grid container spacing={2} sx={{ mt: 3 }}>
+      {enhanceItems.length > 0 && (
-        {enhanceItems.map((item) => (
+        <EnhancedMode items={enhanceItems} chain={profiles.chain || []} />
-          <Grid item xs={12} sm={6} key={item.file}>
+      )}
-            <ProfileMore
-              selected={!!profiles.chain?.includes(item.uid)}
-              itemData={item}
-              onEnable={() => onEnhanceEnable(item.uid)}
-              onDisable={() => onEnhanceDisable(item.uid)}
-              onDelete={() => onEnhanceDelete(item.uid)}
-              onMoveTop={() => onMoveTop(item.uid)}
-              onMoveEnd={() => onMoveEnd(item.uid)}
-              onEnhance={onEnhance}
-            />
-          </Grid>
-        ))}
-      </Grid>
 
       <ProfileNew open={dialogOpen} onClose={() => setDialogOpen(false)} />
     </BasePage>

src/pages/proxies.tsx

@@ -17,7 +17,7 @@ const ProxyPage = () => {
   const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
 
   const modeList = ["rule", "global", "direct"];
-  const curMode = clashConfig?.mode.toLowerCase() ?? "direct";
+  const curMode = clashConfig?.mode.toLowerCase();
   const { groups = [], proxies = [] } = proxiesData ?? {};
 
   // make sure that fetch the proxies successfully

src/services/api.ts

@@ -142,6 +142,14 @@ export async function getProviders() {
   return response.providers as any;
 }
 
+// todo: proxy providers health check
+export async function getProviderHealthCheck(name: string) {
+  const instance = await getAxios();
+  return instance.get(
+    `/providers/proxies/${encodeURIComponent(name)}/healthcheck`
+  );
+}
+
 // Close specific connection
 export async function deleteConnection(id: string) {
   const instance = await getAxios();

src/services/cmds.ts

@@ -66,6 +66,10 @@ export async function changeProfileChain(chain?: string[]) {
   return invoke<void>("change_profile_chain", { chain });
 }
 
+export async function changeProfileValid(valid?: string[]) {
+  return invoke<void>("change_profile_valid", { valid });
+}
+
 export async function getClashInfo() {
   return invoke<CmdType.ClashInfo | null>("get_clash_info");
 }

src/services/enhance.ts

@@ -145,11 +145,12 @@ class Enhance {
   // enhanced mode runner
   private async runner(payload: CmdType.EnhancedPayload) {
     const chain = payload.chain || [];
+    const valid = payload.valid || [];
 
     if (!Array.isArray(chain)) throw new Error("unhandle error");
 
     let pdata = payload.current || {};
-    let useList = [] as string[];
+    let useList = valid;
 
     for (const each of chain) {
       const { uid, type = "" } = each.item;

src/services/types.ts

@@ -116,6 +116,7 @@ export namespace CmdType {
   export interface ProfilesConfig {
     current?: string;
     chain?: string[];
+    valid?: string[];
     items?: ProfileItem[];
   }
 
@@ -130,6 +131,18 @@ export namespace CmdType {
     enable_system_proxy?: boolean;
     enable_proxy_guard?: boolean;
     system_proxy_bypass?: string;
+    theme_setting?: {
+      primary_color?: string;
+      secondary_color?: string;
+      primary_text?: string;
+      secondary_text?: string;
+      info_color?: string;
+      error_color?: string;
+      warning_color?: string;
+      success_color?: string;
+      font_family?: string;
+      css_injection?: string;
+    };
   }
 
   type ClashConfigValue = any;
@@ -179,6 +192,7 @@ export namespace CmdType {
 
   export interface EnhancedPayload {
     chain: ChainItem[];
+    valid: string[];
     current: ProfileData;
     callback: string;
   }

vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
+import svgr from "vite-plugin-svgr";
 import react from "@vitejs/plugin-react";
 import monaco from "vite-plugin-monaco-editor";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   root: "src",
-  plugins: [react(), monaco()],
+  plugins: [svgr(), react(), monaco()],
   build: {
     outDir: "../dist",
     emptyOutDir: true,