> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dqlabs.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Mode

> How to switch between Light, Dark, and Color modes in Prizm, and what each mode changes in the interface.

<script type="application/ld+json">
  {`{
            "@context": "https://schema.org",
            "@type": "TechArticle",
            "headline": "Color Mode",
            "description": "How to switch between Light, Dark, and Color modes in Prizm, and what each mode changes in the interface.",
            "url": "https://docs.dqlabs.ai/color-mode",
            "publisher": {
              "@type": "Organization",
              "name": "DQLabs Inc",
              "logo": "https://media.brand.dev/332adc35-5bc4-4d2b-bf78-256aa4a5e414.svg"
            }
            }`}
</script>

Prizm supports three display modes accessible from the **toggle button in the header**:

<Frame>
  <img src="https://mintcdn.com/dqlabs/csSwVkLypZ41fRtE/images/image-133.png?fit=max&auto=format&n=csSwVkLypZ41fRtE&q=85&s=4ab2a77c642c2b5178772da7c8d67951" alt="Image" width="920" height="100" data-path="images/image-133.png" />
</Frame>

| Mode           | Description                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------ |
| **Light Mode** | Default white/light gray background with neutral text — suitable for most environments           |
| **Dark Mode**  | Dark background with high-contrast text — reduces eye strain in low-light environments           |
| **Color Mode** | Light/gray base with selective use of red and blue to highlight meaning and AI-assisted elements |

## Color Mode

Color Mode keeps the neutral gray base of Light Mode and adds color **selectively** — only where it carries semantic meaning. This prevents visual clutter while making critical signals immediately recognizable.

### Primary red — critical and active states

Red is used for elements that require attention or indicate the active state:

* Active navigation tabs and tab underlines
* Selected items in lists and catalogs
* Active focus indicators
* AI suggestion accents (borders and icons)
* Primary call-to-action buttons
* Critical alert and severity badges
* Important action highlights

### Secondary blue — informational and metadata

Blue is used for informational and supporting elements that reference other content:

* Metadata chips (Domain, Product, Tag labels)
* Linked asset references
* Lineage references and node connections
* Informational pill badges
* Secondary actions

### Design constraints

* Backgrounds and most cards remain neutral/light gray — color is not used as a background fill.
* Red remains visually dominant over blue across the interface.
* Blue is for informational or supporting context only — never for critical states.
* Hover, selected, and active states are consistent across all components.

### Components affected by Color Mode

* Top navigation
* Tabs and tab underlines
* Status badges (alert severity, asset status)
* AI suggestion cards
* Metadata chips and tags
* Alert state indicators
* Lineage graph nodes
* Primary and secondary buttons
* Hover and selected states

## Switching modes

Click the **Toggle theme** button in the top-right header. The selection persists across sessions for your user account.