feat: support css injection

src-tauri/src/core/verge.rs

@@ -63,7 +63,7 @@ pub struct VergeTheme {
   pub success_color: Option<String>,
 
   pub font_family: Option<String>,
-  pub font_face: Option<String>,
+  pub css_injection: Option<String>,
 }
 
 impl VergeConfig {

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

@@ -40,12 +40,25 @@ export default function useCustomTheme() {
         },
       },
       typography: {
+        // todo
         fontFamily: setting.font_family
-          ? `"${setting.font_family}", ${dt.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(() => {

src/components/setting/setting-theme.tsx

@@ -65,6 +65,7 @@ const SettingTheme = (props: Props) => {
     try {
       await patchVergeConfig({ theme_setting: theme });
       mutate();
+      onClose();
     } catch (err: any) {
       onError?.(err);
     }
@@ -186,12 +187,12 @@ const SettingTheme = (props: Props) => {
           </Item>
 
           <Item>
-            <ListItemText primary="Font Face" />
+            <ListItemText primary="CSS Injection" />
 
             <TextField
               {...textProps}
-              value={theme.font_face ?? ""}
-              onChange={handleChange("font_face")}
+              value={theme.css_injection ?? ""}
+              onChange={handleChange("css_injection")}
             />
           </Item>
         </List>

src/services/types.ts

@@ -139,8 +139,8 @@ export namespace CmdType {
       error_color?: string;
       warning_color?: string;
       success_color?: string;
-      font_face?: string;
       font_family?: string;
+      css_injection?: string;
     };
   }