Fixes vscode webview css font variable changes

gitkraken · Apr 5, 2019 · 3e41655 · 3e41655
1 parent 72e60e0
commit 3e41655
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/src/ui/shared/app-base.ts b/src/ui/shared/app-base.ts
@@ -311,15 +311,26 @@ export abstract class App<TBootstrap extends Bootstrap> {
 
             const bodyStyle = body.style;
 
-            bodyStyle.setProperty('--font-size', computedStyle.getPropertyValue('--vscode-editor-font-size').trim());
-            bodyStyle.setProperty(
-                '--font-family',
-                computedStyle.getPropertyValue('--vscode-editor-font-family').trim()
-            );
-            bodyStyle.setProperty(
-                '--font-weight',
-                computedStyle.getPropertyValue('--vscode-editor-font-weight').trim()
-            );
+            const font = computedStyle.getPropertyValue('--vscode-font-family').trim();
+            if (font) {
+                bodyStyle.setProperty('--font-family', font);
+                bodyStyle.setProperty('--font-size', computedStyle.getPropertyValue('--vscode-font-size').trim());
+                bodyStyle.setProperty('--font-weight', computedStyle.getPropertyValue('--vscode-font-weight').trim());
+            }
+            else {
+                bodyStyle.setProperty(
+                    '--font-family',
+                    computedStyle.getPropertyValue('--vscode-editor-font-family').trim()
+                );
+                bodyStyle.setProperty(
+                    '--font-size',
+                    computedStyle.getPropertyValue('--vscode-editor-font-size').trim()
+                );
+                bodyStyle.setProperty(
+                    '--font-weight',
+                    computedStyle.getPropertyValue('--vscode-editor-font-weight').trim()
+                );
+            }
 
             let color = computedStyle.getPropertyValue('--vscode-editor-background').trim();
             bodyStyle.setProperty('--color-background', color);

diff --git a/src/ui/shared/colors.ts b/src/ui/shared/colors.ts
@@ -18,8 +18,8 @@ export function lighten(color: string, percentage: number) {
     if (rgba == null) return color;
 
     const [r, g, b, a] = rgba;
-    percentage = (255 * percentage) / 100;
-    return `rgba(${adjustLight(r, percentage)}, ${adjustLight(g, percentage)}, ${adjustLight(b, percentage)}, ${a})`;
+    const amount = (255 * percentage) / 100;
+    return `rgba(${adjustLight(r, amount)}, ${adjustLight(g, amount)}, ${adjustLight(b, amount)}, ${a})`;
 }
 
 export function opacity(color: string, percentage: number) {