Theming doesn't work in notebook output webviews

[pwang347]

Describe the bug

Theming doesn't seem to be working for VS Code notebook outputs:

Not sure if this issue belongs here or in vscode itself, but I do see that the webviews are correctly providing some theme information there (maybe the color tokens are named differently for outputs?) FYI @mattbierner

To reproduce

1. Register a notebook output renderer (e.g. see https://github.com/microsoft/vscode-extension-samples/tree/main/notebook-renderer-react-sample)
2. In the renderer add a primary-styled button using the toolkit.
3. Observe that the button isn't properly styled

Expected behavior

The button should have the correct color as it does in other types of webviews, e.g.

Current behavior

See the image above

Desktop (please complete the following information):

• OS Version: Windows 11
• Toolkit Version: 0.9.1

Additional context

[hawkticehurst]

Thanks for the report @pwang347!

I tried to follow your reproduction steps but it seems like the sample is incomplete so I didn't get too far (would you happen to know of any other minimal notebook samples I could reference?)

With that said, off the top of my head I'd wager this could be an issue with your toolkit version –– potentially try updating to the latest.

If that doesn't work could indeed be an issue with the notebook environment at large?? @mjbvz do you know if there are any discrepancies between the CSS variables that get exposed to webviews and notebooks?

[mjbvz]

The vscode theme variables seem to work for me in notebook outputs:

... 

const root = shadow.querySelector<HTMLElement>('#root')!;

const button = document.createElement('div');
button.textContent = "Ugly button";
button.style.padding = "20px";
button.style.background = "var(--vscode-button-background)";

@hawkticehurst Does the toolkit provides its own theme colors? If so, how / where are these set?

[hawkticehurst]

@mjbvz Thanks for clarifying/demoing the notebook output!

We do provide a set of fallback colors (based on the default dark theme) for when the components are used outside of a VS Code context (inside Storybook for example), but otherwise, all the components pull directly from the same CSS variables (or at least they should be).

These colors are defined and set across a few different files:

• src/design-tokens.ts is where we define our own internal concept of design tokens and associate VS Code CSS variables and fallback colors (here's where buttonPrimaryBackground is defined and then used as an example)
• src/utilities/design-tokens/create.ts is where the create function (that is used to create the design tokens) is defined and is notably where a theme token map is created and the component theme listener is initialized amongst other things
• src/utilities/theme/applyTheme.ts is where all the code lives that listens for VS Code theme changes and updates component design tokens when a change occurs

Based on your example, it looks like something about this code is broken since the variable works and @pwang347's button seems to be defaulting to the dark theme fallback colors

[hawkticehurst]

@mjbvz if you see anything in the above code that stands out to you please let me know

@pwang347 with all this in mind, if you could provide a small example that reproduces this issue (i.e. a tiny notebook extension that uses a toolkit button that I can run locally on my machine) so I can dive a bit deeper into our theming code that would be greatly appreciated

[pwang347]

@hawkticehurst hey! please see https://github.com/pwang347/vscode-renderer-test

I can reproduce the following issue here by opening the IPYNB file I provided in the root of the repo:

Essentially the steps are

1. Clone the project
2. Run npm ci; npm run compile
3. Open the project in VS Code, start it using the Run and Debug menu
4. Open the test.ipynb file
5. Execute the first cell

Important note

I could not build the project on latest webview-ui-toolkit, I got the following error:

So I ended up reverting the version to 0.9.2

[hawkticehurst]

Thank you for the reproduction it has been immensely helpful!

A couple of updates:

• I was also able to confirm that the correct VS Code CSS variables are being loaded into a notebook context (just as @mjbvz showed)
• I confirmed that the toolkit components are using the fallback set of CSS variables (i.e. default dark theme) instead of the current theme variables –– this is the key issue to resolve
• The issue you had with updating to the most recent version of the toolkit was a Webpack 5 issue

Update the toolkit to the latest version and then update the module.rules section of your webpack config with the following:

{ 
  test: /\.m?js/, 
  resolve: { 
    fullySpecified: false 
  } 
}

The most recent toolkit version, unfortunately, does not solve the original theming issue (but at least your buttons will have rounded corners now 🤷🏻‍♂️😅):

Signing off for today, but I'll keep diving into why the toolkit components are not correctly picking up the theme variables in this context over the next week or two as I have time.

[pwang347]

@hawkticehurst good to know about the workaround, and thanks for taking a look!

[znorman-harris]

Any updates on this issue? I'm thinking about using the components for a notebook renderer as well and can see it is still a problem.