Custom Themes

Custom themes are installed in the Application Support directory:

• Linux: ~/.local/share/chat.commet.commetapp/theme/custom/My Theme
• Flatpak: ~/.var/app/chat.commet.commetapp/theme/custom/My Theme

Themes are bundled as a zip file containing a theme.json file, and optionally an image file, allowing them to be shared and installed via the UI.

My Theme.zip/
├─ theme.json
├─ some_image.png

JSON

Themes are defined in a json file. Most fields are optional, but the most important field is base which defines the base on which the custom theme will be built.

value	Description
light	Standard light theme
dark	Standard dark theme
you_light	"Material You" color scheme, dark variant
you_dark	"Material You" color scheme, light variant

{
    "base": "light"
}

Foundation

Commet is build on a system of "Foundation" and "Tiles".

Foundation is essentially the background, which the rest of the UI is built over the top of. For the most part this will be either a static color or an image.

Tiles then refer to the different segments of the UI which are placed upon the Foundation

Example foundation:

{
    "foundation": {
        "image": {
            "file": "some_image.png",
            "alignment": "centerRight",
            "fit": "fitHeight"
        },
        "color": "#00CEFF"
    },
}

The image's alignment and fit can be tweaked:

Alignment

• topLeft
• topCenter
• topRight
• centerLeft
• center
• centerRight
• bottomLeft
• bottomCenter
• bottomRight

Fit (see)

• fill
• contain
• cover
• fitWidth
• fitHeight
• none
• scaledDown

Color Scheme

Commet follows Material Design 3 color scheme, see here. Most fields follow the names defined in the Material spec.

Color Seed

Material provides functionality to generate a color scheme based on a seed color, which can be using the seed property, as well as dynamicSchemeVariant to define how the scheme gets generated see docs:

{
    "colorScheme": {
        "seed": "#0452f9",
        "dynamicSchemeVariant": "tonalSpot"
    }
}

Dynamic Scheme Variant (docs)[https://api.flutter.dev/flutter/material/DynamicSchemeVariant.html]

• tonalSpot
• tonalSpot
• tonalSpot
• tonalSpot

Extra Colors

There are a couple of extra colors that can also be defined:

• codeHighlight - color of <code> lines
• links - color of URLs in chat

Material Colors

• primary
• onPrimary
• primaryContainer
• onPrimaryContainer
• primaryFixed
• primaryFixedDim
• onPrimaryFixed
• onPrimaryFixedVariant
• secondary
• onSecondary
• secondaryContainer
• onSecondaryContainer
• secondaryFixed
• secondaryFixedDim
• onSecondaryFixed
• onSecondaryFixedVariant
• tertiary
• onTertiary
• tertiaryContainer
• onTertiaryContainer
• tertiaryFixed
• tertiaryFixedDim
• onTertiaryFixed
• onTertiaryFixedVariant
• error
• onError
• errorContainer
• onErrorContainer
• outline
• outlineVariant
• surface
• onSurface
• surfaceDim
• surfaceBright
• surfaceContainerLowest
• surfaceContainerLow
• surfaceContainer
• surfaceContainerHigh
• surfaceContainerHighest
• onSurfaceVariant
• inverseSurface
• onInverseSurface
• inversePrimary
• shadow
• scrim
• surfaceTint