Repository navigation
Fix darkmode in NC25+ - #2559
Conversation
Signed-off-by: dartcafe <[email protected]>
Signed-off-by: dartcafe <[email protected]>
Signed-off-by: dartcafe <[email protected]>
|
There are some ugly tweeks, but it works for now. |
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| :root { | ||
| :root, [data-theme-default] { |
There was a problem hiding this comment.
If new themes gets added, your app will break
There was a problem hiding this comment.
@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?
There was a problem hiding this comment.
Not sure I get it, what is this about? :)
There was a problem hiding this comment.
If you need to know if the page is public or not, do it via PhP and check the rendered template?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@dartcafe Have you seen this post?!
Commenting on the last few posts: You distinguish two cases:
- a user is logged in – thus NC preferences shall be honored (overriding possibly different browser/system theme)
- 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.
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
…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]
There was a problem hiding this comment.
yes. copy&paste error. Thanks. 🙈
but only use [dark-theme], because light is default
ref nextcloud/server#32060