search

jupyterlab-contrib / jupyterlab-topbar

JupyterLab Top Bar extensions
BSD 3-Clause "New" or "Revised" License
104 stars 18 forks source link

Theme toggler extension overriding body font #124

Open mahendrapaipuri opened 2 months ago

mahendrapaipuri commented 2 months ago

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!

jtpio commented 2 months ago

Thanks @mahendrapaipuri for reporting :+1:

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 commented 2 months ago

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