Webview: allow me to adjust my content based on theme

[bpasero]

I am providing content to the webview via my extension. The user can switch between dark and light theme so I would like my content to adjust based on the selected theme.

I think the simplest solution would be to just set a CSS class on the container I am hosted in that reflects the theme that is being used (light or dark).

Another thought I had was to maybe leverage CSS variables that are available in recent Chrome releases (https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en). I could get access to the base colors a theme defines via variables.

In the end, maybe both things are desired.

@jrieken fyi

[jrieken]

theme so I would like my content to adjust based on the selected theme.

that sounds like an event but I don't know if we need that. By default, some styles where defined in the * selector. I have know a change where those styles are applied to the body only but its values come from corresponding variables, like so:

:root {
    --background-color: ${backgroundColor};
    --color: ${color};
    --font-family: ${fontFamily};
    --font-size: ${fontSize};
}

Unsure if that's what you want. Is it that you need to set more styles and need different variables?

[bpasero]

Given that @kieferrm took the markdown extension over, maybe he can chime in how he expects support for dark and light theme to work.

[jrieken]

@kieferrm Can you enlighten me with what you are planning there?

[jrieken]

I think we are good here