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
|
# Tema
Eligiendo un tema, se puede cambiar la apariencia del cliente de Misskey
## Configuración del tema
Configuración > Tema
## Crear tema
El código del tema se guarda como un archivo JSON5. Un ejemplo de tema se puede ver aquí:
``` 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` ... Clave única del tema.Se recomienda un código UUID
* `name` ... Nombre del tema
* `author` ... Autor del tema
* `desc` ... Descripción del tema (opcional)
* `base` ... Si es un tema claro u oscuro
* Si se elige `light`, será un tema claro. Si se elige `dark`, será un tema oscuro.
* Aquí el tema hereda los valores por defecto del tema base elegido
* `props` ... Definición del estilo del tema. Esto se explica en lo siguiente.
### Definición del estilo del tema
Debajo de `props`, se define el estilo del tema. La clave es el nombre de las variables del CSS, y con los valores estos se configuran. Incluso más, este objeto `props` hereda los valores por defecto del tema base. El tema base es [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5) si el `base` de este tema es `light`, y [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5) si si el `base` de este tema es `dark` Resumiendo, aunque no haya una clave `panel` en el `props` del tema, se considera el <0>panel</0> del tema base.
#### Sintaxis de las variables
* Los colores en base hexadecimal
* Ej: `#00ff00`
* Los colores con la sintaxis `rgb(r, g, b)`
* Ej: `rgb(0, 255, 0)`
* Los colores con la sintaxis `rgb(r, g, b, a)` con un grado de transparencia
* Ej: `rgba(0, 255, 0, 0.5)`
* Referencias a valores de otras claves
* Escribiendo `@{nombre de clave}` se hace referencia al valor de la otra clave.Reemplace `{nombre de clave}` por el nombre de la clave al cual quiera hacer referencia.
* Ej: `@panel`
* Referencia a una constante (ver más abajo)
* Escribiendo `${nombre de la constante}` se hace referencia a la constante.Reemplace `{nombre de la constante}` por la constante al cual quiera hacer referencia.
* Ej: `$main`
* Funciones (ver más abajo)
* `:{nombre de la función}<{parámetros}<{color}`
#### Constantes
Cuando hay un valor que no se quiere generar como variable CSS pero sí se quiere reutilizar como valor de otra variable CSS, es conveniente usar constantes. Cuando a un nombre de clave se le añade como prefijo `$`, esa clave no será generada como una variable CSS.
#### funciones
wip
|
