Skip to main content
Themes and modes let you adapt the look and feel of your product to match different brand identities and user preferences — making BEEQ suitable for both consumer-facing apps and internal tools. BEEQ also supports mixing modes within the same layout, so individual sections can use a different color scheme from the rest of the page.
Explore related sections: Colors, Global CSS Variables, and Customization.

​
Applying themes

BEEQ lets you apply themes using either HTML attributes (recommended) or CSS classes, ensuring a consistent look for every application.

​
Using HTML attributes

Set the bq-theme attribute on the <html> element (recommended) or the <body> tag. 
<html bq-theme="beeq">
  <!-- Your content here -->
</html>

<html bq-theme="endava">
  <!-- Your content here -->
</html>

​
Using CSS classes

Alternatively, apply themes using CSS classes directly on the root element. 
<html class="beeq">
  <!-- Your content here -->
</html>

<html class="endava">
  <!-- Your content here -->
</html>
When applying a theme, maintain consistency and avoid mixing different themes throughout the app.

​
Applying modes

Modes let you switch between light and dark color schemes to match user preferences or specific app needs. You can control modes globally or for specific sections using HTML attributes or CSS classes.

​
Using HTML attributes

Set the bq-mode attribute to control the color scheme. 
<html bq-mode="dark">
  <!-- Your content here -->
</html>

<html bq-mode="light">
  <!-- Your content here -->
</html>

​
Using CSS classes

<html class="dark">
  <!-- Your content here -->
</html>

<html class="light">
  <!-- Your content here -->
</html>

​
Combining modes

You can mix and match modes at various levels of your layout. For instance, you might use dark mode for the main section of your app and switch to light mode for a nested component. 
<html bq-mode="dark">
  <body>
    <!-- Your content here -->
    <section bq-mode="light">
      <!-- This section applies light mode to all elements and components inside -->
    </section>
  </body>
</html>

​
User’s color scheme preferences

BEEQ does not automatically detect or apply the user’s preferred color scheme. It is up to you to control whether users see light or dark mode in your app. To provide a better experience:
  • Make the prefers-color-scheme setting your default.
  • Allow users to switch this option in your app.
  • Remember their choice and apply it when they log in or return to the app.
The prefers-color-scheme media query is not used by BEEQ automatically, as not all applications support dark mode, which might cause problems for those that don’t.

​
Example

Here is a working example showing how to read the user’s preferred color scheme on load and let them toggle it using a bq-switch.
Toggle the bq-switch in the live preview below to switch between light and dark mode. You can also use the Mintlify top-bar toggle to change the page mode and see how the theme variables adapt.

​
Next steps

Custom Theme

Follow the step-by-step guide to create and apply a fully custom theme to your app.

Global CSS Variables

Explore the color tokens and base variables that power BEEQ themes and modes.