From 0290d9ddfc23ec00bbe8523e29a0da536036d5f1 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Fri, 1 Apr 2022 02:08:42 +0800
Subject: [PATCH] feat: support css injection
---
src-tauri/src/core/verge.rs | 2 +-
src/components/layout/use-custom-theme.ts | 15 ++++++++++++++-
src/components/setting/setting-theme.tsx | 7 ++++---
src/services/types.ts | 2 +-
4 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/src-tauri/src/core/verge.rs b/src-tauri/src/core/verge.rs
index b659dc0..7dcd0d5 100644
--- a/src-tauri/src/core/verge.rs
+++ b/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 {
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index de936a9..89a79b5 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/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(() => {
diff --git a/src/components/setting/setting-theme.tsx b/src/components/setting/setting-theme.tsx
index 2dc3ec2..5fb6c2c 100644
--- a/src/components/setting/setting-theme.tsx
+++ b/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>
diff --git a/src/services/types.ts b/src/services/types.ts
index b098c0f..0d5bf3c 100644
--- a/src/services/types.ts
+++ b/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;
};
}
--
GitLab