Fix darkmode in NC25+

[dartcafe]

• change css due to new css variables since NC25
• handle prefer-color-scheme in public polls and new apperance setting

ref nextcloud/server#32060

[dartcafe]

There are some ugly tweeks, but it works for now.

[skjnldsv]

If new themes gets added, your app will break

[dartcafe]

@skjnldsv Hi, thanks, but as I said in the comments: "Some dirty tweeks." 😉

The quandary is, to detect if the user opened a public page in NC<25 or an internal page in NC25 with system detect theme. Any suggestion?

[skjnldsv]

Not sure I get it, what is this about? :)

[skjnldsv]

If you need to know if the page is public or not, do it via PhP and check the rendered template?

[dartcafe]

like a miracle I found body-public. But the proble are not the public pages. I have to tell if internal pages ar from NC22 or NC25 with system theme detection. The only indicator to me seems to be [data-theme-default] to detect, that this page is from NC25 with activated system theme detection.

[nursoda]

@dartcafe Have you seen this post?!

Commenting on the last few posts: You distinguish two cases:

1. a user is logged in – thus NC preferences shall be honored (overriding possibly different browser/system theme)
2. no NC user session – thus NC preferences cannot and don't have to be honored, always use browser/system theme

This applies to public/link shared files pages just the same as to public polls, doesn't it?
So how does the core file sharing functionality do it?

I'm still struggling to find out what this all is about and where to start. Since I'm not a dev, maintaining twofactor_email just got even more challenging. If you're interested in mutual exchange (probably more helping me out), feel free to contact me. see privat seyfarth de olav.

[dartcafe]

The public pages are not the problem, because the system setting is respected since a couple of versions.
The problem are the internal pages, because we have some colors defined, which have to be set according to the theme.

And we (better I) want to keep the compatibility to NC prior to 25.

So when it comes to NC24 and before, we have to select the colors according to the default (light) theme or the dark theme. easy

Since 25, we have a third situation. The (logged in) user can have set a dark or light theme, which means the system setting is to be ignored. But if he has set the system theme, prefers-color-scheme: dark comes into play. But is has only to be applied, if the user has set this theme, not whan dark or light theme is selected.

I found out that the system theme seems to be indicated by the body attribute default-theme. Maybe a misinterpartion, but it seems to work as expected. Therefore I chosed these combinations.

	logged in user dark theme set	logged in user light theme set	logged in user system theme set
NC 25	use [theme-dark]	ignore prefers-color-scheme:dark, use [light-theme]	apply prefers-color-scheme, use [default-theme]
NC 24	ignore prefers-color-scheme, use body.theme-dark	ignore prefers-color-scheme, use body.theme-light	not valid

Fallback then are light colors.

So it comes that @media:prefers-color-scheme: dark only has to be applied, if

• user is not logged in OR
• user is logged in
  • AND NC is >24
  • AND user has not set the light theme --> (current indicator [default-theme] exists)

[dartcafe]

To tell if a page is a public page or not can be told by the body id

• internal pages have the id body#body-user
• public pages have the id body#body-public

I don't know since when, but i discovered this while fiddling out the theme differences.

[nursoda]

…Therefore I chose these combinations.…

Shouldn't the cell "logged in user dark theme set" × "NC 25" read as follows?

ignore prefers-color-scheme:light,
use [dark-theme]

[dartcafe]

yes. copy&paste error. Thanks. 🙈
but only use [dark-theme], because light is default