Regard operating system color scheme for rescues

[cseelus]

Summary

Small PR that enables Rails to regard the OS setting for dark/light appearance when displaying errors.

It uses the prefers-color-scheme CSS media query which is currently supported by Firefox and Safari and in development for Chrome.

Essentially when you crunch it deep at night and don't want to burn your retinas, thus have enabled dark mode for your OS, it changes this …

… into this

[gmcgibbon]

This is really cool! In light of the recent addition of actionable errors (#34788), can we add styling for buttons too?

[cseelus]

Thanks @gmcgibbon!

Added the supported-color-scheme CSS property, which adapts the styling of form inputs automatically according to the selected OS appearance:

[gmcgibbon]

supported-color-schemes: light dark; doesn't seem to work on firefox nightly. 🤔 Is it part of the prefers-color-scheme spec?

[cseelus]

Its part of the spec, but unfortunately not implemented by Firefox yet.

I have also added the color-scheme prop, which will supplant supported-color-schemes, if thats ok with you.

Edit: Moved that property into the declaration for the body-tag, which I think is cleaner.

Edit 2: Firefox doesn't seem to fully support macOS dark mode yet, as seen in the following screenshot. Nevertheless I think its easier on the eyes than no support at all:

[gmcgibbon]

Firefox doesn't seem to fully support macOS dark mode yet

Would it not make more sense to remove color-scheme: light dark; and apply a few lines of manual styling for buttons? I can't think of a place where we use other form elements, so having legacy support for just form input buttons should be fine (we can always remove it later).

Also please squash your commits into one.

[cseelus]

Would it not make more sense to remove color-scheme: light dark; and apply a few lines of manual styling for buttons?

Tough question. Native styling has its advantages and I wouldn't have dared to touch that buttons, but I guess you are right, it might actually make sense here.

I would suggest keeping color-scheme: light dark;, as it "lets the engine know both modes are supported by the document", which might have implications for example when using accessibility features. This CSS prop is also in development for Chrome.

Have squashed all commits into one, wasn't aware this was to be done for each iteration.

[gmcgibbon]

One last thing. We haven't decided on a style for the button yet and I was thinking just manually styling buttons to look like what you've shown in your screenshots on Safari. If you could revert the other button stylings, I will merge this.

Thank you for your patience! ❤️

[cseelus]

No problem at all, thanks for the input!

So just to make sure I got that: You want the buttons to be styled with CSS to look like (native) macOS buttons?

[gmcgibbon]

So just to make sure I got that: You want the buttons to be styled with CSS to look like (native) macOS buttons?

Yes, the way they currently look on master:

And then in dark mode (on firefox nightly and safari) we can add manual styles for form input buttons to look like this:

[cseelus]

Done.

Edit: Only fo the dark versions style is "hardcoded", the normal version is unstyled/native.

[gmcgibbon]

Looks great! Please remove the hover and focus styles on the dark buttons and then we can

[gmcgibbon]

I don't think this focus or hover rule is necessary as there are no hover or focus styles applied to light mode buttons.

[matthewd]

I can't be sure without looking at a proper mock-up, but I think I'd ultimately aim for those buttons to look more like the one on https://rubyonrails.org/ or something -- I'd always seen the current plain OS styling as being temporary, and far too subtle on a busy and colorful screen, given it's almost certainly what you want to do.

(But that's all an aside for this PR: here, a dark style that matches the existing light style is fine.)

Talking of dark style, though, the current-line highlight in dark mode looks pretty average to me... maybe a quite-dark red would work better?

[cseelus]

Removed hover and focus styles for the button.

@matthewd Using a button style similar to the one on rubyonrails.org would look something like this:

… and a line highlight that is more of a dark red would look like this:

[matthewd]

Thanks @cseelus! I like both of those, though I think it's still safer to stick with the plain button style in this PR (so this PR can get merged without a side-track into extra opinions). I'd love to see a separate PR for that button change if you're interested!

[cseelus]

Yeah, redesigning that button sure is a separate and probably somewhat controversial matter.

[matthewd]

Did this get the line-highlight change?

[cseelus]

Last push where just the changes requested by Gannon.

Wanted to wait for feedback if the darker red I chose in the mock-up was actually an improvement, but the PR got merged before I saw your last comment and could react.