aaronraimist / element-themes

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

Element Themes

A place to share themes for Element Web/Desktop. Themes are currently a beta or "Labs" feature, so you won't be able to use them with every instance of Element. Read on to learn how to use them.

To get help or discuss themes, join us in #element-themes:raim.ist

How to use themes

There are several different ways to install these themes.

Use an existing instance of Element which has Labs enabled

If you are using an instances of Element which has Labs features available then you can use these themes. Go to the Labs tab in Settings and turn on "Support adding custom themes". To add a theme, find one below that you would like to try. Then copy the URL to the JSON file that makes up the theme. Go to the Apperance tab in Settings and paste the URL into the "Custom theme URL" field and click "Add theme".

One example of an instance that has Labs enabled is https://develop.element.io however be aware this is a bleeding edge version of Element and you may run into bugs. Most stable instances of Element like https://app.element.io do not have Labs features enabled.

Self host Element or use Element Desktop:

If you are self hosting your own instance of Element or you are using the Desktop app, you can use these themes by editing your config.json file. Put the themes you want inside of the settingDefaults section like this:

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

Once you do that, you will need to enable "Support adding custom themes" (feature_custom_themes) in the Labs section of Settings so that these themes appear in the Appearance section of Settings.

To use a custom config.json file with Element Desktop, see https://github.com/vector-im/element-desktop#user-specified-configjson

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.

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 @dylhack:minds.com and @Oha-you

Discord Black Theme

Made by @dylhack:minds.com, @Oha-you and @zhunynho

Luxury Dark Theme

Made by @dylhack:minds.com

Night Owl Dark Theme

Made by @foxy:teapot.ovh

Nord Dark Theme

Made by @dylhack:minds.com

Nord Light Theme

Made by @dylhack:minds.com

Selenized Light Theme

Made by @dylhack:minds.com

Selenized Dark Theme

Made by @dylhack:minds.com

Selenized Black Theme

Made by @dylhack:minds.com and @david:vovo.id.au

Solarized Dark Theme

Made by @jasonic5:matrix.org

Solarized Light Theme

Made by Marius

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

Everforest Dark Hard Theme

Made by @maksim:wherelinux.xyz

Wal Theme

A theme that autogenerates colors based on your wallpaper. Made by @acxz:matrix.org

Gruvbox Dark Theme

Made by Jeroen van Meerendonk

Gruvbox Light Theme

Made by @joel:thebeckmeyers.xyz

Covalence Dark Theme

Made by @mnesia:matrix.org

Monokai Pro

Made by @ordo:mushrooms.dev

Catppuccin Latte

Made by @ghostx31 / Ported by @jordandrako

Catppuccin Frappe

Made by @ghostx31 / Ported by @jordandrako

Catppuccin Macchiato

Made by @ghostx31 / Ported by @jordandrako

Catppuccin Mocha

Made by @ghostx31 / Ported by @jordandrako

Advanced

The themes in this repository use Element's relatively basic theming system which can only change a limited number of colors. Element's theming documentation has more information on how these work. For more advanced themes where you want to customize things like fonts, button shapes, or all of the colors you'll need to use CSS which isn't supported by Element's theming system. To use CSS based themes you could use a browser extension like Stylus. https://github.com/dannycolin/riot-compact is an example of a more advanced theme.

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. ](https://github.com/jordandrako/element-themes/edit/catppuccin/README.md)

element-themes's Issues

Am i making this wrong? (element desktop)

I simply can't make the themes appear on my Settings in Element desktop

Here's my config.json file, in .config/Element/ (I'm on Linux):

{
        "settingDefaults": {
        "custom_themes": [
        {
    "name": "Nord dark theme",
    "is_dark": true,
    "colors": {
        "accent-color": "#a3be8c",
        "primary-color": "#88c0d0",
        "warning-color": "#bf616a",

        "sidebar-color": "#2e3440",
        "roomlist-background-color": "#3b4252",
        "roomlist-text-color": "#ebcb8b",
        "roomlist-text-secondary-color": "#e5e9f0",
        "roomlist-highlights-color": "#2e3440",
        "roomlist-separator-color": "#434c5e",

        "timeline-background-color": "#434c5e",
        "timeline-text-color": "#eceff4",
        "timeline-text-secondary-color": "#81a1c1",
        "timeline-highlights-color": "#3b4252",
        "reaction-row-button-selected-bg-color": "#bf616a"
    }
}
        ]
    }
}

And the theme simply won't appear in my Appearance settings.

Provide base dark/light themes

Since Element does not support overriding just a few things from a default theme it would be nice if there were JSON themes that look exactly like the default ones, just so people have something to use as a base.

