How do I create a custom theme?

Mutual Help
1

How can I enable my personalized theme? For instance, I’ve created a web.css file and inserted a code snippet into it. What’s the process for loading my theme? I attempted placing it in a directory at C:\Users\Admin\AppData\Local\DeltaChat\custom-themes\web, but that didn’t yield any results.

.navbar-wrapper .bp4-navbar {
    background: #000;
}

Reviewing the docs at deltachat-desktop/docs/THEMES.md at master · deltachat/deltachat-desktop · GitHub, did I overlook anything?

I wanted to quickly experiment by opening Windows Explorer, going to C:\Users\Admin\AppData\Local\DeltaChat\custom-themes, creating a web.css file, and making edits using developer tools. I planned to spend around 30-45 minutes tweaking colors to match my Windows 10 dark theme or perhaps Telegram.

I’d rather not create a theme via the CLI since it seems complex and time-consuming. However, if the hot reload feature is valuable, I might consider it. I’m fine with CTRL + F5 for changes, and I just want to tweak a few base colors. I also plan to share the theme with some friends who are interested.

2

put the file directly into custom themes folder, and don’t forget the meta data to make it selectable:

.theme-meta {
  --name: 'Custom Theme';
  --description: 'my custom theme.';
}

looking at the docs this is not mentioned there, I’ll fix that.*

also I recommend modifying the css vars from theme base to change colours: deltachat-desktop/themes/_themebase.scss at master · deltachat/deltachat-desktop · GitHub

The other (official) themes all use this themebase file.

* I made a pr to update the docs: a bit more info on custom theme creation by Simon-Laux · Pull Request #3659 · deltachat/deltachat-desktop · GitHub, I’d be happy to hear your feedback on how to improve it further.