[DRAFT] Chat: set theme provided by Agent IDE

[abeatrix]

CLOSE https://linear.app/sourcegraph/issue/CODY-2462/implement-the-webview-side-of-dom-css-theme-plumbing

This change adds the ability to set the webview theme based on the theme provided by the Agent IDE. The SimpleChatPanelProvider now checks for a theme from the IDE and sends a ui/theme message to the webview with the CSS variables to apply the theme.

The App component in the webview then listens for the ui/theme message and applies the provided CSS variables to the root element.

This allows the webview to match the theme of the Agent IDE, providing a more consistent user experience.

Test plan

TBC. Need to implement the changes on JB to test.

[dominiccooney]

@abeatrix , I've pushed a small update:

• Uses CSSOM to set the variables.
• Relies on the client producing valid CSS variable names.
• Renames css to cssVariables and gives it that {[key: string]: string} type.
• Also sets the data-ide attribute. This is the one you should switch your theme remapping stylesheet off.

I pushed 78cb8e06cf76d249c6e61aab93f74dd9b3613e96 to sourcegraph/jetbrains dpc/web-content branch which sends this.

I'm also sending an "isDark" property, do you need that? High contrast mode?

Here's what the prototype webview looks like in the inspector now:

You can test this, maybe this can be the start of a manual test plan for your PR:

1. CODY_DIR=/Users/dpc/projects/cody ./gradlew :runIDE -PforceAgentBuild=true
2. Open Cody Experimental Chat UX sidebar, right click, Open DevTools
3. Check that a ton of JetBrains theme variables appear.
4. Check that the values parse OK, for example document.body.style.background = 'var(--jetbrains-textText)' should change the background color to the same color as the label "Cody Experimental Chat UX"
5. Changing the theme and the background color should change.

(It takes forever to reach DOMContentLoaded, will worry about that later.)