To add a custom theme to your instance, you'll first need to get a custom theme, upload it to the server, make it available to the instance and eventually you can set it as default.
This will only save the theme for you personally. To make it available to the whole instance, you'll need to upload it to the server.
Themes can be found in the static directory. Create STATIC-DIR/static/themes/
if needed and copy your theme there. Next you need to add an entry for your theme to STATIC-DIR/static/styles.json
. If you use a from source installation, you'll first need to copy the file from priv/static/static/styles.json
.
Example of styles.json
where we add our own my-awesome-theme.json
{
"pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
"ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
"monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
"redmond-xx": "/static/themes/redmond-xx.json",
"redmond-xx-se": "/static/themes/redmond-xx-se.json",
"redmond-xxi": "/static/themes/redmond-xxi.json",
"breezy-dark": "/static/themes/breezy-dark.json",
"breezy-light": "/static/themes/breezy-light.json",
"mammal": "/static/themes/mammal.json",
"my-awesome-theme": "/static/themes/my-awesome-theme.json"
}
Now you'll already be able to select the theme in Pleroma FE from the drop-down. You don't need to restart Pleroma because we only changed static served files. You may need to refresh the page in your browser. You'll notice however that the theme doesn't have a name, it's just an empty entry in the drop-down.
When you open one of the themes that ship with Pleroma, you'll notice that the json has a "name"
key. Add a key-value pair to your theme where the key name is "name"
and the value the name you want to give your theme. After this you can refresh te page in your browser and the name should be visible in the drop-down.
Example of my-awesome-theme.json
where we add the name “My Awesome Theme”
{
"_pleroma_theme_version": 2,
"name": "My Awesome Theme",
"theme": {}
}
Now we can set the new theme as default in the Pleroma FE configuration.
Example of adding the new theme in the back-end config files
config :pleroma, :frontend_configurations,
pleroma_fe: %{
theme: "my-awesome-theme"
}
If you added it in the back-end configuration file, you'll need to restart your instance for the changes to take effect. If you don't see the changes, it's probably because the browser has cached the previous theme. In that case you'll want to clear browser caches. Alternatively you can use a private/incognito window just to see the changes.