Changing the theme?

[christoph-planfox]

Hey all,

I use OpenCloud with docker compose and I am wondering, how to change the theme.
Everything was pulled into /opt/opencloud, .env sets config and data to a folder in my home dir.
OpenCloud works just fine.

I found the theme.json file in opencloud/services/web/assets/themes/opencloud and changed its content to what I would like it to be.
Then I removed all my containers and made a docker compose up -d. This does not change the appearance. Somehow, this seems not to be the place, where the theme.json gets pulled from.
Sure, I could change it inside the docker-container itself, but is this the idea?

What am I getting wrong? :D
Sorry if I am asking a dumb question ;)

Thanks and Best,
Christoph

[JammingBen]

See here for some instructions on how to load a theme: https://github.com/opencloud-eu/opencloud/tree/main/services/web#loading-themes. Essentially you want to set it to something like this and then provide a custom theme under that path:

WEB_ASSET_THEMES_PATH: ${WEB_ASSET_THEMES_PATH:-/web/themes}
WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/opencloud/theme.json}

[christoph-planfox]

Thanks @JammingBen for pointing that out. I thought I understood it, but I still am not able to get it done ;)
I copied the original theme.json to my folder in /mnt/opencloud-data/config/themes and changed it slightly (changed the text and the primary color).

Now I tried this in the .env file as suggested:

also tried it this way, as I was not sure, what the proper formatting was (I tried to use paths as with other variables in .env):

both times it did not seem to work as my changes were not reflected when I opened OpenCloud. (an I always docker composed down and then docker compose up -d).

What did I do wrong? And I am pretty sure I did something wrong :D
Does it matter where in the .env-File this is? I dont think so?

btw. the theme.json is outside of the docker structure and it lives in an external folder like the data and config folders. Maybe I forgot something to add here and the path is wrong?
(Sorry, not that far in the whole docker universe ;) learning though)

[christoph-planfox]

Thanks for getting back to me :) @JammingBen
I was able to mount a theme to the container. But I am still unable to load theme whatver way I tried.

What I tried:

• mount the theme files to /var/lib/opencloud/web/assets/themes/opencloud/theme.json: that worked, but just the standard theme loaded, not my changed one,
• saw that, there is already a theme folder directly in /web, so I mounted the theme files to /var/lib/opencloud/web/themes/opencloud/theme.json: same result, opencloud came up but with the default theme.

And yes, I verified the files in the container - they were mounted properly and the content of the theme.json was also correct,

And I also tried it the other way as you suggested. I added the following lines to the opencloud.yml at the environment part:

environment:
      WEB_ASSET_THEMES_PATH: ${WEB_ASSET_THEMES_PATH:-/web/themes}
      WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/theme.json}

and again I mounted the files necesary to /var/lib/opebcloud/web/themes/ in the volumes part of the opencloud.yml:

volumes:
      - /mnt/opencloud-data/themes:/var/lib/opencloud/web/themes

and verified the the files are there:

I also verified the path variables which seems to be correct?

In this case I get the config error from above with a failed to load theme.
I was pretty sure I did everthing right this time.
Did I forget anything?

[JammingBen]

If you have your environment set like so:

environment:
      WEB_ASSET_THEMES_PATH: ${WEB_ASSET_THEMES_PATH:-/web/themes}
      WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/theme.json}

Then you need to mount your theme under this path to make it work:

volumes:
      - /mnt/opencloud-data/themes:/web/themes

[KlyX84]

Hm yeah, I get what you are saying. And we already tried this. The thing is, that when the paths seems to be correct, OpenCloud gives no config error, but it is still not the correc theme loaded somehow.
For example, I know used the vars like this:

environment:
      WEB_ASSET_THEMES_PATH: ${WEB_ASSET_THEMES_PATH:-/var/lib/opencloud/web/themes}
      WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/theme.json}

volumes:
      - /mnt/opencloud-data/themes:/var/lib/opencloud/web/themes

This puts the files exactly where we expect them to be:

Also when I am opening opencloud and call the json-URL, the JSON opens and seems correct. You might try with my URL: https://opencloud.abacado.com/themes/theme.json
I only changed the primary color and the slogan. But neither seems to reflect when opening https://opencloud.abacado.com e.g. on the login screen.

Or did I miss something with the theme-file itself? :O

[JammingBen]

I only changed the primary color and the slogan. But neither seems to reflect when opening https://opencloud.abacado.com/ e.g. on the login screen.

Oh well, that could be the issue then 😅 1. The login screen it not affected by the theme because it's coming from the IDP. 2. The primary color is not being used at all since we use material design and it's common to use the secondary color for most of the call-to-actions. I suggest trying to change secondary, surface or chrome.

[KlyX84]

Oh dear 😂😂😂 - yep it works now!
So, most of my posts are now obsolete - thank for your patience!

Hopefully last question then: where and how can I theme the IDP? 😁

[JammingBen]

Nice, glad that it works now!

Hopefully last question then: where and how can I theme the IDP? 😁

That depends on the IDP you're using. The built-in IDP can't be customized. Other IDPs such as Keycloak for example support this feature, but you would need to check on their end on how to do that.

[KlyX84]

For now, I use the integrated IDP - for my use case this is the easiest solution for now.
Is there a plan for the future, that we can style the internal IDP or do we need to use Keycloak if we want to do that?

[JammingBen]

No concrete plans (yet anyway).

With that being said, I re-checked the configs and you should at least be able to change the logo and the background. For the background there is the IDP_LOGIN_BACKGROUND_URL env variable. The logo gets fetched based on the logo property in the common section of your theme.json.

[4Syno]

I'm not a developer, just a simple user, but from my perspective it looks fine :)
I really like the dark mode; I just want to customize this three positions from the login screen.

The easiest way to check if this is my theme is the slogan, right?


the background image is inside the container:


Could the error occur during setup under Docker? I followed the steps in your documentation ‘docker cli’ not composer setup.

[4Syno]

I'm now one step further 👍🏼
I start from scratch and recreated it with all the new variables and I have my theme colors after logging in :)

I also have my logo on the login page; how can I adjust the size there?
But the slogan and the background image still isn't loading :( How can I debug that?
When I set the loglevel to debug
OC_LOG_LEVEL=${LOG_LEVEL:-debug}
I see ZERO errors that point to the background. How do you proceed in such case?

[JammingBen]

I also have my logo on the login page; how can I adjust the size there?

You can only adjust this by the image size itself.

But the slogan and the background image still isn't loading :( How can I debug that?

If you're using the IDP_LOGIN_BACKGROUND_URL variable (e.g. set it to /foo/bar.jpg), you need to make sure your background image is available under https://your-cloud.com/foo/bar.jpg. Next thing to check is if your browser is actually requesting the image (via the browser network tab).

On a general note: as you may have noticed, the theming on the login page is quite limited with the integrated IDP because we don't recommend using it for other than testing purposes. Production instances should always use an external IDP such as keycloak.

[4Syno]

.. as you may have noticed, the theming on the login page is quite limited with the integrated IDP

I'm totaly agree with you.

Production instances should always use an external IDP such as keycloak.

I just want to replace my ownCloud for three people. The fact that I now have to do this on such a large scale with an additional component, namely Keycloak. I'm going to take a break now and see how things go.

Thank you very much for your help :)