Calcite-components: Bug: deprecate usage of the non-standard theme attribute

[eriklharper]

Actual Behavior

<div theme="dark"><!-- insert dark theme components here --></div>

Expected Behavior

<div class="calcite-theme--dark"><!-- insert dark theme components here --></div>

We should be using a CSS class to set the theme variables instead of the non-standard HTML attribute "theme". We will probably also need to set a --calcite-theme-name or similarly named CSS variable so components know what the current theme is set to.

Reproduction Steps or Sample

1.

Relevant Info

_Version_: @esri/calcite-components@<version>

• [ ] CDN
• [ ] NPM package

@driskull

[lpaniccia-crown]

If this moves to CSS, I'd love to have the option to match the user's system automatically with the prefers-color-scheme media query. Possibly with something like this:
<div class="calcite-theme--auto"><!-- insert components here. Theme will match the user's preferred color scheme.--></div>

[driskull]

yeah that would be possible as well.

[macandcheese]

If this moves to CSS, I'd love to have the option to match the user's system automatically with the prefers-color-scheme media query.`

+1, this would be a great addition !

[eriklharper]

@driskull can this issue be closed now?

[driskull]

Assigned to @caripizza . Don't want to verify my own issue.