Examples theme picker does not reflect selected theme

[jmuzina]

Describe the bug

The color theme selection control on the docs/examples pages always shows "Dark" as the selected theme. On initial load, it appears to default to "Light" theme but shows "Dark" as active. Clicking the theme buttons changes the theme for supported components but does not update which theme is highlighted in the theme selector; Dark theme is always highlighted.

To Reproduce

Steps to reproduce the behavior:

1. Go to any /docs/examples page. For example, https://vanillaframework.io/docs/examples/base/details
2. Observe that the light theme version of the component is shown.
3. Observe that "Dark" is highlighted in the theme picker at the bottom right.
4. Click "Dark" in the theme picker.
5. Observe that the component has now changed to the dark theme version.
6. Click "Light" in the theme picker.
7. Observe that the component has now changed to the light theme version.
8. Observe that "Dark" is still highlighted in the theme picker.

Expected behavior

The color theme picker always highlights the button for the currently selected color theme.

Screenshots

Desktop:

• OS: Ubuntu 22.04.4
• Browser: Firefox
• Version: 125.0.2 64-bit (Mozilla Firefox Snap for Ubuntu)

[bartaz]

Yes, the issue is there is no "selected" style at all in the picker. The style of the buttons reflects the theme itself, but none have a selected state.

It was kind of quickly hacked in when we worked on theming migration with guests, so it's not ideal.

If you want to play around @jmuzina you can try replacing current switcher with more appropriate component such as segmented control: https://vanillaframework.io/docs/patterns/segmented-control.

One issue you may get into is that currently Vanilla examples are not implementing the themes in consistent way, and not all of them have a default class name set on body, so it's not always trivial to tell which is the "current" theme when example loads.

Another cool feature we could introduce would be to reflect the theme in the URL /example?theme=dark and make it load in desired theme. This would allow us to easier test the same example in different themes just by changing the URL.

Feel free to play around during this week, and maybe we can turn this into something you could be working on while we are in Madrid.

[lyubomir-popov]

IMO just the words are enough, you could say:

Theme: [ dark ][ light ][ white ]