Skip to content

Respect "prefers-color-scheme" media selector for guests - #21366

Merged
nickvergessen merged 1 commit into
masterfrom
feature/noid/respect-prefers-color-scheme
Jun 22, 2020
Merged

Respect "prefers-color-scheme" media selector for guests#21366
nickvergessen merged 1 commit into
masterfrom
feature/noid/respect-prefers-color-scheme

Conversation

@nickvergessen

@nickvergessennickvergessen commented Jun 10, 2020

Copy link
Copy Markdown
Member

Guests now automatically see dark theme when the browser tells the website it prefers a dark style:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

A similar setting for contrast high seems to be in development but is not supported:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

See https://stackoverflow.com/a/56757527 for helps how to test this quickly

Edit by @georgehrke:
fixes#12276

Signed-off-by: Joas Schilling <coding@schilljs.com>
@nickvergessen

Copy link
Copy Markdown
MemberAuthor

cc @nextcloud/accessibility

@nickvergessen

Copy link
Copy Markdown
MemberAuthor

cc @nextcloud/theming

@jancborchardtjancborchardt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, this is pretty amazing! :) Great integration and works well when tested with the link sharing pages of Forms, Talk, and Files.

@georgehrke

Copy link
Copy Markdown
Member

Where does the actual @media (prefers-color-scheme: dark) { come from though?

@nickvergessen

Copy link
Copy Markdown
MemberAuthor

Its on the link meta tag, that is the only why you can set global css vars within a condition

@juliusknorr

Copy link
Copy Markdown
Member

Does not fully fix #12276 as it is only for unauthorized access though public pages, but a good first step 👍

@nickvergessen

Copy link
Copy Markdown
MemberAuthor

Yeah, we can show a not about the personal setting based on the selector in the future, but first guests only.

@nickvergessen
nickvergessen merged commit 64f5a20 into masterJun 22, 2020
@nickvergessen
nickvergessen deleted the feature/noid/respect-prefers-color-scheme branch June 22, 2020 13:56
@Moini

Moini commented Jan 5, 2021

Copy link
Copy Markdown

How can I turn this off? For some reason, nextcloud switched to dark mode today after I logged in, and I really dislike it. The dashboard is unreadable and everything looks unsharp to my eyes. I need dark on white text, which is available, but not accessible to me, apparently.

@Moini

Moini commented Jan 5, 2021

Copy link
Copy Markdown

Update: another logout - login cycle fixed it...

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to reviewWaiting for reviewsdesignDesign, UI, UX, etc.enhancementfeature: accessibility

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Adapt dark mode based on system settings

5 participants

@nickvergessen@georgehrke@juliusknorr@Moini@jancborchardt