---
id: theme
title: Theme
sidebar_label: Theme
keywords: [hyperglass, looking glass, web ui, gui, branding, theme]
description: Customize Theme
---

import Color from "../../src/components/Color";
import Font from "../../src/components/Font";
import PageLink from "../../src/components/PageLink";

## `theme`

### Parameters

| Parameter            |  Type  | Description                                                                                                                                      |
| :------------------- | :----: | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| `default_color_mode` | String | Sets the default color mode. Must be `light` or `dark`. If no default mode is specified, hyperglass will use the browser's preferred color mode. |

### Subsections

| Section  | Description  |             All Options              |
| :------- | :----------- | :----------------------------------: |
| `colors` | Theme colors | <PageLink to="#colors">➡️</PageLink> |
| `fonts`  | Theme fonts  | <PageLink to="#fonts">➡️</PageLink>  |

#### `colors`

| Parameter   |  Type  | Default                | Description                            |
| :---------- | :----: | :--------------------- | :------------------------------------- |
| `primary`   | String |                        | Primary accent color                   |
| `secondary` | String |                        | Secondary accent color                 |
| `success`   | String |                        | Success message/status color           |
| `warning`   | String |                        | Warning message/status color           |
| `error`     | String |                        | Error message/status color             |
| `danger`    | String |                        | Danger message/status color            |
| `dark`      | String | <Color hex="#121212"/> | Used as background color in dark mode  |
| `light`     | String | <Color hex="#f5f6f7"/> | Used as background color in light mode |
| `red`       | String | <Color hex="#d84b4b"/> | Used as `danger` color if undefined    |
| `orange`    | String | <Color hex="#ff6b35"/> | Used as `error` color if undefined     |
| `yellow`    | String | <Color hex="#edae49"/> | Used as `warning` color if undefined   |
| `green`     | String | <Color hex="#35b246"/> | Used as `success` color if undefined   |
| `cyan`      | String | <Color hex="#118ab2"/> | Used as `primary` color if undefined   |
| `blue`      | String | <Color hex="#314cb6"/> | Used as `secondary` color if undefined |
| `teal`      | String | <Color hex="#35b299"/> |                                        |
| `pink`      | String | <Color hex="#f2607d"/> |                                        |
| `purple`    | String | <Color hex="#8d30b5"/> |                                        |
| `gray`      | String | <Color hex="#c1c7cc"/> |                                        |

#### `fonts`

Currently, only [Google Fonts](https://fonts.google.com/) are supported.

| Parameter |  Type  | Default                  | Description                             |
| :-------- | :----: | :----------------------- | :-------------------------------------- |
| `body`    | String | <Font name="Nunito"/>    | Main body font                          |
| `mono`    | String | <Font name="Fira Code"/> | Monospace font, used for command output |
