Discord/Discord-Dark | ||
Dracula | ||
Geeko Dark | ||
images | ||
Luxury/Luxury Dark | ||
Nord | ||
Selenized | ||
Solarized/Solarized Dark | ||
ThomCat | ||
build.py | ||
LICENSE | ||
README.md |
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 theming 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
There are several different ways to install these themes. For most users it will be easiest to enable the "Support adding custom themes" (feature_custom_themes
) labs feature. 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 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"
}
}
]
},
"showLabsSettings": true
}
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.
To setup a 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:newcircuit.io
Luxury Dark Theme
Made by @dylhack:newcircuit.io
Nord Dark Theme
Made by @dylhack:newcircuit.io
Nord Light Theme
Made by @dylhack:newcircuit.io
Selenized Light Theme
Made by @dylhack:newcircuit.io
Selenized Dark Theme
Made by @dylhack:newcircuit.io
Selenized Black Theme
Made by @dylhack:newcircuit.io
and @david:vovo.id.au
Solarized Dark Theme
Made by @jasonic5:matrix.org
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.