[BUG] The material theme customization does not work like the rest

[Entropy-9973]

Environment

Self-Hosted (Docker)

Version

2.1.0

Describe the problem

When I change the Background-Darker value on the Material theme preset, it does not change the color of the nav bar like the rest of themes (Where it works fine).
Can you please suggest a temporary quick fix until the bug is fixed ?

Additional info

No response

Please tick the boxes

• You are using a supported version of Dashy (check the first two digits of the version number)
• You've checked that this issue hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[Lissy93]

Try clicking "Show All Variables" in the theme configurator

[Lissy93]

Heya @Entropy-9973

So the way the themes work, is that all the colors are defined as CSS variables, so they can be overridden. Here's the full list of variables. With most of the themes, most of those values just extend from --primary, --background and --background-darker. But some themes are more complex, and you need to set values individually.

You can do this from the Theme Configurator → Click "Show All Variables".

It's not really a bug, since some themes just wouldn't be possible using only those three colors.

I think that from there you should be able to set every color. But if there's ever anything else you want to change, you can always add some custom CSS for it (Settings → Custom CSS, or under appConfig.customCss). You can also build your own theme, if you want even more customization.

Note that you will loose your progress if you switch themes before you've saved your changes. When you've finished, I recommend also exporting your changes (click "Export Custom Variables"), just to be safe.

[Entropy-9973]

Heya @Entropy-9973

So the way the themes work, is that all the colors are defined as CSS variables, so they can be overridden. Here's the full list of variables. With most of the themes, most of those values just extend from --primary, --background and --background-darker. But some themes are more complex, and you need to set values individually.

You can do this from the Theme Configurator → Click "Show All Variables".

It's not really a bug, since some themes just wouldn't be possible using only those three colors.

I think that from there you should be able to set every color. But if there's ever anything else you want to change, you can always add some custom CSS for it (Settings → Custom CSS, or under appConfig.customCss). You can also build your own theme, if you want even more customization.

Note that you will loose your progress if you switch themes before you've saved your changes. When you've finished, I recommend also exporting your changes (click "Export Custom Variables"), just to be safe.

I already tried that, you can try it yourself.
Not a single variable is able to change the navbar background color.
I have tried all of them. That property is simply not accessible through the GUI and this seems to be unique to that theme.

Btw, I just wanna command your project. Very impressive indeed. Best in class

[Entropy-9973]

How would you change the color of the navbar in the Material theme ?
It works with Material-dark which should have similar propoerties