jupyterlab-topbar
jupyterlab-topbar copied to clipboard
Theme toggler extension overriding body font
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!