Themes & Modes

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.

Endava theme

The endava theme follows the Endava brand portal, the Endava brand guide, and the color tokens used on endava.com. It keeps the brand’s colors wherever they meet WCAG 2.1 Level AA, and uses a nearby shade where they don’t.

Brand and accent: Red Orange #FF5640 is the brand fill. Accent aliases the brand, so --bq-accent-* matches --bq-brand-*.
Brand text: --bq-brand-strong (light mode text, icons, strokes, and focus) and --bq-brand-bright (dark mode) are both Red Orange #FF5640, so brand text and indicators match the brand fill, as on endava.com. Contrast limits are listed in the deviation log.
Neutrals: Solid Blue #192B37 is the darkest neutral (--bq-neutral-950). --bq-black is the slightly darker #14222C (--bq-endava-grey-1000), so on-colors reach more contrast on the dark mode fills.
Info: uses the endava.com accent blues so it stays distinct from neutral UI. Mid Blue #417191 is the light mode fill, #3B6684 is light mode text, and #9DCFF0 (a tint of Bright Blue #68B5E8) is dark mode text and fill.
Dark mode fills: info, success, warning, and danger fills use their -bright step, with --bq-black (#14222C) as the on-color.
Signal colors: dark mode success and warning use the brand guide’s dark Positive #3DD17B and Warning #F99C11 for text, icons, strokes, and fills. Dark danger is the brand Negative #E84641. Light mode signal colors use nearby shades. Contrast limits and overrides are listed in the deviation log.
Data colors: come from the brand portal palette. The brand asks for primary colors and Solid Blue shades first, so start charts with --bq-data-01 (Red Orange), --bq-data-11 (Solid Blue), --bq-data-12 (white), and --bq-neutral-* shades. Add --bq-data-02 to --bq-data-10 only when you need more series.

White text on Red Orange is 3.15:1, below the 4.5:1 minimum for normal text. BEEQ keeps it for --bq-text--on-brand and --bq-text--on-accent to match the brand, so only use it for large text (24px, or 18.66px bold) and non-text UI elements. The brand guide applies the same limit and excludes Solid Blue on Red Orange, so white is the only on-color the brand allows. If your product needs 4.5:1 on brand fills, use the darker brand-contrast orange from endava.com:

:root[bq-theme="endava"] {
  --bq-ui--brand:  #d63b10;
  --bq-ui--accent: #d63b10;
}

White on #D63B10 is 4.67:1 at rest, 5.61:1 on hover, and 6.16:1 on active. For more contrast, use #C33600 (var(--bq-endava-orange-800)) instead: 5.46:1 at rest, 6.36:1 on hover, and 7.01:1 on active.

In the Endava theme, use --bq-text--secondary only on --bq-background--primary, --bq-background--secondary, --bq-ui--primary, and --bq-ui--secondary. On other surfaces, such as --bq-ui--tertiary or the intent tints, it can fall below 4.5:1.

Where BEEQ differs from the brand

Deviation log

Brand value	BEEQ value	Reason
Light brand text `#E03E00` (kit), `#D63B10` (endava.com)	`--bq-brand-strong` Red Orange `#FF5640`, same as the brand fill	Brand fidelity over contrast: brand text, icons, strokes, and focus match the brand fill they sit next to (buttons, tabs, checkboxes). 3.15:1 on white, so AA for large text and non-text UI only. On Blue 10 (2.61:1) and the brand tint (2.81:1) it’s below 3:1. Avoid small brand text on those surfaces. Override `--bq-brand-strong` with `#C33600` for 4.5:1 on every light surface.
Dark brand text Red Orange (endava.com)	`--bq-brand-bright` `#FF5640`, same as the brand	Brand fidelity over contrast: 4.62:1 on the base surface, but 3.40:1 on raised surfaces and 3.77:1 on the brand tint, so AA for large text only there (APCA Lc 35–41). Override `--bq-brand-bright` with `#FF8979` for 4.5:1 on every dark surface.
Warning text `#C77905`	`--bq-warning-strong` `#975C04`	`#C77905` is 3.41:1 on white.
Light warning fill `#EB9410`	Warning fill `#F99C11` in light mode	Solid Blue on `#EB9410` drops to 4.33:1 when active.
Light success fill `#2D9C5B`	Success fill `#26864E`	Neither white (3.49:1) nor Solid Blue (4.17:1) passes on `#2D9C5B`.
Light success / warning borders `#2D9C5B` / `#EB9410`	`--bq-stroke--success` / `--bq-stroke--warning` use the strong step (`#1D633A` / `#975C04`)	On Blue 10, `#2D9C5B` is 2.89:1 and `#EB9410` is 1.98:1, below the 3:1 minimum for borders.
Dark danger `#E84641`	`--bq-danger-bright` `#E84641`, same as the brand	Brand fidelity over contrast. Danger text, icons, and strokes are 3.73:1 on the base surface and 3.19:1 on the danger tint, so AA for large text only there. On raised surfaces (Blue 90) they are 2.75:1, below even the 3:1 minimum for large text and icons (APCA Lc 27–33). Avoid small danger text on raised surfaces. Override `--bq-danger-bright` with `#F6B5B3` for 4.5:1 and APCA Lc 60 on every dark surface.
Solid Blue as `--bq-black`	`--bq-black` `#14222C`	Solid Blue on the dark danger fill is 3.73:1. `#14222C` raises it to 4.16:1, which is AA for large text and UI components but still below 4.5:1 for normal text. It also darkens `--bq-data-11`, which the brand portal lists as Solid Blue.
Hover and active colors	`color-mix()` with `--bq-hover` / `--bq-active`	Same state model as the default theme.
Disabled colors	Opacity set per component	Same state model as the default theme.
Dark secondary / tertiary surfaces Blue 80 / Blue 60	Blue 90 `#30404B` / Blue 80 `#47555F`	Secondary text fails on Blue 60.
Shades only for Solid Blue	Red Orange tints (`--bq-brand-light`, `--bq-brand-dark`)	Selected states need a subtle tint in each mode.
White on Red Orange only for call-to-action boxes and large text	White on all brand fills, including small button labels	Solid Blue on Red Orange is excluded by the brand, so white is the only brand on-color. See the warning above.
Info icon and text Solid Blue (light) / white (dark), from the kit and endava.com	`--bq-info-*` built from the endava.com accent blues: Mid Blue `#417191` (light fill), `#3B6684` (light text), `#9DCFF0` (dark text and fill)	Solid Blue and white are also the neutral colors, so info alerts, notifications, and tags looked neutral.
Illustration accent colors	Only Mid Blue and Bright Blue, for info	The brand portal limits them to illustrations. BEEQ uses the two blues for info only; the other accent colors are not included.

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.

Get started

Frameworks

Foundations

Theming & customization

Guides

Applying themes

Using HTML attributes

Using CSS classes

Applying modes

Using HTML attributes

Using CSS classes

Combining modes

User’s color scheme preferences

Example

Endava theme

Where BEEQ differs from the brand

Next steps

Custom Theme

Global CSS Variables

​Applying themes

​Using HTML attributes

​Using CSS classes

​Applying modes

​Using HTML attributes

​Using CSS classes

​Combining modes

​User’s color scheme preferences

​Example

​Endava theme

​Where BEEQ differs from the brand

​Next steps

Custom Theme

Global CSS Variables

Applying themes

Using HTML attributes

Using CSS classes

Applying modes

Using HTML attributes

Using CSS classes

Combining modes

User’s color scheme preferences

Example

Endava theme

Where BEEQ differs from the brand

Next steps