Appearance

How to use — Themes ​

Themes are app-level. Your plugin uses whatever UI kit and mode the host application configured (today usually Vuetify: light, dark, high-contrast). Plugins do not define the portal-wide theme.

In widgets ​

  • Use Vuetify components and theme tokens so widgets stay readable in every app mode.
  • Avoid hard-coded colors that only work in light mode.
  • Do not replace the root Vuetify theme from a plugin unless you intentionally accept app-wide impact — see Exporting components & styles and cookbook examples.

Accessing and Switching the Theme from within a custom widget ​

You can either control the portal wide theming directly via vuetify, or via the plugin Api in your widgets. To prevent your components from the need of possible migrations, we recommend the following approach.

Getting the current theme ​

typescript
const { $store } = usePluginApi()
const uiState = $store.getUiState()

console.log(uiState.value.theme)

Changing the current theme ​

typescript
const { $store } = usePluginApi()
const uiState = $store.getUiState()

$store.setUiState({ theme: "light" })

App owners switch appearance globally (user setting or admin config), not per plugin.

Direction ​

A future Theme layer may map raclette UI primitives to Vuetify, Kern UX, etc. Until that is public API, follow the stack from create-raclette-app.

See also ​