Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme toggler extension overriding body font #124

Open
mahendrapaipuri opened this issue May 11, 2024 · 2 comments · May be fixed by #127
Open

Theme toggler extension overriding body font #124

mahendrapaipuri opened this issue May 11, 2024 · 2 comments · May be fixed by #127
Labels
bug Something isn't working

Comments

@mahendrapaipuri
Copy link
Member

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 mahendrapaipuri added the bug Something isn't working label May 11, 2024
@jtpio
Copy link
Member

jtpio commented May 13, 2024

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
Copy link
Member Author

mahendrapaipuri commented May 13, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants