Theming: Force Light or Dark Theme Regardless of System

[wlanowski]

Is your feature request related to a problem? Please describe. Uniform design of our Nextcloud web interface is important to us. Unfortunately, Nextcloud consistently looks entirely different depending on the device settings, especially for unregistered users with whom we want to share data.

Describe the solution you'd like We desire a switch in the administration settings of Nextcloud that enforces either the light or dark theme of Nextcloud for both unauthenticated and authenticated users, regardless of device settings.

Describe alternatives you've considered No alternative ideas. The default, current behavior of Nextcloud should not be influenced. For an alternative solution, such as using custom CSS rules, I would also be grateful.

Additional context Nothing to add

[joshtrichards]

Hi @wlanowski - Seems reasonable.

Do you happen to have a specific example (of "looks one way here" versus "looks another way over here")? It'd be helpful to have 1-2 examples to accompany your note. Reproduction steps, screenshots, whatever.

Off the top of my head I recall spots where it's challenging to theme things fully (some fatal error situations for example), but there may be other spots too.

I assume toggling the Disable user theming option in the UI as well as setting the enforce_theme value in config.php weren't fully effective?

[wlanowski]

Hey! Thanks for the response!

My issue is that I've customized the branding of Nextcloud (colors and logos) to match the light theme, which registered users also see.

However, when visitors have dark mode enabled at the system level, (non-logged-in) users see Nextcloud in dark mode. This is practical. In my case, though, I want the light mode to be active on every device.

EDIT: Adding 'enforce_theme' => 'light' to the config.php has no effect on non-logged-in users in my case.

[pschiffe]

I'm having the same issue. 'enforce_theme' => 'light' or Disable user theming option has no effect on non-logged users, for example when sharing files or forms anonymously.

I think the configuration option enforce_theme should apply also to non-logged users, at least it makes sense to me. Based on the description I thought that's the option I'm looking for, but no luck.

[Oriann]

Hey! Thanks for the response!

My issue is that I've customized the branding of Nextcloud (colors and logos) to match the light theme, which registered users also see.

However, when visitors have dark mode enabled at the system level, (non-logged-in) users see Nextcloud in dark mode. This is practical. In my case, though, I want the light mode to be active on every device.

EDIT: Adding 'enforce_theme' => 'light' to the config.php has no effect on non-logged-in users in my case.

Same to me, theming is controllable and applied for registered or signed users but not for visitors of my external links. I wish somebody will make a config switch to force light theme regardless of system theme that has set up viewing user.

[igbjnI05bF]

This is very important to me as well. The "System Default" setting in Appearance and accessibility seems to default to dark mode for many devices/browsers, including Firefox on my desktop and phone. Dark mode looks very good in Nextcloud, but absolutely terrible and unreadable in Collabora. When I share a link to a spreadsheet and somebody opens it, it's kind of embarrassing. I either have to walk them through manually toggling the light them or else I just tell them to download the file and open locally.

[gravelfreeman]

The same thing is happening to me (ignoring my custom theme for non-logged users), which makes Nextcloud look unpolished and in an early development stage. From what I've seen so far, I don't think that's the impression you want to give. Your product is much better than what I've read on Reddit, though those might be experiences from years ago. Keep up the great work!

[ernolf]

@wlanowski

For an alternative solution, such as using custom CSS rules, I would also be grateful.

@pschiffe @Oriann @igbjnI05bF @gravelfreeman @joshtrichards

Here I described how to achieve this goal:

https://help.nextcloud.com/t/enforce-dark-theme-for-logged-out-users-too/192586/2?u=ernolf

Good luck, ernolf

[Oriann]

@wlanowski

@pschiffe @Oriann @igbjnI05bF @gravelfreeman @joshtrichards

Here I described how to achieve this goal:

https://help.nextcloud.com/t/enforce-dark-theme-for-logged-out-users-too/192586/2?u=ernolf

Good luck, ernolf

Thank you for half-easy solution, just tried it and it works right out of box. But still I think we need some official solution because it can broke after few updates if nextcloud staff changes something in frontend.

[skjnldsv]

There's also the way to add the following in the jsloader app

document.body.dataset.themes = 'light'
document.body.dataset.themeLight = true

