feat: extract css variable

subframe7536 · Nov 21, 2024 · f2ef6e0 · f2ef6e0
1 parent c9223b4
commit f2ef6e0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,11 @@ There are [guide](https://github.com/subframe7536/vscode-custom-ui-style/issues/
 
 ## Example
 
+Avaiable CSS Variables:
+
+- `--cus-monospace-font`: Target monospace font family
+- `--cus-sans-font`: Target sans-serif font family
+
 ```json
 {
   "custom-ui-style.font.sansSerif": "Maple UI, -apple-system",

diff --git a/src/manager/css.ts b/src/manager/css.ts
@@ -29,25 +29,33 @@ function generateFontCSS() {
   const { monospace, sansSerif } = getFamilies()
   if (monospace) {
     result += `
-span.monaco-keybinding-key, .setting-list-row {
-  font-family: ${monospace}, ${VSC_NOTEBOOK_MONO_FONT} !important;
+body {
+  --cus-monospace-font: ${monospace}, ${VSC_NOTEBOOK_MONO_FONT};
+}
+span.monaco-keybinding-key,
+.setting-list-row,
+kbd {
+  font-family: var(--cus-monospace-font) !important;
 }
 .windows,
 .mac,
 .linux {
-  --monaco-monospace-font: ${monospace}, ${VSC_NOTEBOOK_MONO_FONT} !important;
+  --monaco-monospace-font: var(--cus-monospace-font) !important;
 }`
   }
   if (sansSerif) {
     result += `
+body {
+  --cus-sans-font: ${sansSerif};
+}
 .windows {
-  font-family: ${sansSerif}, ${VSC_DFAULT_SANS_FONT.win} !important;
+  font-family: var(--cus-sans-font), ${VSC_DFAULT_SANS_FONT.win} !important;
 }
 .mac {
-  font-family: ${sansSerif}, ${VSC_DFAULT_SANS_FONT.mac} !important;
+  font-family: var(--cus-sans-font), ${VSC_DFAULT_SANS_FONT.mac} !important;
 }
 .linux {
-  font-family: ${sansSerif}, ${VSC_DFAULT_SANS_FONT.linux} !important;
+  font-family: var(--cus-sans-font), ${VSC_DFAULT_SANS_FONT.linux} !important;
 }`
   }
   return result