forked from mirrors/thatmattlove-hyperglass
58 lines
3.4 KiB
Text
58 lines
3.4 KiB
Text
---
|
|
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 |
|
|
| `black` | String | <Color hex="#262626"/> | Used as background color in dark mode |
|
|
| `white` | String | <Color hex="#f7f7f7"/> | 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 |
|