Theme toggler extension overriding body font

[mahendrapaipuri]

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:

Here is a screenshot with theme toggler extension installed:

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!

[jtpio]

Thanks @mahendrapaipuri for reporting 👍

Indeed, JupyterLab used to depend on Blueprint before which is why this extension reused the switch component from Blueprint.

Maybe we could switch to the Jupyter UI toolkit instead? https://jupyterlab-contrib.github.io/jupyter-ui-toolkit/?path=/docs/components-switch--documentation

[mahendrapaipuri]

Ah, nice! Didnt know about JupyterUI toolkit. I will give it a go! Cheers @jtpio