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 theme.

Available Brands and Themes

Three brands are available: qualcomm, snapdragon, and dragonwing.

Each brand supports both a light and dark theme.

Theme Switching

We've built the CSS to enable dynamic switching without rebuilding.

Import CSS

First import the theme CSS for your chosen brand. We'll demo with qualcomm:

@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";

If you're using Tailwind, you should import the theme CSS at the components layer instead:

@import "tailwindcss";

@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css" layer(components);
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css" layer(components);

Apply Data Attributes

Pick a DOM element. This is typically html or body.
Apply the brand to the element using the brand data attribute: data-brand="qualcomm" (or snapdragon / dragonwing).
Apply data-theme="dark" or data-theme="light" to the element.

Example:

<html data-brand="qualcomm" data-theme="dark">
  <!-- the rest of your app -->
</html>

All descendants of this subtree 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.

Enforce a Specific Theme

The following example shows how to enforce a specific theme on a subtree.

Brand

This section will always feature the dark theme regardless of the active theme.

Vite / Webpack / etc.

Setup

Tailwind CSS