anoadragon453 / element-themes

A place to share themes for Element (formerly Riot), PRs with new themes are welcome!

Element Web Themes

A place to share themes for Element Web. Element's theming documentation has more information on how these work.

These themes are using the relatively basic Element themeing system which can only change a limited number of colors. For more advanced themes where you want to customize all the colors or things like fonts and button shapes you'll need to use custom CSS files. See https://github.com/dannycolin/riot-compact for an example of a more advanced theme.

Discussions

Join us in #element-themes:raim.ist

Table of Contents

• How to use themes
  • If you self host Element or use Element Desktop
  • If you use the matrix-docker-ansible-deploy project
  • If you are a Firefox user
  • Or use my instance of Element Web
• Themes
  • Discord Dark Theme
  • Geeko Dark Theme
  • Luxury Dark Theme
  • Nord Dark Theme
  • Nord Light Theme
  • Selenized Black Theme
  • Selenized Dark Theme
  • Selenized Light Theme
  • ThomCat Black
  • Dracula Dark Theme
  • Dracula Flat Dark Theme
• Advanced
  • Workarounds
  • build.py

How to use themes

There are several different ways to install these. For most users it will be easiest to enable the feature_custom_themes labs flag (currently only on https://riot.im/develop). This will allow you to install themes by pasting in the URL to the raw JSON of the theme. Hopefully in the future this interface will be polished up and enabled by default for all users.

Some other options for installing themes:

If you self host Element or use Element Desktop:

You can use these themes by editing your config.json file to include the theme inside of the settingDefaults section like this:

{
    "settingDefaults": {
        "custom_themes": [
            {
                "name": "Example theme",
                "colors": {
                    "primary-color": "#9F8652"
                }
            },
            {
                "name": "Another theme",
                "colors": {
                    "primary-color": "#526A9E"
                }
            }
        ]
    }
}

To setup a config.json file with Element Desktop, see https://github.com/vector-im/element-web/blob/master/docs/config.md#desktop-app-configuration

If you use the matrix-docker-ansible-deploy project

You can enable all of these themes just by setting matrix_client_element_themes_enabled: true in your vars.yml file. See https://github.com/spantaleev/matrix-docker-ansible-deploy/blob/master/docs/configuring-playbook-client-element.md#themes for more details.

If you are a Firefox user

You can install Radical which is Element bundled as a Firefox add-on. You can edit the config.json file right in the add-on preferences. It works really well, you should check it out. https://addons.mozilla.org/en-US/firefox/addon/radical-web/

Use my Element Web instance

Alternatively you can use my Element Web instance which has all of these themes preinstalled so there is no configuration required.

Themes

ThomCat Black

Made by @me:thomcat.rocks

Discord Dark Theme

Made by @dhmf:dhdf.dev

Luxury Dark Theme

Made by @dhmf:dhdf.dev

Nord Dark Theme

Made by @dhmf:dhdf.dev

Nord Light Theme

Made by @dhmf:dhdf.dev

Selenized Light Theme

Made by @dhmf:dhdf.dev

Selenized Dark Theme

Made by @dhmf:dhdf.dev

Selenized Black Theme

Made by @dhmf:dhdf.dev and @david:vovo.id.au

Geeko Dark Theme

Made by @swedneck:feneas.org

Dracula Dark Theme

Made by @jakobr_107:utwente.io

Dracula Flat Dark Theme

Made by @jo:catgirl.party

Advanced

Workarounds

Element's theme implementation is fairly limited so custom themes might introduce some odd elements. For example, when using ThomCat Black, the selected reaction 'pill' is outlined in green since Element doesn't give us a variable to control the color that is used there.

To fix this, we have to edit the custom theme CSS file directly, in this case theme-dark-custom.css. cssbeautify-cli is not necessary if your sed-fu is better than the author's is.

cssbeautify-cli -f theme-dark-custom.css > /tmp/theme-dark-custom-sed.css
sed '/.mx_ReactionsRowButton.mx_ReactionsRowButton_selected/!b;n;c\ \ \ \ background-color:var(--accent-color);' /tmp/theme-dark-custom-sed.css > /tmp/theme-dark-custom.css
sudo -u <nginx/apache_user> cp /tmp/theme-dark-custom.css /<element_directory>/bundles/<bundle_version>/

The results:

build.py

There is a build.py python file which takes all the themes and outputs it to a file as an array of JSON. Simply execute it in this directory.