Keeweb: [Feature request] Support custom UI themes

[kavolorn]

I think if you increase padding for list items, feeling will become superior.

Maybe this could an option in configuration. And maybe only for second column.

[antelle]

Maybe will make this as an option (as an option to increase overall fonts size). Personally I find current view looking better.

[kavolorn]

For some future release it would be nice to play. I can live with current interface though)

[antelle]

I know. As this is HTML app, it's very easy to customize, so it's better to add theming support, so everyone could create a theme and publish it.

[antelle]

Renamed this to Themes support, hope you don't mind

[kavolorn]

No problem! As you feel it better.

[frode]

I agree with @kavolorn here, his UX suggestion looks and feels more comfortable. At the current time I struggle to be comfortable with the current styling compared to MacPass that is much more comfortable mainly because of more space around the overall UI objects.

Font size could also be bumped up a size or two (as a option)

[antelle]

Hm, the spacing around elements looks like the same on KeeWeb, 1Password and MacPass:

On the design above the spacing is way higher, making it look unnatural. To improve it, we can increase the font size as well. This may be developed as an optional theme (but for now it will be built into the app as we are far from theming support).

[frode]

Are you sure?

[antelle]

You can increase menu width by dragging it, it will be saved.
I'll try to increase left padding a bit for menu and list.

[frode]

A little left padding would help.. :+1:

It's not possible to hide the tag keywords? (optionally display them)

[antelle]

You can drag the lower border of tags as well, so only two of them will be visible and they will not bother you. There's a TODO called 'draggable items in left panel', it's about dragging tags, treeview, ... - but it's not planned for the nearest future.

[antelle]

Spacing was increased a bit, the preview is on https://beta.keeweb.info

[Aquila111]

528 Won't that help?

[antelle]

Next version will support plugins, including CSS themes.
I'm not sure about theme building infrastructure though. Thinking how to make them more usable for development. But anyway, themes will be here, at least it will be possible to have the level of customization requested in this issue.

[EnricoMonese]

I switched to KeeWeb because it has more features. Before I was using https://buttercup.pw, which I found easier and more immediate to use. Would the new plugins allow to get a similar look and layout?

[antelle]

@EnricoMonese in terms of UI, it's possible. Probably some things could be very hard or not compatible at all, but at least, you can make keeweb visually look like it.

[EnricoMonese]

I would actually be fine with just having different colors for each column, which wont probably be too hard. What could get more weird would be getting some vibrancy in there.

Edit: Actually you can do it without even restarting: docs

[EnricoMonese]

Some quick playing around produced this, theming individual parts should not be difficult if the theming/plugins allow for global css, as every area has its specific class name.

[loilo]

Wow. This is pretty exciting.

Is there already some kind of documentation or primitive example Plugin? 🤓

[antelle]

@Loilo, sure, I made a simple page with examples: https://github.com/keeweb/keeweb/wiki/Plugins

[loilo]

That's great, thanks!

[loilo]

While I'm already on it - are there also recent beta builds availble for download (apart from beta.keeweb.info)?

[antelle]

We don't have beta desktop, unfortunately.

[loilo]

Okay, then I guess the web version will do the trick. :)

[antelle]

Yes, plugin support is implemented only for web, not desktop at the moment.

[antelle]

Pushed desktop plugin support, so now you can test them on desktop in beta mode as well.

[loilo]

Isn't Beta mode in the desktop app just a beta.keeweb.info webview anyway?

However, I was already able to test it yesterday but in fact I had to set up a HTTPS domain on my server for that. 🤓

Is that different now?

[antelle]

Yes, beta mode is just loading beta.keeweb.info, there are no other differences.
No, nothing was changed about it today.

[loilo]

So I'll still have to use a HTTPS domain for testing, right? (Since beta.keeweb.info is loaded over it and Chromium security policies won't allow anything else.)

[antelle]

Hm, beta button is working fine for me. What happens for you?

[loilo]

It works as long as I provide a HTTPS URL for the plugin - else KeeWeb tells me it could not load manifest.json. According to DevTools that's caused by the browser engine blocking the request since beta.keeweb.info is loading over HTTPS while my localhost URLs are not.

I can use a fake HTTPS localhost URL on beta.keeweb.info (because my browser already knows that I consider the domain secure and thus let's requests go through), but Electron's very own Chromium does not know that and thus blocks the https://localhost request. The only way to test there is to use an actual HTTPS URL.

[antelle]

I see what you mean, so beta itself is working, but plugins cannot be installed. Yes, it won't work without https. Maybe there are some electron options, but I'm not sure.

[loilo]

There seem to be Chromium flags for that.

[jorgelbg]

@EnricoMonese do you mind sharing that amazing theme/plugin? 👍

[thefiredragon]

@EnricoMonese did you have a copy of your theme elswhere?

[Fruchuxs]

To support themes like this from @EnricoMonese, the keeweb desktop version must allow transparent window. @antelle is there an option to enable this through a keeweb plugin, or is this transparent feature too picky?

[antelle]

@Fruchuxs what happens if transparent property is changed when the window is already created, does it work? In this case yes, it would be very easy.

[Fruchuxs]

@antelle digged into it and figured out, that this transparency (respectively "vibrance" effect) is very instable. It must be a frameless window, which make problems with resizing. I like the style, but I think it's to fragil to maintain. ;/