Fixes vscode webview css font variable changes

Author: eamodio

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);

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) {