Help us translate

This document is translated by the community. You can contribute on Crowdin. We appreciate your cooperation 🙏.

Themes

Themes can be used to change the look and feel of the Misskey client.

Theme settings

Settings > Themes

Creating a theme

Themes are described as JSON5 objects, written in the format shown below:

{
    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. UUID recommended.
  • name ... The name of the theme
  • author ... The author of the theme
  • desc ... The description of the theme (optional)
  • base ... Whether the theme is 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 below.

Definitions Used in Theme Styles

The styles used in a theme are defined in the props property.

Syntax for Values

  • Hexadecimal colours
    • e.g. #00ff00
  • RGB colors with rgb(r, g, b) syntax
    • e.g. rgb(0,255,0)
  • RGBA colors with rgb(r, g, b, a) 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

Functions are useful when you would like to use a slight variation of an existing color, for example, to brighten a button when hovering over it.

Functions take the form: :{function-name}<{argument}<{color}

props: {
    accent: '#86b300',
    accentDarken: ':darken<10<#86b300',
    accentLighten: ':lighten<10<@accent'
}
List of Functions
  • lighten ... Returns the color obtained by increasing the lightness of the specified color by the given amount (0-100). The lightness of the color can range from 0-100. Providing 100 will always return white.
  • darken ... Returns the color obtained by decreasing the lightness of the specified color by the given amount (0-100). Providing 100 will always return black.
  • alpha ... Return the color with the transparency (alpha) value set to the given argument (0.0-1.0).
    • 0.0 is completely transparent, while 1.0 is completely opaque.
  • hue ... Return the color obtained by spinning the hue by the given amount (-360 to 360).
  • saturate ... Returns the color obtained by increasing the saturation by the given amount (0-100). The saturation of the color can range from 0-100.

Distributing Themes

Since v2023.11.0, you can install themes directly from a website with one click.

Refer to the Plugin API Reference for information on what APIs are available. See also the documentation on distributing plugins and themes.