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
|
# Farbthemen
Durch die Verwendung von Farbthemen kann das Aussehen des Misskey-Clients verändert werden.
## Themeneinstellungen
Einstellungen > Farbthemen
## Erstellung eines Themas
Themencodes werden im Format eines JSON5-Objekts gespeichert. Themen werden wie das folgende Objekt dargestellt:
``` 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` ... Die einzigartige Identifikation des Themas.Verwendung von UUIDs ist empfohlen.
* `name` ... Name des Themas
* `author` ... Ersteller des Themas
* `desc` ... Beschreibung des Themas (optional)
* `base` ... Ob dies ein Thema für den Hell- oder Dunkelmodus ist
* Wird `light` angegeben, so wird es als Thema des Hellmodus angezeigt, wird `dark` angegeben, so wird es als Thema des Dunkelmodus angezeigt.
* Das Thema erbt die Eigenschaften der hier eingestellten Vorlage.
* `props` ... Definitionen der Themenoptionen.Diese werden im folgenden erläutert.
### Definition von Themenoptionen
Die Optionen des Themas werden in `props` definiert. Die Schlüssel werden zu CSS-Variablen, die Werte geben den Inhalt an. Zusätzlich werden die `props` des gewählten Basisthemas von diesem Thema geerbt. Ist die `base` dieses Themas auf `light` gesetzt, so werden sie aus [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5) kopiert, ist sie auf `dark` gesetzt, so werden sie aus [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5) kopiert. Beispielsweise wird, falls sich in den `props` dieses Themas keine Definition für den Schlüssel `panel` befindet, so wird der Wert von `panel` aus dem Basisthema verwendet.
#### Syntax für Wertangaben
* Hexadezimalfarben
* z.B.: `#00ff00`
* RGB-Farben mit `rgb(r, g, b)`-Syntax
* z.B.: `rgb(0, 255, 0)`
* RGBA-Farben mit `rgb(r, g, b, a)`-Syntax
* z.B.: `rgba(0, 255, 0, 0.5)`
* Werte anderer Schlüssel referenzieren
* Durch das angeben von `@{Schlüsselname}` wird dies durch eine Referenz auf den Wert des gegebenen Schlüssels ersetzt.Ersetze `{Schlüsselname}` mit dem Namen des Schlüssels, der referenziert werden soll.
* z.B.: `@panel`
* Konstantenreferenz (später erläutert)
* Durch das angeben von `${Konstantenname}` wird dies durch eine Referenz auf den Wert der angegebenen Konstante ersetzt.Ersetze `{Konstantenname}` durch den Namen der Konstanten, die referenziert werden soll.
* z.B.: `$main`
* Funktionen (später erläutert)
* `:{Funktionsname}<{Parameter}<{Farbe}`
#### Konstante
In Fällen, in denen ein Wert nicht als CSS-Variable angesehen werden soll, sondern als Wert für eine andere CSS-Variable verwendet werden soll, eignet sich die Verwendung einer Konstante. Wird ein Wert mit einem `$`-Präfix versehen, so wird er nicht als CSS-Variable, sondern als Referenz angesehen.
#### Funktionen
wip
|