But the app itself does wait for the page to be ready, so there is a bit of a "flashing" effect :/

[gravelfreeman]

@wlanowski

For an alternative solution, such as using custom CSS rules, I would also be grateful.

@pschiffe @Oriann @igbjnI05bF @gravelfreeman @joshtrichards

Here I described how to achieve this goal:

https://help.nextcloud.com/t/enforce-dark-theme-for-logged-out-users-too/192586/2?u=ernolf

Good luck, ernolf

This doesn't work for me. Everything is just ignored.

[h0lley]

my current workaround is to create some template overrides within a custom theme: /themes/my_theme/core/templates/layout.public.php /themes/my_theme/core/templates/layout.guest.php

contents:

<?php

# Your desired permanent theme, dark or light
$enforce_theme = 'dark';

# May need to adjust path if you aren't using docker
$original_include_path = set_include_path(get_include_path().PATH_SEPARATOR.'/var/www/html/core/templates');

ob_start();
include(basename(__FILE__));
$html = ob_get_contents();
ob_end_clean();

set_include_path($original_include_path);

echo str_replace('<body', '<body data-themes="'.$enforce_theme.'" data-theme-'.$enforce_theme.'="true"', $html);

I wrote it so that it still uses the original template files so it wouldn't break any updates.

this is basically this https://github.com/nextcloud/server/issues/41048#issuecomment-2129400726 solution except that it does not use an extra app (originally I used jsloader too but looks like it's no longer compatible with current nextcloud version) and shouldn't have the "flashing" issue.

if you want to try this and haven't already set up a custom theme, remember to enable it with an entry to your config.php: 'theme' => 'my_theme',

since this purely lives in your custom theme folder and is only active on pages where we have this issue (e.g. when the user is logged out and the enforce_theme config has no effect) for me it's the cleanest workaround atm.

[gravelfreeman]

@h0lley it's working great thank you!

You seem to have great knowledge and I was wondering if you could help me out customize the logo in collabora applications when the light mode is triggered? Thing is my logo is white and that it only works in dark mode but during the day I can't work in Collabora dark mode and I would like my users to see the right logo which should be the black version of my logo.

[skjnldsv]

Wait a second, I already implemented this :see_no_evil: In 2022 :sweat_smile: https://github.com/nextcloud/server/pull/32217

https://github.com/nextcloud/server/blob/620d10c842b2fb06f750e9cd2dca29b5c9227b26/config/config.sample.php#L1999-L2005

[h0lley]

@skjnldsv people are aware of the enforce_theme property for config.php, and it mostly works great (thanks for implementing it!), however the issue here is that it does have no effect for public/guest, i.e. non-logged-in users, which causes pages like the login form or the public share page to appear with broken, inconsistent theming.

@gravelfreeman good to hear that it works for you, too. as for your issues with the logo, I don't have a solution for that on hand as I haven't had this requirement myself, and currently have no capacity to look into this. sorry!

[skjnldsv]

Fair point! Let me check the guest one!!

[skjnldsv]

Done in https://github.com/nextcloud/server/pull/45875

[JanBoehme]

Hi, I just updated from NC 29.0.4 to 29.0.6 and the theme enforcing for embedded content doesn't seem to work anymore.

I have 'enforce_theme' => 'light' in my config, previously (on 29.0.4) this was working fine, also for forms embedded via iframe into a different website. Now, when viewed in nextcloud context everything is still looking good, but in the context of the other website, the embedded form will switch to dark mode, when active on the client's system.

Does anybody else experience this behavior and did anything change with the last update?

[Oriann]

Hi, I just updated from NC 29.0.4 to 29.0.6 and the theme enforcing for embedded content doesn't seem to work anymore.

I have 'enforce_theme' => 'light' in my config, previously (on 29.0.4) this was working fine, also for forms embedded via iframe into a different website. Now, when viewed in nextcloud context everything is still looking good, but in the context of the other website, the embedded form will switch to dark mode, when active on the client's system.

Does anybody else experience this behavior and did anything change with the last update?

I am experiencing this too on NC ver.29.0.7, it worked on previous release 28.0.10

Please reopen this issue @skjnldsv

[susnux]

Please open a new issue if you encounter a similar bug.