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

When editing the theme.json file on disk, Commet will hot-reload the theme for ease of use.

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

Tiles and Caulk

As mentioned before, the Tile style just defines how a container of a certain section of the UI should look - similarly, Caulk refers to how the space between different tiles should be styled, and allows for things like outlines, corner radius and drop shadows to be defined

{
    "settings": {
        "caulkBorders": true,
        "caulkBorderRadius": 10,
        "caulkPadding": 20,
        "shadowBlurRadius": 10,
        "caulkStrokeThickness": 1
    },
    "shadows": [
        {
            "color": "#AAAAAA",
            "blurRadius": 2,
            "spreadRadius": 0,
            "offset": [
                5,
                5
            ]
        },
        {
            "color": "#FFFFFF",
            "blurRadius": 3,
            "spreadRadius": 0,
            "offset": [
                -3,
                -3
            ]
        }
    ]
}

Glass

Tiles can be defined to have a glass / frosted glass style, allowing them to become transparent and display a background image through themselves. Glass settings are defined by a sigma value and an opacity value, and follow the naming conventions of Material surfaces:

• surfaceSigma
• surfaceOpacity
• surfaceDimSigma
• surfaceDimOpacity
• surfaceContainerLowestSigma
• surfaceContainerLowestOpacity
• surfaceContainerLowSigma
• surfaceContainerLowOpacity
• surfaceContainerSigma
• surfaceContainerOpacity
• surfaceContainerHighSigma
• surfaceContainerHighOpacity
• surfaceContainerHighestSigma
• surfaceContainerHighestOpacity

{
    "glass": {
        "surfaceSigma": 0,
        "surfaceOpacity": 0.8,
        "surfaceDimSigma": 0,
        "surfaceDimOpacity": 0.9,
        "surfaceContainerSigma": 0,
        "surfaceContainerOpacity": 0.8,
        "surfaceContainerLowSigma": 10,
        "surfaceContainerLowestSigma": 10
    }
}

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. The generated colors can be overridden by specifying alternative colors later

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

Dynamic Scheme Variant options: docs

• tonalSpot
• fidelity
• monochrome
• neutral
• vibrant
• expressive
• content
• rainbow
• fruitSalad

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

Example Color Scheme

{
    "colorScheme": {
        "seed": "#ffffff",
        "dynamicSchemeVariant": "monochrome",
        "tertiaryContainer": "#ffffff",
        "links": "#0000ff",
        "codeHighlight": "#ffc678dd"
    }
}

Example theme.json

{
    "base": "dark",
    "foundation": {
        "image": {
            "file": "some_image.png",
            "alignment": "centerRight",
            "fit": "cover"
        }
    },
    "glass": {
        "surfaceSigma": 0,
        "surfaceOpacity": 0.7,
        "surfaceDimSigma": 5,
        "surfaceDimOpacity": 0.2,
        "surfaceContainerSigma": 5,
        "surfaceContainerOpacity": 0.5,
        "surfaceContainerLowSigma": 10,
        "surfaceContainerLowestSigma": 10
    },
    "settings": {
        "caulkBorders": false,
        "caulkBorderRadius": 10,
        "caulkPadding": 3,
        "shadowBlurRadius": 0.0
    },
    "colorScheme": {
        "seed": "#0452f9",
        "dynamicSchemeVariant": "fruitSalad"
    }
}