added arbitrary theme CSS overrides to settings

nexteraanalytics · Aug 22, 2019 · a00df0b · a00df0b
1 parent 9f32ff4
commit a00df0b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/packages/apputils-extension/schema/themes.json b/packages/apputils-extension/schema/themes.json
@@ -2,6 +2,7 @@
   "title": "Theme",
   "jupyter.lab.setting-icon-label": "Theme Manager",
   "description": "Theme manager settings.",
+  "type": "object",
   "additionalProperties": false,
   "properties": {
     "theme": {
@@ -16,24 +17,30 @@
       "description": "Enable/disable styling of the application scrollbars",
       "default": false
     },
-    "code-font-size": {
-      "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": ""
-    },
-    "content-font-size": {
-      "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": ""
-    },
-    "ui-font-size": {
-      "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": ""
+    "overrides": {
+      "title": "Theme CSS Overrides",
+      "description": "The list of theme CSS overrides",
+      "items": { "$ref": "#/definitions/theme-override" },
+      "type": "array",
+      "default": []
     }
   },
-  "type": "object"
+  "definitions": {
+    "theme-override": {
+      "required": ["key", "value"],
+      "type": "object",
+      "properties": {
+        "key": {
+          "type": "string",
+          "title": "Theme CSS variable key",
+          "description": "The name of a theme CSS variable, minus the leading `--jp-`"
+        },
+        "value": {
+          "type": "string",
+          "title": "Theme CSS override value",
+          "description": "An empty string or a valid CSS value, in which case it is assigned to the CSS variable corresponding to `key`"
+        }
+      }
+    }
+  }
 }
diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
@@ -146,10 +146,7 @@ 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]);
-      }
+      manager.setOverrides();
 
       commands.notifyCommandChanged(CommandIDs.changeTheme);
     });

diff --git a/packages/apputils/src/thememanager.ts b/packages/apputils/src/thememanager.ts
@@ -5,6 +5,8 @@ import { IChangedArgs, ISettingRegistry, URLExt } from '@jupyterlab/coreutils';
 
 import { each } from '@phosphor/algorithm';
 
+import { ReadonlyJSONArray } from '@phosphor/coreutils';
+
 import { DisposableDelegate, IDisposable } from '@phosphor/disposable';
 
 import { Widget } from '@phosphor/widgets';
@@ -27,6 +29,9 @@ const REQUEST_INTERVAL = 75;
  */
 const REQUEST_THRESHOLD = 20;
 
+type Dict<T> = { [key: string]: T };
+type Pair<T> = { key: string; value: T };
+
 /**
  * A class that provides theme management.
  */
@@ -134,22 +139,31 @@ export class ThemeManager implements IThemeManager {
     return this._themes[name].isLight;
   }
 
-  /**
-   * 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[settingsKey] as string) || `initial`;
+  setOverride(key: string) {
+    document.documentElement.style.setProperty(
+      `--jp-${key}`,
+      this._overrides[key] || 'initial'
+    );
   }
 
-  /**
-   * 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)
+  setOverrides() {
+    let newOverrides: Dict<string> = {};
+    (this._settings.composite['overrides'] as ReadonlyJSONArray).forEach(
+      (x: Pair<string>) => {
+        newOverrides[x.key] = x.value;
+      }
     );
+    Object.keys(this._overrides).forEach(key => {
+      if (!(key in newOverrides)) {
+        // unset the override
+        this.setOverride(key);
+      }
+    });
+    this._overrides = newOverrides;
+
+    Object.keys(this._overrides).forEach(key => {
+      this.setOverride(key);
+    });
   }
 
   /**
@@ -296,6 +310,7 @@ export class ThemeManager implements IThemeManager {
   private _current: string | null = null;
   private _host: Widget;
   private _links: HTMLLinkElement[] = [];
+  private _overrides: Dict<string> = {};
   private _outstanding: Promise<void> | null = null;
   private _pending = 0;
   private _requests: { [theme: string]: number } = {};