the font size settings now work

nexteraanalytics · Aug 22, 2019 · f64325f · f64325f
1 parent 16eb75a
commit f64325f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/packages/apputils-extension/schema/themes.json b/packages/apputils-extension/schema/themes.json
@@ -17,22 +17,22 @@
       "default": false
     },
     "code-font-size": {
-      "type": "number",
+      "type": "string",
       "title": "Code font size",
       "description": "Set the code font size. Defaults to the `--jp-code-font-size` CSS variable from the theme.`",
-      "default": null
+      "default": ""
     },
     "content-font-size": {
-      "type": "number",
+      "type": "string",
       "title": "Content font size",
       "description": "Set the content font size. Defaults to the `--jp-content-font-size1` CSS variable from the theme.`",
-      "default": null
+      "default": ""
     },
     "ui-font-size": {
-      "type": "number",
+      "type": "string",
       "title": "UI font size",
       "description": "Set the UI font size. Defaults to the `--jp-ui-font-size1` CSS variable from the theme.`",
-      "default": null
+      "default": ""
     }
   },
   "type": "object"

diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
@@ -146,6 +146,10 @@ const themes: JupyterFrontEndPlugin<IThemeManager> = {
       }
 
       // Set any CSS overrides
+      for (let key in ThemeManager.fontVars) {
+        // Set the font size overrides
+        manager.setFontSize(key, ThemeManager.fontVars[key]);
+      }
 
       commands.notifyCommandChanged(CommandIDs.changeTheme);
     });

diff --git a/packages/apputils/src/thememanager.ts b/packages/apputils/src/thememanager.ts
@@ -134,36 +134,24 @@ export class ThemeManager implements IThemeManager {
     return this._themes[name].isLight;
   }
 
-  get codeFontSize(): number {
-    return (
-      (this._settings.composite['code-font-size'] as number) ||
-      parseFloat(
-        getComputedStyle(document.documentElement).getPropertyValue(
-          '---jp-code-font-size'
-        )
-      )
-    );
-  }
-
-  get contentFontSize(): number {
+  /**
+   * Get a font size from the current theme, or the override
+   * setting if it exists
+   */
+  getFontSize(settingsKey: string, cssKey: string): string {
     return (
-      (this._settings.composite['content-font-size'] as number) ||
-      parseFloat(
-        getComputedStyle(document.documentElement).getPropertyValue(
-          '--jp-content-font-size1'
-        )
-      )
+      (this._settings.composite[settingsKey] as string) ||
+      getComputedStyle(document.documentElement).getPropertyValue(cssKey)
     );
   }
 
-  get uiFontSize(): number {
-    return (
-      (this._settings.composite['ui-font-size'] as number) ||
-      parseFloat(
-        getComputedStyle(document.documentElement).getPropertyValue(
-          '--jp-ui-font-size1'
-        )
-      )
+  /**
+   * Set a font size based on the return from getFontSize
+   */
+  setFontSize(settingsKey: string, cssKey: string): void {
+    document.documentElement.style.setProperty(
+      cssKey,
+      this.getFontSize(settingsKey, cssKey)
     );
   }
 
@@ -350,6 +338,12 @@ export namespace ThemeManager {
      */
     url: string;
   }
+
+  export const fontVars: { [key: string]: string } = {
+    'code-font-size': '--jp-code-font-size',
+    'content-font-size': '--jp-content-font-size1',
+    'ui-font-size': '--jp-ui-font-size1'
+  };
 }
 
 /**