How to configure a dark theme?

Podlove Web Player
1

Hey!

I am trying to set up a “dark theme” with podlove webplayer 5.
But I am failing to realize that.

This is really hard, because the colors of some elements are interlinked with colors of other elements. For example, the color of the controls is linked with the background color of the extensible context-section at the bottom. Nevertheless, you can fix that with “workaround” colors.

But at the end a dark mode theme is not possible because of the volume scale bar. This element seems to be dark-grey as standard. And the dark-grey color seems not to be linked with the 8 customizable colors of the theme. So if you define a black background for the top area, the volume scale bar is more or less “hidden”.

Screenshot: Hidden volume scale bar with a dark theme.

2020-09-14_22-54-21

Screenshot: Color of volume scale bar is not customizable.

2020-09-14_23-09-48

Does anybody have an idea how to fix that?
Besides that, a build-in dark theme as template would be great. :wink:

2

Thanks for the report, I think this is a bug, so I’ve created a a ticket to keep track: https://github.com/podlove/podlove-ui/issues/653

I’m really looking forward to drop IE11 support to use CSS variables. In that case more elements are customisable but this might take some time :confused:

Also if you are interested in the current theming system, we’ve explained it in this episode https://podlovers.org/episode/podlove-web-player/ [german content]

3

Thank you very much for taking up.

Another thing, which makes really hard to customize the theme, are the labels of the colors. „Brand Darkest“, „Alt“, „Shade Dark“, etc. I have always to find out, to which elements it refers to. It‘s not directly clear. It‘s even more hard, if you selected a same color for more as one element. Just as feedback.

Thank you also for the podcast hint. I have already listen to it some days ago. :wink: