You can trigger an installable build for these changes by visiting CircleCI here.

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

@Gio2018 @frosty

Hey the colors look good...But I think you might have flipped light and dark mode? i.e. I expect a dark tooltip/snackbar on light mode, and a light one on dark mode. But I'm seeing light on light, and dark on dark. Unless I'm missing a design decision or other reason that we changed it!

Hey @osullivanchris !

Hey the colors look good...But I think you might have flipped light and dark mode?

the systemGray5 background, which is what is specified in #14136 adjusts automatically in light and dark mode (will be darker in dark mode, lighter in light mode). Should we replace this background with a different shade for the background and the tiltles? @iamthomasbishop, thoughts?

Ah good catch, @osullivanchris. That was my intention, and we discussed this early on but I must've missed the detail when reviewing the screenshots in isolation last week (my bad @Gio2018 !). The colors should be inverted:

• Light mode: dark-gray background (systemGray5 from dark mode)
• Dark mode: light-gray background (systemGray5 from light mode)

Note: text colors should also be inverted as a result.

Oh I see now @osullivanchris and @iamthomasbishop !

Sorry about the confusion, I misread this in the original issue, it was stated that the colors were to be inverted.

The only issue is that, as far as I know, there is no way to automatically "invert" the system colors between dark and light appearance, so the solution would be to use custom colors, that look like the system colors in the opposite appearance. While this is perfectly feasible, we would not be really using system colors (which I thought it was one of the goals of #14136), because, for example, iOS in light appearance has no system-equivalent of rgba[44.0, 44.0, 46.0, 1.0], which is systemGray5 in dark mode.
Another alternative is to find, among the available system colors, those that 'almost' match the inverted look that we are looking for. What do you think?

@Gio2018 I think you should be able to make use of some of our existing UIColor convenience methods to add a 'flipped' version of e.g. systemGray5 to UIColor in an extension. For example:

extension UIColor {
    static var invertedSystem5: UIColor {
        let originalDark = UIColor.systemGray5.color(for: UITraitCollection(userInterfaceStyle: .dark))
        let originalLight = UIColor.systemGray5.color(for: UITraitCollection(userInterfaceStyle: .light))

        return UIColor(light: originalDark, dark: originalLight)
    }
}

This only takes care of iOS 13+ – you'd need to check for that and do something a little different for earlier OS versions. Do you think this could work?

One thing to note is that Apple recommends against hard-coding the color values for their system colors, so the above would be preferable. 🙂

Hey @frosty !

I think you should be able to make use of some of our existing UIColor convenience methods to add a 'flipped' version of e.g. systemGray5 to UIColor in an extension
Do you think this could work?

I believe it could. To be noted that even if we are using colors that are derived from system colors, these are, in fact, custom colors.
Not an issue by itself, I just wanted to point this out. It's a subtle difference, but especially for semantically defined system colors (e.g. label which we are using for the primary text in notices) we might not be using it strictly as intended.

Apple recommends against hard-coding the color values for their system colors, so the above would be preferable.

I agree, this implementation (for iOS 13+) has the advantage of not hardcoding RGB values. For iOS 12, I think the only option is instead to hardcode them?

@osullivanchris , @iamthomasbishop , @frosty , colors are now updated to use their "inverted" version

Looks really solid overall, @Gio2018 ! One minor thing: are we using blue 40 on both light/dark mode (I believe so based on the description above)? If so, can we use our standard link colors, which are blue 50 in light mode and blue 30 in dark mode? That'd help to provide a bit more contrast against the backgrounds.

Other than that, everything looks good to go. Thank you!

Hey @iamthomasbishop !

are we using blue 40 on both light/dark mode (I believe so based on the description above)?

I'd say so, I kept the existing setting on this one

If so, can we use our standard link colors, which are blue 50 in light mode and blue 30 in dark mode?

Sure! I assume they should also be inverted like all the other colors in the notices? I am asking because if I don't invert them, they seem a little less readable. Here are example screenshots of both scenarios:

colors	light appearance	dark appearance
light: shade50, dark: shade30
ight: shade30, dark: shade50

I assume they should also be inverted like all the other colors in the notices? I am asking because if I don't invert them, they seem a little less readable.

@Gio2018 Ahh okay, if we're automatically inverting the colors, the second examples you shared look correct (light: shade30, dark: shade50).

@Gio2018 I just noticed one other thing on this PR – in dark mode (light backgrounds) we lose the dividers between the content and buttons of the larger quick start notice:

Is that something we could address separately?

in dark mode (light backgrounds) we lose the dividers between the content and buttons of the larger quick start notice:
Is that something we could address separately?

@frosty sure! I just merged this PR but I can open a new one for this specific issue. It looks like right now we are using white with alpha = 0.25 for both light and dark appearance. @iamthomasbishop , @osullivanchris what color should we use for the dividers in dark mode/light notice backgrounds? Is the existing ok for light mode/dark backgrounds ok, or should we change it too?
Thanks!!

@Gio2018 can we use Separator (flipped between light/dark modes, obviously)? If not, can we use the equivalent rgba values or opaque rgb values (happy to provide those if needed)?

@Gio2018 can we use Separator (flipped between light/dark modes, obviously)? If not, can we use the equivalent rgba values or opaque rgb values (happy to provide those if needed)?

Sure we can! I'll do similarly to what I did for the other colors