in app theme switcher ?!

[s-light]

hello community,
what is the best way to add an in-app theme switcher drop-down?
light/dark is already implemented.

should i go similar way as suggested in
https://quasar.dev/style/color-palette#dynamic-change-of-brand-colors-dynamic-theme-colors-
or does it make more sens to dynamically add css files?
or body classes with the theme-prefix and a theme-specific css that uses the prefix?!

currently i have no idea.. ;-)
the default should be the out-of-the-box quasar defaults.

and then there needs to be one or two custom ones..

(at least that is my current idea)

[Munaro]

I built a solution to manage dynamic themes per client that relies on a combination of Pinia for centralization and Quasar's CSS Variables utilities for application.

This approach ensures that business rules and theme state are maintained in a single, accessible location.

1. Centralization with Pinia (Store)

I used a dedicated Pinia Store to concentrate:

• Business Rules: The logic to identify the client (usually via URL) and determine which theme to load.
• Theme State: Stores the active color scheme and the client's visual identity (currentBrand).

2. Client Schemas and Application

I keep all color schemes and visual identities defined per client. The moment a user accesses the system through the client's specific URL, the Pinia Store identifies the client.

The application of colors is done instantly using Quasar's setCssVar function. This overwrites the global CSS variables, adapting the visual interface.

The code snippet for applying the primary color, which respects Quasar's current color mode, is very concise:

import { Dark, setCssVar } from 'quasar';
// 'currentBrand' is obtained from the Store after client identification

// 1. Determines which theme object (light or dark) should be used
const themeMode = Dark.isActive ? "dark" : "light"; 

// 2. Applies the dynamic primary color, changing the global CSS variable
setCssVar("primary", currentBrand.value.brand[themeMode].primary);

// This method works very well for any Quasar variable (secondary, accent, etc.).