/riot-web-themes

A place to share themes for Riot Web, PRs with new themes are welcome!

The UnlicenseUnlicense

Riot Web Themes

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

Discussions

Join us in #riot-web-themes:m.dhdf.dev

Table of Contents

How to use themes

There are several different ways to install these. Unfortunately Riot doesn't yet provide an easy one click way to install themes. Some options for installing themes include:

If you self host Riot or use Riot 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 Riot Desktop, see https://github.com/vector-im/riot-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_riot_web_themes_enabled: true in your vars.yml file. See https://github.com/spantaleev/matrix-docker-ansible-deploy/blob/master/docs/configuring-playbook-riot-web.md#themes for more details.

If you are a Firefox user

You can install Radical which is Riot web 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 Riot Web instance

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

Themes

ThomCat Black

Made by @me:thomcat.rocks

ThomCat Black Screenshot

Discord Dark Theme

Made by @dhmf:dhdf.dev

Discord Dark Theme Screenshot

Nord Dark Theme

Made by @dhmf:dhdf.dev

Nord Dark Theme Screenshot

Nord Light Theme

Made by @dhmf:dhdf.dev

Nord Light Theme Screenshot

Selenized Light Theme

Made by @dhmf:dhdf.dev

Selenized Light Theme Screenshot

Selenized Dark Theme

Made by @dhmf:dhdf.dev

Selenized Dark Theme Screenshot

Selenized Black Theme

Made by @dhmf:dhdf.dev

Selenized Black Theme Screenshot

Geeko Dark Theme

Made by @swedneck:hielle.com

Geeko Dark Theme Screenshot

Workarounds

Riot'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 Riot doesn't give us a variable to control the color that is used there.

pill_before

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 /<riot_directory>/bundles/<bundle_version>/

The results:

pill_after