Add settings to override theme font sizes

packages/application/style/scrollbar.css

@@ -8,12 +8,13 @@
  */
 
 /* use standard opaque scrollbars for most nodes */
-div.jp-LabShell[data-jp-theme-scrollbars='true'] {
+[data-jp-theme-scrollbars='true'] {
   scrollbar-color: rgb(var(--jp-scrollbar-thumb-color))
     var(--jp-scrollbar-background-color);
 }
 
-/* for code nodes, use a transparent style of scrollbar */
+/* for code nodes, use a transparent style of scrollbar. These selectors
+ * will match lower in the tree, and so will override the above */
 [data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar,
 [data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar {
   scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;

packages/apputils-extension/schema/themes.json

@@ -2,7 +2,29 @@
   "title": "Theme",
   "jupyter.lab.setting-icon-label": "Theme Manager",
   "description": "Theme manager settings.",
+  "type": "object",
   "additionalProperties": false,
+  "definitions": {
+    "cssOverrides": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "The description field of each item is the CSS property that will be used to validate an override's value",
+      "properties": {
+        "code-font-size": {
+          "type": ["string", "null"],
+          "description": "font-size"
+        },
+        "content-font-size1": {
+          "type": ["string", "null"],
+          "description": "font-size"
+        },
+        "ui-font-size1": {
+          "type": ["string", "null"],
+          "description": "font-size"
+        }
+      }
+    }
+  },
   "properties": {
     "theme": {
       "type": "string",
@@ -15,7 +37,16 @@
       "title": "Scrollbar Theming",
       "description": "Enable/disable styling of the application scrollbars",
       "default": false
+    },
+    "overrides": {
+      "title": "Theme CSS Overrides",
+      "description": "Override theme CSS variables by setting key-value pairs here",
+      "$ref": "#/definitions/cssOverrides",
+      "default": {
+        "code-font-size": null,
+        "content-font-size1": null,
+        "ui-font-size1": null
+      }
     }
-  },
-  "type": "object"
+  }
 }

packages/apputils-extension/src/index.ts

@@ -14,9 +14,7 @@ import {
   Dialog,
   ICommandPalette,
   ISplashScreen,
-  IThemeManager,
   IWindowResolver,
-  ThemeManager,
   WindowResolver,
   Printing
 } from '@jupyterlab/apputils';
@@ -32,18 +30,16 @@ import {
   URLExt
 } from '@jupyterlab/coreutils';
 
-import { IMainMenu } from '@jupyterlab/mainmenu';
-
 import { defaultIconRegistry } from '@jupyterlab/ui-components';
 
 import { PromiseDelegate } from '@phosphor/coreutils';
 
 import { DisposableDelegate } from '@phosphor/disposable';
 
-import { Menu } from '@phosphor/widgets';
-
 import { Palette } from './palette';
 
+import { themesPlugin, themesPaletteMenuPlugin } from './themeplugins';
+
 /**
  * The interval in milliseconds before recover options appear during splash.
  */
@@ -53,8 +49,6 @@ const SPLASH_RECOVER_TIMEOUT = 12000;
  * The command IDs used by the apputils plugin.
  */
 namespace CommandIDs {
-  export const changeTheme = 'apputils:change-theme';
-
   export const loadState = 'apputils:load-statedb';
 
   export const print = 'apputils:print';
@@ -105,128 +99,6 @@ const settings: JupyterFrontEndPlugin<ISettingRegistry> = {
   provides: ISettingRegistry
 };
 
-/**
- * The default theme manager provider.
- */
-const themes: JupyterFrontEndPlugin<IThemeManager> = {
-  id: '@jupyterlab/apputils-extension:themes',
-  requires: [ISettingRegistry, JupyterFrontEnd.IPaths],
-  optional: [ISplashScreen],
-  activate: (
-    app: JupyterFrontEnd,
-    settings: ISettingRegistry,
-    paths: JupyterFrontEnd.IPaths,
-    splash: ISplashScreen | null
-  ): IThemeManager => {
-    const host = app.shell;
-    const commands = app.commands;
-    const url = URLExt.join(paths.urls.base, paths.urls.themes);
-    const key = themes.id;
-    const manager = new ThemeManager({ key, host, settings, splash, url });
-
-    // Keep a synchronously set reference to the current theme,
-    // since the asynchronous setting of the theme in `changeTheme`
-    // can lead to an incorrect toggle on the currently used theme.
-    let currentTheme: string;
-
-    // Set data attributes on the application shell for the current theme.
-    manager.themeChanged.connect((sender, args) => {
-      currentTheme = args.newValue;
-      document.body.dataset.jpThemeLight = String(
-        manager.isLight(currentTheme)
-      );
-      document.body.dataset.jpThemeName = currentTheme;
-      if (
-        document.body.dataset.jpThemeScrollbars !==
-        String(manager.themeScrollbars(currentTheme))
-      ) {
-        document.body.dataset.jpThemeScrollbars = String(
-          manager.themeScrollbars(currentTheme)
-        );
-      }
-      commands.notifyCommandChanged(CommandIDs.changeTheme);
-    });
-
-    commands.addCommand(CommandIDs.changeTheme, {
-      label: args => {
-        const theme = args['theme'] as string;
-        return args['isPalette'] ? `Use ${theme} Theme` : theme;
-      },
-      isToggled: args => args['theme'] === currentTheme,
-      execute: args => {
-        const theme = args['theme'] as string;
-        if (theme === manager.theme) {
-          return;
-        }
-        return manager.setTheme(theme);
-      }
-    });
-
-    return manager;
-  },
-  autoStart: true,
-  provides: IThemeManager
-};
-
-/**
- * The default theme manager's UI command palette and main menu functionality.
- *
- * #### Notes
- * This plugin loads separately from the theme manager plugin in order to
- * prevent blocking of the theme manager while it waits for the command palette
- * and main menu to become available.
- */
-const themesPaletteMenu: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/apputils-extension:themes-palette-menu',
-  requires: [IThemeManager],
-  optional: [ICommandPalette, IMainMenu],
-  activate: (
-    app: JupyterFrontEnd,
-    manager: IThemeManager,
-    palette: ICommandPalette | null,
-    mainMenu: IMainMenu | null
-  ): void => {
-    const commands = app.commands;
-
-    // If we have a main menu, add the theme manager to the settings menu.
-    if (mainMenu) {
-      const themeMenu = new Menu({ commands });
-      themeMenu.title.label = 'JupyterLab Theme';
-      void app.restored.then(() => {
-        const command = CommandIDs.changeTheme;
-        const isPalette = false;
-
-        manager.themes.forEach(theme => {
-          themeMenu.addItem({ command, args: { isPalette, theme } });
-        });
-      });
-      mainMenu.settingsMenu.addGroup(
-        [
-          {
-            type: 'submenu' as Menu.ItemType,
-            submenu: themeMenu
-          }
-        ],
-        0
-      );
-    }
-
-    // If we have a command palette, add theme switching options to it.
-    if (palette) {
-      void app.restored.then(() => {
-        const category = 'Settings';
-        const command = CommandIDs.changeTheme;
-        const isPalette = true;
-
-        manager.themes.forEach(theme => {
-          palette.addItem({ command, args: { isPalette, theme }, category });
-        });
-      });
-    }
-  },
-  autoStart: true
-};
-
 /**
  * The default window name resolver provider.
  */
@@ -594,8 +466,8 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   settings,
   state,
   splash,
-  themes,
-  themesPaletteMenu,
+  themesPlugin,
+  themesPaletteMenuPlugin,
   print
 ];
 export default plugins;