Overview
Styling with CSS Variables
QUI Components use CSS Variables for properties like color, background-color, and border-color. Instead of hardcoded values, components reference variables that change based on the active brand and theme.
- Three brands are available:
qualcomm,snapdragon, anddragonwing. - Each brand supports both a
lightanddarktheme.
The CSS is built to enable dynamic switching without rebuilding.
If you need to apply the theme data attributes manually instead of using QdsThemeService:
- Pick a DOM element (typically
htmlorbody) - Apply the brand:
data-brand="qualcomm"(orsnapdragon/dragonwing) - Apply the theme:
data-theme="dark"ordata-theme="light"
Example:
<html data-brand="qualcomm" data-theme="dark">
<!-- the rest of your app -->
</html>All descendants inherit that theme unless overridden by a closer parent.
Both attributes are required
You must apply both the data-brand and data-theme attributes to the element in order for the theme to take effect.
Switching the Theme at Runtime
You can switch the theme at runtime using the QdsThemeService:
<button
emphasis="primary"
id="qds-theme-switcher-demo-2"
q-button
variant="fill"
[endIcon]="themeIcon()"
(click)="themeService.toggleTheme()"
>
Toggle Site Theme
</button>Force a Specific Theme on a Subtree
The following example shows how to enforce a specific theme on a subtree. You must apply both the data-brand and data-theme attributes to the element in order for the theme to take effect.
<div class="dark" data-brand="qualcomm" data-theme="dark">
<div
class="border-neutral-03 bg-neutral-01 flex w-full rounded-sm border px-3 py-2"
>
<span class="text-neutral-primary">
This section will always feature the dark theme regardless of the
active theme.
</span>
</div>
</div>