Enable themed scrollbars by default?

[jtpio]

Problem

By default scrollbars are not themed (the setting is turned off).

This makes them somehow stand out when using dark themes, for example:

When enabled, one can argue they look nicer:

Proposed Solution

Enable "Theme Scrollbars" by default.

The setting is currently defined here:

jupyterlab/packages/apputils-extension/schema/themes.json

Lines 133 to 138 in eff7d42

	"theme-scrollbars": {
	"type": "boolean",
	"title": "Scrollbar Theming",
	"description": "Enable/disable styling of the application scrollbars",
	"default": false
	},

The idea would be to make it true by default.

Additional context

While this looks like a simple change to make, there might be some implications (accessibility?) for having the setting enabled by default?

[jtpio]

For reference the screenshots above were taken on Ubuntu 23.10 with Chromium 120.

[krassowski]

So there are two things to consider:

• performance implications on Chromium - this was mostly addressed in Load ::-webkit-scrollbar styles on-demand #14275 so I think we are fine here (but there is still a small penalty)
• the support for standard CSS styling (e.g. scollbar-color, -width and -gutter) being nearly there (we are waiting for Chromium, currently in preview): - once it is supported widely we could adjust the dark theme which would possibly give even better UX as it would retain OS-specific scrollbar look and feel
  • still would benefit from performance testing, but from my reading of MRs it should be as fast or faster than the existing prefixed methods.

[pplonski]

Is it possible to have extension that enable themed scrollbars?

I have schema/plugin.json file and tried below code but it is not working:

{
  "jupyter.lab.shortcuts": [],
  "title": "pieceofcode",
  "description": "pieceofcode settings.",
  "type": "object",
  "properties": {
    "alwaysOpenPieceOfCode": {
      "type": "boolean",
      "title": "alwaysOpenPieceOfCode",
      "description": "Always Open Piece of Code",
      "default": true
    },
    "theme-scrollbars": { 
      "type": "boolean", 
      "title": "Scrollbar Theming", 
      "description": "Enable/disable styling of the application scrollbars", 
      "default": true
    }
  },
  "additionalProperties": false,
  "jupyter.lab.toolbars": {
    "Cell": [
      {
        "name": "open-piece-of-code",
        "command": "@mljar/pieceofcode:open"
      },
      {
        "name": "hide-piece-of-code",
        "command": "@mljar/pieceofcode:hide"
      }
    ]
  }
}

[krassowski]

JupyterLab 4.3 will advertise the color theme allowing the scrollbars to automatically adjust to the application color, see:

• Advertise the color scheme based on the theme #16301

without forcing custom styling of scrollbars.

So with "Theme Scrollbars" option disabled (default):

Before	After

[krassowski]

@pplonski in previous versions you can require IThemeManager token and invoke toggleThemeScrollbars() method conditionally on isToggledThemeScrollbars(). You will would need to cast manager: IThemeManager to ThemeManager for typechecking purposes as these methods are not formally part of IThemeManager interface and may not work if another plugin provides a custom implementation of the theme manager.

[pplonski]

Thank you @krassowski! You respond with speed of 🚀 I will try with IThemeManager :)

[pplonski]

It is working as expected 👍

Here is my code:

import {
  IThemeManager,
  ThemeManager
} from '@jupyterlab/apputils';

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'pieceofcode:plugin',
  description: 'Write code with UI.',
  autoStart: true,
  optional: [ISettingRegistry, IThemeManager],
  activate: async (
    app: JupyterFrontEnd,
    settingRegistry: ISettingRegistry | null,
    themeManager: IThemeManager
  ) => {
    console.log('Piece of Code extension is activated!');
    const tm = themeManager as ThemeManager;
    if(tm) {
      if(!tm.isToggledThemeScrollbars())
      tm.toggleThemeScrollbars();
    }
    // rest of code

Thank you @krassowski, you are Jupyter legend 🥇