Skip to content

Themes

Beta Warning

Custom themes are not yet stable. There may be breaking changes in the future (see Migrations).

Chatterino supports custom-made themes since nightly 5d0bdc1.

Custom themes are JSON files that are stored in the Themes folder inside your Chatterino folder.

Creating A Theme

To create a theme, it's best to use one of the built-in themes as the starting point. You can find them in the resources/themes folder inside the source-code. Copy one into the Themes folder and restart Chatterino. When you open the settings and select a theme, you should see one prefixed with Custom:. Make sure, you're familiar with the common words used in Chatterino.

Schema

Chatterino themes have a JSON schema that must match in order for the theme to be displayed correctly. Many editors support JSON schemas out of the box and warn you about invalid values and provide completions.

If you used one of the base themes, then the $schema key inside the JSON is invalid, since its value is configured to work inside the Chatterino source-code. You should change the value of $schema to https://github.com/Chatterino/chatterino2/raw/master/docs/ChatterinoTheme.schema.json as shown below. If you want to pin the schema to a specific version, replace master with your desired version (for example v2.4.4).

{
    "$schema": "https://github.com/Chatterino/chatterino2/raw/master/docs/ChatterinoTheme.schema.json",
    // ...
}

Auto Reloading

When developing themes, you often want to reload your changes and see how they look. To aid you in doing that, Chatterino can automatically reload your theme. Use the /c2-theme-autoreload command in any chat to toggle auto-reload.

Warning

Make sure to disable auto-reloading after you're done with your changes to reduce resource usage.

Colors

Colors in themes can be specified in various ways. All values that expect a qt-color accept one of the following values. Make sure you're using the schema to get editor feedback. Technically, the values are passed to QColor which does the parsing.

Hex Colors

A, R, G, and B are single hex digits (0-9, a-f, A-F).

  • #RGB
  • #RRGGBB

  • #AARRGGBB This format is different from the CSS Color Moudle Level 4 <hex-color>, where the alpha value is at the end.

  • #RRRGGGBBB

  • #RRRRGGGGBBBB

Named Colors

  • SVG color keyword names - For example red, mediumspringgreen. Note that these color names are technically case-insensitive and accept spaces, but this isn't supported by the schema, which only accepts lower-case names.
  • transparent

Alternate editors

These are some alternate ways of creating your own custom themes:

Migrations

This section contains added, updated, and removed properties in a release, and commit for nightly versions.