For example, I only want to change the monospace font and right now I have to copy TONS of colors from all over the place just for this.

How do I change the colour of the message bubble?

Change Theme Programmatically on Desktop [Linux]

I have a script that I use to switch color schemes on my desktop, is there a settings file somewhere that I can change to select a different custom theme? Or does it have to be done manually in Element?

Add swedneck's Gecko dark theme

@swedneck

Settings buttons are transparent when not active (Selenized light theme)

Hello,

https://i.imgur.com/dnwKFxy.gif

Unexpected white space at 18

{
"showLabsSettings": true
{
    "settingDefaults": {
        "custom_themes": [
{
    "name": "ThomCat black theme",
    "is_dark": true,
    "colors": {
        "accent-color": "#cc7b19",
        "primary-color": "#9F8652",
        "warning-color": "#f9c003",
        "sidebar-color": "#000000",
        "roomlist-background-color": "#191919",
        "roomlist-text-color": "#cc7b19",
        "roomlist-text-secondary-color": "#e5e5e5",
        "roomlist-highlights-color": "#323232",
        "roomlist-separator-color": "#4c4c4c",
        "timeline-background-color": "#000000",
        "timeline-text-color": "#e5e5e5",
        "secondary-content": "#e5e5e5",
        "tertiary-content": "#e5e5e5",
        "timeline-text-secondary-color": "#b2b2b2",
        "timeline-highlights-color": "#212121",
        "reaction-row-button-selected-bg-color": "#cc7b19"
    }
}
]
}

My current config, and when I launch element, it states what's in the title, and I don't know why.

Background Image

Please add an option to add an background image in the themes

[Feature Request] Transparency

It would be p cool to showcase a theme that shows users how to have transparency on their Element client.

Change codeblock background?

Hi, how would I change codeblock background color? I couldn't find a property that allow me to edit its background.

Remove or update theme?

I've created a personal theme to test and mess around with. However, when I change the code, I have no way to update it or remove the theme.
Is there any possible way I can do this?

White on grey notification count

Is white on grey correct for the notification count?

Thanks.

Add "timeline-separator-color"

In the built-in themes there are separators in the timeline which divide up the text entry box and the header bar. Would it be possible to add a color for these in the custom theme?

Can a theme replace the graphical image of an emoticon?

Can a theme replace the graphical image of an emoticon?

Pills in the Discord dark theme blend into the background

User/room pills are nearly invisible in the Discord Dark Theme. Is it possible to change them individually to be a bit lighter, so they stand out better?

discord theme mentions background looks very different

I assume this is upstream blocked, but the background behind mentions always just looks like the very dark green the dark theme uses

instead of the more yellow color discord uses:

Create a Nord theme

element-hq/element-web#10988

Doesn't work on desktop

I did everything as told in the readme, and the readme on "how to use a config.json file on desktop" and still doesn't work

So anyone help me, please.

Possibility of hybrid light/dark themes?

Is there any way to make hybrid dark/light themes like Discord's light theme seen here?

I've tried to do so but it seems the text all must be one color. Is there a workaround for this? Has anyone been able to make a theme like this?

Themes no longer applying?

It seems that these custom themes are no longer applying to element despite the configs still being set, and the Labs setting still being enabled.

• Element version: 1.11.65
• Element installed via Flatpak

Add Selenized color scheme

Suggested by @dngray:privacytools.io

• Reference: https://github.com/jan-warchol/selenized

Docu loops around with Ansible deployment's

Looking for what to do with matrix_client_element_themes_repository_url parameter it sort of guided me here, where only matrix_client_element_themes_enabled is referenced and for "more details" links to the playbook's GitHub to what it seems an earlier resource that links to another resource that only mentions what's already known, omitting matrix_client_element_themes_repository_url and pointing back to this repo's front page--which is also that's predefined in the parameter and does not work:

TASK [matrix-client-element : Ensure Element themes repository is pulled] **********************************************************************************************************
fatal: [matrix.domain.tld -> 127.0.0.1]: FAILED! => {"changed": false, "msg": "Failed to find required executable git in paths: /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"}

git is in present where it says it's not, I even sued into the corresponding user to check and it does have it. You guys should probably need to take a minute to decide who's gonna host the docu so you don't end up pointing at each other.

"uninstalling" theme

How do you removed installed themes from Element desktop on macOS?

Option to remove a theme

Can you add an option to remove an theme

i cant find "You will need to enable "Support adding custom themes" in the Labs section of Settings to make these themes appear in the Appearance section of Settings."

has it been removed?

How to apply the theme in element desktop?

I've created ~/.config/Element/config.json file, pasted the Nord dark theme into there, but i still can't select it in the client. What should i do?