69 lines
2.9 KiB
Markdown
69 lines
2.9 KiB
Markdown
# Themes
|
|
|
|
You can change the appearance of the Misskey client by setting a theme.
|
|
|
|
## Theme settings
|
|
Settings > Themes
|
|
|
|
## Creating a theme
|
|
Theme codes are saved as a JSON5 object of theme options. Themes are composed of the following options.
|
|
``` js
|
|
{
|
|
id: '17587283-dd92-4a2c-a22c-be0637c9e22a',
|
|
|
|
name: 'Danboard',
|
|
author: 'syuilo',
|
|
|
|
base: 'light',
|
|
|
|
props: {
|
|
accent: 'rgb(218, 141, 49)',
|
|
bg: 'rgb(218, 212, 190)',
|
|
fg: 'rgb(115, 108, 92)',
|
|
panel: 'rgb(236, 232, 220)',
|
|
renote: 'rgb(100, 152, 106)',
|
|
link: 'rgb(100, 152, 106)',
|
|
mention: '@accent',
|
|
hashtag: 'rgb(100, 152, 106)',
|
|
header: 'rgba(239, 227, 213, 0.75)',
|
|
navBg: 'rgb(216, 206, 182)',
|
|
inputBorder: 'rgba(0, 0, 0, 0.1)',
|
|
},
|
|
}
|
|
|
|
```
|
|
|
|
* `id` ... A unique theme ID.Using an UUID is recommended.
|
|
* `name` ... The name of the theme
|
|
* `author` ... The creator of the theme
|
|
* `desc` ... A description of the theme (optional)
|
|
* `base` ... Whether the theme is based on a light or dark theme
|
|
* If you set it to `light` the theme will be listed as a light mode theme, if you set it to `dark` it will be listed as a dark mode theme.
|
|
* The theme will be inheriting the default values of the theme specified here.
|
|
* `props` ... The style definitions of the theme.These will be explained in the following.
|
|
|
|
### Theme style definitions
|
|
Define the style of the theme within `props`. The keys will become CSS variables, and the value specifies the content. In addition, the default `props` options are inherited from the base theme. If this theme's `base` is `light`, they will be copied from [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5), if it is `dark` they will be copied from [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5). In other words, if there is for example no `panel` key contained in `props`, then the value of `panel` from the base theme will be used.
|
|
|
|
#### Syntax for values
|
|
* Hex colors
|
|
* E.g.: `#00ff00`
|
|
* RGB colors with `rgb(r, g, b)` syntax
|
|
* E.g.: `rgb(0, 255, 0)`
|
|
* RGBA colors with `rgb(r, g, b)` syntax
|
|
* E.g.: `rgba(0, 255, 0, 0.5)`
|
|
* References to values of other keys
|
|
* If you write `@{key-name}` the value of the given key will be used.Replace `{key-name}` with the name of the key to reference.
|
|
* E.g.: `@panel`
|
|
* Constants (see below)
|
|
* If you write `${constant-name}` the value of the given constant will be used.Replace `{constant-name}` with the name of the constant to reference.
|
|
* E.g.: `$main`
|
|
* Functions (see below)
|
|
* `:{function-name}<{argument}<{color}`
|
|
|
|
#### Constants
|
|
In cases where you have a value that you don't want to output as a CSS variable, but want to use it as the value of another CSS variable, you can use a constant. If you prefix the name of a key with a `$`, it will be not be used as a CSS variable, but a referenced value.
|
|
|
|
#### Functions
|
|
wip
|