New Theme

[xKiian]

I added a new theme named Dark Blue. Sadly, I couldn't figure out how to change the Monaco theme to a more blue one, but other than that, it's a great alternative to the normal dark mode.

Also, it would be cool to have a better theme switcher/manager. (I just had no idea how to implement it in a way where it doesn't look ugly.)

I also fixed a small bug in the 'send' tab where it showed the wrong color.

[CLAassistant]

All committers have signed the CLA.

[xKiian]

here are some screenshots of the theme:

[pimterry]

Nice work @xKiian! This looks great.

That said, this has come at a slightly unlucky time - if you look at the rebrand branch, there's a general UI styling update that's being worked on (with slightly different colours, a proper logo, a few small layout tweaks) and that includes various changes to the existing themes and their properties, that will have a few conflicts with this, and there's more changes coming there in future too.

You might find it interesting though as I did eventually work out how to modify the Monaco background colour :smile:

I'm also a bit cautious about adding more and more themes built into the tool... I think it would probably be better to make it easy for people to write & share themes themselves, and provide a UI button to easily load them into the app.

In that approach, you could publish this theme as a JSON file, and others could easily use it and share their own themes and modifications too. I'd be happy to add a page to the official docs explaining this and providing a link to any custom themes that people publish. What do you think?

[xKiian]

Yeah, that's a good idea.

[pimterry]

Hi @xKiian! You may have notice the redesign recently went live, and I've now had time to actually finish custom theming support too.

To create a custom theme, just create a JSON file with a 'name' field (any string), an 'extends' field (an existing theme: dark/light/high-contrast), and all the keys from the theme that you'd like to override.

There's now a new button in the theme picker called 'Custom'. When you click it, it asks for a theme file, and then the whole UI style updates to match.

Themes aren't currently stored in a useful way internally or anything like that (you'll need to reselect the file every time) but this should be a good start. As a test case, I've converted your dark blue theme here into the new format:

{
    "name": "DarkBlue",
    "extends": "dark",
    "mainBackground": "#161630",
    "mainLowlightBackground": "#1e1e42",
    "inputBackground": "#1e1e38",
    "inputHoverBackground": "#20203d",
    "inputBorder": "#27274a",
    "highlightBackground": "#171b30",
    "containerBackground": "#2f2f45"
}

Just save that as darkblue.htk-theme, and load it with the Custom button on the Settings page. This has only just been deployed, so if you don't see the Custom button yet, just wait a minute, then restart the app. Thanks for the idea!

[xKiian]

Wow, that's amazing! The only thing missing now would be a theme folder and some way to switch between custom themes

[pimterry]

PRs welcome 😊. I imagine that rather than a separate folder on disk, just caching selected theme files indefinitely and including them all in the settings page options would work (indexed by their name, so you can update them, and with a delete option somehow) and should be simple & easy to understand.

That means in practice, you'd click Custom, select a file, and it'd add a new option with that name to the list and select it. If you then click Custom again, selecting a different theme would add both to the list, or selecting another theme with the same name would replace the previous one. Does that make sense? I don't think there's much hurry here since the current setup should already cover most cases, but if you're especially interested in this functionality then I'm happy to review & merge a PR to add that.