Skip to content

Conversation

@billti
Copy link
Member

@billti billti commented Jan 19, 2026

The goal here is to simplify and unify everything to do with theme management. This mostly consists of:

  • Put everything to do with setting theme colors based on the environment theme into qdk-theme.css
  • Put logic for invoking code to run on a theme change into a common themeObserver.ts

The CSS in qdk-theme.css is set up to accurately detect light or dark theme in VS Code, Jupyter, or the web. See the lengthy comments at the start of this file for how it works. ALL color management should be kept in this file.

I have new widgets coming soon that need to react via code to theme changes, including in Python widgets, hence moving the existing code for this out of the vscode dir and into npm qsharp-lang/ux module (where all the widgets live).

For now, I've only ported the histogram widget to use the new qdk-theme.css variables, as this was broken inside Jupyter notebooks previously. This now works correctly as shown below. Long term we should update all the widgets to use the qdk-* variables as done here for the histogram. This will provide consistency and (hopefully) simplicity.

Jupyter Lab in default light mode:

image

After switching to dark mode:

image

With this change I also use the theme background color behind the widget, rather than solid white or black. The bar fill and font colors and still set to contrast with this and should still be legible even in weird themes, e.g., in 'Solorized light'

image

Or 'Red' theme

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants