Multiple themes design token references wrong theme

[shotor]

I'm trying to follow the multiple theme setup described here: https://shoelace.style/getting-started/themes#using-multiple-themes

I'm using LitElement 3.x

So I have the class sl-theme-light set on my html tag. I'm including both the light and dark theme css in my html head.

Then I have a certain component called top-bar. Inside I set the class to sl-theme-dark. Then use the variable --sl-color-gray-200 for the background.

The background color is however a light gray, instead of the dark gray that I expect. Changing the html class to sl-theme-dark does make the background color dark, it's just the multiple themes activation part that I don't understand.

Am I missing a step or misunderstanding this setup?

export class TopBar extends MobxLitElement {
  private user = user

  static styles = [
    css`
      .top-bar {
        height: 60px;
        background: var(--sl-color-gray-200);
      }
    `,
  ]

  render() {
    return html`<div
      class="${classMap({
        'sl-theme-dark': true,
        'top-bar': true,
      })}"
    >
      ${this.user.name}
    </div>`
  }
}

[KonnorRogers]

Yea the key piece is that the class needs to live on the host element outside of the shadow DOM.

In your render function you would have to do something like:

render () {
  this.classList.add("sl-theme-dark")
  return html``
}

[shotor]

Tried that, no change.

Also tried adding the class to where the topbar is referenced: <top-bar class="sl-theme-dark"></top-bar>

[KonnorRogers]

@shotor are your importing the dark css stylesheet? Do you have a reproduction I could look at?

[shotor]

@shotor are your importing the dark css stylesheet? Do you have a reproduction I could look at?

I am importing it. Unfortunately no repo I can share at the moment. Will share one tomorrow