Catppuccin for Element

Usage

There are several ways to install these themes.

Use an instance of element which has Labs enabled

If you use an instance of Element which has Labs enabled, head over to the Labs tab in Settings and turn on "Support adding custom themes". To add this theme, copy your preferred flavour's JSON's URL into the "Custom theme URL" field. Example:

https://raw.githubusercontent.com/catppuccin/element/main/themes/Catppuccin-mocha.json

Self hosted Element or Element Desktop

If you are hosting an instance yourself or use Element Desktop, then this theme can be added by placing the config.json file in Element's config directory. The possible locations are:

• Windows: %APPDATA%\$NAME\config.json
• Linux: $XDG_CONFIG_HOME/$NAME/config.json or ~/.config/$NAME/config.json or ~/.var/app/im.riot.Riot/config/$NAME/config.json if you are using the Flatpak version.
• macOS: ~/Library/Application Support/$NAME/config.json

where the $NAME is usually Element. If you use the --profile $PROFILE flag, then the $NAME becomes Element-$PROFILE.

Then enable the "Support adding custom themes" option in the Labs section of the Settings. The themes will then appear in the Appearance tab of the Settings.

🙋 FAQ

• Q: "How to change the font?"
  A: Fonts can be changed by editing the config.json file in the following manner:

  "is_dark": true, 
  "fonts": {
      "faces": [
                  {
                      "font-family": "Inter",
                      "src": [{"url": "/fonts/Inter.ttf", "format": "ttf"}]
                  }
              ],
          "general": "Inter, sans",
          "monospace": "'Courier New'"
        },

💝 Thanks to

• ghostx31

 

Copyright © 2021-present Catppuccin Org