jupyterlab/jupyterlab

Question: How to have extensions "inherit" styling from the current JupyterLab theme?

Open

#4919 opened on Jul 17, 2018

View on GitHub
 (6 comments) (0 reactions) (0 assignees)TypeScript (13,454 stars) (2,937 forks)batch import
documentationgood first issue

Description

When one switches between the default JupyterLab light and dark themes, the color of the text (for example) in all of the JupyterLab (i.e. standard/default/non-extension) panes switches automatically. (Since the font color is also part of the theme.)

Question: How to write themes so that they behave the same way? I.e. so that the themes "inherit" their styling from JupyterLab's current ambient theme?

For example, I have an extension where the font color is black. This is fine when the JupyterLab light theme is enabled, but when the dark theme is enabled, it becomes black text on a black background. The extension seems to be "inheriting" the background color, but not the font color. How in general would you recommend extension developers avoid this?

2018-07-17 16 02 33 2018-07-17 16 02 25 2018-07-17 16 02 00 2018-07-17 16 01 40

One thing that occurs is to edit the extension somehow so that it displays white font when the dark theme is enabled. However, hard-coding this seems too inflexible to be a good solution, because this would not help if the user installs a custom theme with yet another background color.

I understand that this is probably a general CSS/Javascript programming question. In any case, it seems to me like it might be generally applicable to all future JupyterLab extension developers, hence why I thought to ask the question here.

Contributor guide

Tech stack
typescriptcssjavascript
Domain
frontenddesigndeveloper experience
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSSJupyterLab extension developmentCSS custom properties
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate how JupyterLab's theme system uses CSS custom properties. Look at the source files in `packages/theme light extension` and `packages/theme dark extension` to understand the variables defined. Check the JupyterLab documentation on extension theming. Then propose a method for extension developers to use these variables in their CSS to inherit theme styles.