mirror of
https://codeberg.org/yeentown/barkey.git
synced 2025-10-07 01:45:42 +00:00
8b9c445fef
* New translations ja-JP.yml (French) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Italian) * New translations ja-JP.yml (Korean) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English) * New translations api.md (Korean) * New translations mfm.md (Korean) * New translations api.md (Korean) * New translations timelines.md (Spanish) * New translations timelines.md (Spanish) * New translations timelines.md (Spanish) * New translations theme.md (Spanish) * New translations ja-JP.yml (Chinese Simplified) * New translations theme.md (Spanish) * New translations theme.md (Spanish) * New translations theme.md (Spanish) * New translations theme.md (Spanish) * New translations theme.md (Spanish) * New translations theme.md (Spanish) * New translations stream.md (Spanish) * New translations stream.md (Spanish) * New translations stream.md (Spanish) * New translations stream.md (Spanish)
68 lines
3 KiB
Markdown
68 lines
3 KiB
Markdown
# 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
|