{"id":13557498,"url":"https://github.com/aaronraimist/element-themes","last_synced_at":"2025-09-12T21:54:09.761Z","repository":{"id":39998445,"uuid":"241154543","full_name":"aaronraimist/element-themes","owner":"aaronraimist","description":"A place to share themes for Element. PRs with new themes are welcome!","archived":false,"fork":false,"pushed_at":"2024-06-20T05:00:59.000Z","size":7229,"stargazers_count":249,"open_issues_count":9,"forks_count":57,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-04T16:13:59.620Z","etag":null,"topics":["element","hacktoberfest","matrix-org","riot-web"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronraimist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-17T16:27:26.000Z","updated_at":"2025-04-01T09:40:04.000Z","dependencies_parsed_at":"2024-01-14T05:30:46.858Z","dependency_job_id":"71e984e3-a0b4-4d96-adf5-9fb6ee1d4b5e","html_url":"https://github.com/aaronraimist/element-themes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronraimist%2Felement-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronraimist%2Felement-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronraimist%2Felement-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronraimist%2Felement-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronraimist","download_url":"https://codeload.github.com/aaronraimist/element-themes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399886,"owners_count":20932880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element","hacktoberfest","matrix-org","riot-web"],"created_at":"2024-08-01T12:04:23.230Z","updated_at":"2025-04-05T21:11:44.770Z","avatar_url":"https://github.com/aaronraimist.png","language":"Python","funding_links":[],"categories":["Python","hacktoberfest"],"sub_categories":[],"readme":"# Element Themes\n\nA place to share themes for [Element Web/Desktop](https://github.com/vector-im/element-web). Themes are currently a beta or \"Labs\" feature, so you won't be able to use them with every instance of Element. [Read on](#How-to-use-themes) to learn how to use them.\n\nTo get help or discuss themes, join us in [#element-themes:raim.ist](https://matrix.to/#/#element-themes:raim.ist)\n\n\n## How to use themes\n\nThere are several different ways to install these themes.\n\n\n### Use an existing instance of Element which has Labs enabled\n\nIf 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\".\n\nOne 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.\n\n\n### Self host Element or use Element Desktop:\n\nIf 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 `setting_defaults` section like this:\n\n```json\n{\n    \"setting_defaults\": {\n        \"custom_themes\": [\n            {\n                \"name\": \"Example theme\",\n                \"colors\": {\n                    \"primary-color\": \"#9F8652\"\n                }\n            },\n            {\n                \"name\": \"Another theme\",\n                \"colors\": {\n                    \"primary-color\": \"#526A9E\"\n                }\n            }\n        ]\n    },\n    \"show_labs_settings\": true\n}\n```\n\nOnce 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.\n\nTo use a custom `config.json` file with Element Desktop, see https://github.com/vector-im/element-desktop#user-specified-configjson\n\n\n### If you use the matrix-docker-ansible-deploy project\n\nYou 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.\n\n\n### Use my Element Web instance\n\nAlternatively you can use [my Element Web instance](https://riot.raim.ist) which has all of these themes preinstalled so there is no configuration required.\n\n\n# Themes\n\n## [ThomCat Black](https://raw.githubusercontent.com/aaronraimist/element-themes/master/ThomCat/ThomCat-Black.json)\n\nMade by `@me:thomcat.rocks`\n\n![ThomCat Black Screenshot](ThomCat/ThomCat-Black.png)\n\n\n## [Discord Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Discord/Discord-Dark/Discord-Dark-Theme.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack) and [`@Oha-you`](https://github.com/Oha-you)\n\n![Discord Dark Theme Screenshot](Discord/Discord-Dark/Discord-Dark-Theme.png)\n\n\n## [Discord Black Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Discord/Discord-Black/Discord-Black-Theme.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack), [`@Oha-you`](https://github.com/Oha-you) and [`@zhunynho`](https://github.com/zhunynho)\n\n![Discord Dark Theme Screenshot](Discord/Discord-Black/Discord-Black-Theme.png)\n\n\n## [Luxury Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Luxury/Luxury%20Dark/Luxury%20Dark.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack)\n\n![Luxury Dark Theme Screenshot](./Luxury/Luxury%20Dark/Luxury%20Dark.png)\n\n\n## [Night Owl Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Night%20Owl/Night%20Owl%20Dark/Night-Owl-Dark-Theme.json)\n\nMade by [`@foxy:teapot.ovh`](https://github.com/foxyseta)\n\n![Night Owl Dark Theme Screenshot](Night%20Owl/Night%20Owl%20Dark/Night-Owl-Dark-Theme.png)\n\n\n## [Nord Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Nord/Nord%20Dark/Nord%20Dark.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack)\n\n![Nord Dark Theme Screenshot](Nord/Nord%20Dark/Nord%20Dark.png)\n\n\n## [Nord Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Nord/Nord%20Light/Nord%20Light.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack)\n\n![Nord Light Theme Screenshot](Nord/Nord%20Light/Nord%20Light.png)\n\n\n## [Selenized Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Selenized/Selenized%20Light/Selenized%20Light.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack)\n\n![Selenized Light Theme Screenshot](Selenized/Selenized%20Light/Selenized%20Light.png)\n\n\n## [Selenized Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Selenized/Selenized%20Dark/Selenized%20Dark.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack)\n\n![Selenized Dark Theme Screenshot](Selenized/Selenized%20Dark/Selenized%20Dark.png)\n\n\n## [Selenized Black Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Selenized/Selenized%20Black/Selenized%20Black.json)\n\nMade by [`@dylhack:minds.com`](https://github.com/dylhack) and `@david:vovo.id.au`\n\n![Selenized Black Theme Screenshot](Selenized/Selenized%20Black/Selenized%20Black.png)\n\n\n## [Solarized Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Solarized/Solarized%20Dark/Solarized%20Dark.json)\n\nMade by `@jasonic5:matrix.org`\n\n![Solarized Dark Theme Screenshot](Solarized/Solarized%20Dark/Solarized%20Dark.png)\n\n\n## [Solarized Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Solarized/Solarized%20Light/Solarized%20Light.json)\n\nMade by [`Marius`](https://github.com/marius)\n\n![Solarized Light Theme Screenshot](Solarized/Solarized%20Light/Solarized%20Light.png)\n\n\n## [Geeko Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Geeko%20Dark/Geeko%20Dark.json)\n\nMade by `@swedneck:feneas.org`\n\n![Geeko Dark Theme Screenshot](Geeko%20Dark/Geeko%20Dark.png)\n\n## [Dracula Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Dracula/Non-flat/Dracula.json)\n\nMade by `@jakobr_107:utwente.io`\n\n![Dracula Dark Theme Screenshot](Dracula/Non-flat/screenshot%20%2020-06-19%2014-09-11.png)\n\n## [Dracula Flat Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Dracula/Flat/DraculaFlat.json)\n\nMade by `@jo:catgirl.party`\n\n![Dracula Flat Dark Theme Screenshot](Dracula/Flat/screenshot%2020-06-16%2003-05-42.png)\n\n## [Everforest Dark Hard Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Everforest%20Dark%20Hard/everforest-dark-hard.json)\n\nMade by `@maksim:wherelinux.xyz`\n\n![Everforest Dark Hard Theme Screenshot](Everforest%20Dark%20Hard/everforest-dark-hard.png)\n\n## [Wal Theme](https://github.com/acxz/element-wal)\n\nA theme that autogenerates colors based on your wallpaper.\nMade by `@acxz:matrix.org`\n\n![Wal Theme Screenshot](https://user-images.githubusercontent.com/17132214/162074643-a5dbca97-b6c3-4cf6-90c6-b1a6d244c72e.png)\n\n## [Gruvbox Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Gruvbox/Gruvbox%20Dark/Gruvbox%20Dark.json)\n\nMade by [Jeroen van Meerendonk](https://github.com/jeroenwtf)\n\n![Gruvbox Theme Screenshot](Gruvbox/Gruvbox%20Dark/Gruvbox%20Dark.png)\n\n## [Gruvbox Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Gruvbox/Gruvbox%20Light/Gruvbox%20Light.json)\n\nMade by `@joel:thebeckmeyers.xyz`\n\n![Gruvbox Light Theme Screenshot](Gruvbox/Gruvbox%20Light/Gruvbox%20Light.png)\n\n## [Covalence Dark Theme](Covalence/covalence.json?raw=1)\n\nMade by `@mnesia:matrix.org`\n\n![Covalence Dark Theme Screenshot](https://user-images.githubusercontent.com/123417798/218235744-149e276f-9bc9-4446-9b5c-52e60bcff7bd.png)\n\n## [Monokai Pro](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Monokai%20Pro/Monokai-Pro.json)\n\nMade by `@ordo:mushrooms.dev`\n\n![Monokai Pro Theme Screenshot](Monokai%20Pro/Monokai-Pro.png)\n\n## [Catppuccin Latte](Catppuccin/Latte/Catppuccin-Latte-Theme.json?raw=1)\n\nMade by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako)\n\n![Catppuccin-Latte-Theme](https://user-images.githubusercontent.com/7110658/223290983-8e65b614-8440-4d6d-a760-89efc4295ab9.png)\n\n## [Catppuccin Frappe](Catppuccin/Frappe/Catppuccin-Frappe-Theme.json?raw=1)\n\nMade by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako)\n\n![Catppuccin-Frappe-Theme](https://user-images.githubusercontent.com/7110658/223290293-a09c1af7-63fd-42ff-895c-bcdc2f67dcec.png)\n\n## [Catppuccin Macchiato](Catppuccin/Macchiato/Catppuccin-Macchiato-Theme.json?raw=1)\n\nMade by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako)\n\n![Catppuccin-Macchiato-Theme](https://user-images.githubusercontent.com/7110658/223291065-57b1d22c-a080-4ffd-bded-24ebaef2e65f.png)\n\n## [Catppuccin Mocha](Catppuccin/Mocha/Catppuccin-Mocha-Theme.json?raw=1)\n\nMade by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako)\n\n![Catppuccin-Mocha-Theme](https://user-images.githubusercontent.com/7110658/223291136-bbb47642-8bb9-4200-b635-1705a5405018.png)\n\n# Advanced\n\nThe themes in this repository use Element's relatively basic theming system which can only change a limited number of colors. Element's [theming documentation](https://github.com/vector-im/element-web/blob/master/docs/theming.md) 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.\n\n\n## Workarounds\n\nElement'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.\n\n![pill_before](images/Pill1.png)\n\nTo 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.\n\n```\ncssbeautify-cli -f theme-dark-custom.css \u003e /tmp/theme-dark-custom-sed.css\nsed '/.mx_ReactionsRowButton.mx_ReactionsRowButton_selected/!b;n;c\\ \\ \\ \\ background-color:var(--accent-color);' /tmp/theme-dark-custom-sed.css \u003e /tmp/theme-dark-custom.css\nsudo -u \u003cnginx/apache_user\u003e cp /tmp/theme-dark-custom.css /\u003celement_directory\u003e/bundles/\u003cbundle_version\u003e/\n```\nThe results:\n\n![pill_after](images/Pill2.png)\n\n\n## build.py\nThere is a [build.py](./build.py) python file which takes all the themes and\noutputs it to a file as an array of JSON. Simply execute it in this directory.\n](https://github.com/jordandrako/element-themes/edit/catppuccin/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronraimist%2Felement-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronraimist%2Felement-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronraimist%2Felement-themes/lists"}