Theme doesn't show up in the GUI of the docker image

[henkiewie]

Hi,

I'm on the latest image (2.0.5).

I tought i wanted to save my own theme somewhere so it can not get overwritten by a new docker image or by mistake. And make some changes to the layout through the interface because I am not a css guy 😄.
I copied the adventure theme (because it hides a lot of the background properties) from the github resource to a file and copied it to a scss file on my host and mounted it as explianed in the doc. That worked OK because I can see the content in a docker exec console session in the file /app/src/styles/user-defined-themes.scss
I also gave it a new name in the header html[data-theme="Newone"] { and added that name in appConfig.cssThemes saved the config. It did a rebuild (no errors).
But then I should see the new name in the drop-down box for the themes in th GUI, but that does not seem to happen. It also does not show up in the log that it is loaded somewhere (should it?)
I also changed the owner to root instead of the default user pi. But the result is still the same.

Where did I go wrong ❓

regards,
Henk

[henkiewie]

When I open an Incognito browser it appears in the theme name field.

![image](https://user-images.githubusercontent.com/74558874/158331084-2810ba6a-2a09-4664-8d5e-6230303007de.png

But when i change it to another theme it is not coming back. It even changes the name in the conf.yml to the new one.

😕

[Lissy93]

I think the same issue as #560
But I will look into it...

[emiran-orange]

Hi,
I use 2.0.7 in a container, user-defined theme is well loaded when setting the new theme in appConfig.theme (and appConfig.cssThemes) but it does not appear in dropdown list (and once I change theme, I cannot change back).
Not a vue dev but it may have smthg to do with extraThemeNames not being part of themeNames in src/components/Settings/ThemeSelector.vue.
If you confirm, I can drop a PR

[Lissy93]

Oh, you're correct, I'd not noticed that, good spot!
Replacing with this line with:

return [
  ...this.extraThemeNames, ...externalThemeNames, ...Defaults.builtInThemes, ...specialThemes,
];

Once updated, that will add any themes in appConfig.cssThemes to the theme dropdown. And once a theme is applied, it adds data-theme="my-theme" to the html tag. Which can then be targeted with html[data-theme='my-theme'] { ... }.

This should work if custom styles are in user-defined-themes.scss, but the external stylesheet option is broken which I think was the original issue, so I need to change how it works.

[emiran-orange]

Do you want the PR in the meantime ?

[Lissy93]

That would be awesome if you could :)
And I will work on the CSS imports, once I've merged #606 and #617

[emiran-orange]

That's it: #619

[henkiewie]

🤣 The suspense is killing me. No serious I think this will help a lot of docker users who want to start making their own templates (like me). 👍

[henkiewie]

Problem is fixed. Thank you @emiran-orange and @Lissy93

[Lissy93]

I actually wasn't expecting that alone to fix it 😆 But I'm glad it's working
P.s awesome theme :) When you're finished configuring, would you be up for sharing it on the Showcase?

[henkiewie]

I did just now but your bot keeps closing my submits.

[Lissy93]

Sorry about that, added it in 6018a49 :)
The Grafana kiosk mode widgets are a great idea, they look awesome too!