1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
# 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
|
