jupyterlab-topbar icon indicating copy to clipboard operation
jupyterlab-topbar copied to clipboard

Theme toggler extension overriding body font

Open mahendrapaipuri opened this issue 9 months ago • 2 comments

Description

Theme toggler extension imports blueprint CSS used for the Switch component. As extensions are imported after the core JupyterLab, Blueprint CSS is potentially overriding JupyterLab core CSS properties. One change that is quite visible is body font family.

Here is a screenshot of font with vanilla JupyterLab: jp_font

Here is a screenshot with theme toggler extension installed: blueprint_font

Ideally, we should make the blueprint CSS scoped to theme toggler component.

Reproduce

Install jupyterlab-theme-toggler==1.0.0 and notice the change in font family

Expected behavior

Extension should not alter JupyterLab core CSS properties

@jtpio I have been trying to scope it to component without much success. Do you have any leads? One solution is to redeclare the body CSS class with "correct" font-family in base.css:

body {
  font-family: var(--jp-ui-font-family);
}

or re-importing core CSS using import '@jupyterlab/application/style/core.css'; should override the blueprint CSS and bring back JupyterLab default font family. If we can scope the blueprint CSS to the theme toggler component, that would be the ideal solution though!

mahendrapaipuri avatar May 11 '24 09:05 mahendrapaipuri