---
title: "Styling Themes"
description: "Styling themes allow you to change the visual appearance of your interface, including background colors, text colors, and borders. By using predefined color schemes, you can ensure your application..."
last_updated: "2026-07-02T09:48:33.64641+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/how-to-guides/styling-themes"
---

Styling themes allow you to change the visual appearance of your interface, including background colors, text colors, and borders. By using predefined color schemes, you can ensure your application remains visually consistent while providing support for both light and dark display modes.

## Understanding Themes
A theme is a collection of color settings that dictate how different parts of your interface look. The system uses a set of standardized color definitions, such as:

*   **Background:** The base color of your screens and pages.
*   **Foreground:** The primary color used for text and icons.
*   **Primary:** The color used for interactive elements like buttons and active states.
*   **Muted/Secondary:** Colors used for less prominent interface elements, like sidebars or labels.

## Using Dark Mode
The system automatically adapts to your preferences. When "Dark Mode" is active, the theme colors shift to darker, more comfortable tones to reduce eye strain, while maintaining high readability for text and icons.

> [!NOTE]
> The theme automatically swaps your color palette when the system-wide dark mode setting is toggled on or off.

## Available Color Roles
The following table outlines how different color roles are used across the interface:

| Color Role | Description |
| :--- | :--- |
| Background | Main page surface color |
| Foreground | Text and primary icons |
| Primary | Important actions and highlights |
| Accent | Secondary highlights or hover states |
| Border | Lines separating interface elements |
| Muted | Less important text or background areas |

## Tips for Consistent Styling
*   **Maintain Contrast:** Always ensure that your chosen "Foreground" color provides enough contrast against the "Background" color to keep your content readable.
*   **Use Semantic Names:** When customizing or extending styles, refer to the color roles (e.g., `primary`, `muted`) rather than specific color names. This ensures that if you switch to a different theme later, your interface colors will update automatically to match the new style.

## Best Practices
> [!TIP]
> If you are designing custom components, use the "Primary" color for buttons or links that represent the most important user actions on the page.

> [!WARNING]
> Do not hardcode specific colors for primary interface elements. Using the built-in theme variables ensures your application will respect user preferences like High Contrast mode or Dark Mode.

## Related

- [Navigation Layouts](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/core-features/navigation-layouts)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.