3.0 KiB

Raw Blame History

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í:

{
    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 si el base de este tema es light, y _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

3.0 KiB Raw Blame History