Vibrancy where vibrancy should not be

[LoganDark]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

The UI explorer app, but my macOS is 10.14 Mojave.

Steps to Reproduce

Open the app.

Expected Behavior

The app should not be vibrant underneath certain controls (like buttons, etc)

Actual Behavior

There's vibrancy under the 'inline' button

There's vibrancy under the switches and radios

There's vibrancy under the spinners

The sidebar does not react well to vibrancy

Vibrancy under all single-line text fields

Reproducible Demo

https://github.com/ptmt/react-native-macos/files/199128/UIExplorer.zip

[ptmt]

Installed Mojave yesterday:) working on it

…

On Sat, 16 Jun 2018 at 05:32, LoganDark ***@***.***> wrote: Is this a bug report? Yes Have you read the Contributing Guidelines <https://facebook.github.io/react-native/docs/contributing.html>? Yes Environment The UI explorer app, but my macOS is 10.14 Mojave. Steps to Reproduce Open the app. Expected Behavior The app should not be vibrant underneath certain controls (like buttons, etc) Actual Behavior [image: image] <https://user-images.githubusercontent.com/4723091/41494990-f49eabd0-70d1-11e8-98d0-c93cca1f0cfe.png> There's vibrancy under the 'inline' button [image: image] <https://user-images.githubusercontent.com/4723091/41494991-ffb21b06-70d1-11e8-8d10-b30da30b3660.png> There's vibrancy under the switches and radios [image: image] <https://user-images.githubusercontent.com/4723091/41494996-0f7d5078-70d2-11e8-8193-565d222adefe.png> There's vibrancy under the spinners [image: image] <https://user-images.githubusercontent.com/4723091/41495000-1baecc32-70d2-11e8-86fd-0abac15e3bda.png> The sidebar does not react well to vibrancy [image: image] <https://user-images.githubusercontent.com/4723091/41495006-43741254-70d2-11e8-8d50-062634e497f1.png> Vibrancy under all single-line text fields Reproducible Demo https://github.com/ptmt/react-native-macos/files/199128/UIExplorer.zip — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#201>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9SU9bTE3-7EEP-MEF8ZII-xRFVkxpHks5t9G4jgaJpZM4UqUkM> .

[LoganDark]

I'd also be completely okay with dark mode support

[ptmt]

Current progress:
I added AppearanceManager that allows using system colors, that depends on the theme.
Fixed default color for text, it's not white anymore. Trying to eluminate hardcoded color constants now.

(of course, the initial issue still needs to be fixed)

[LoganDark]

LGTM, is an updated UIExplorer available yet?

[ptmt]

It's now RNTester in the latest version. I haven't finished yet, will keep posting here.

[ptmt]

Weird issues, fixed them, but it's not final. Also watched WWDC sessions about dark mode and want to improve the whole approach.

[aleclarson]

@ptmt Can this be closed? Nevermind!

[LoganDark]

@aleclarson Can I have a pre-built version of RNTester without the vibrancy issues?

[aleclarson]

It's hard to tell if the "inline button" still has this issue, but I can confirm the others do still (except the sidebar seems to look fine now). No timeline on when I'll get around to solving this.

[LoganDark]

Then please do not close the issue.

[aleclarson]

@LoganDark Wasn't planning on it! 😉

[aleclarson]

We probably want to disable allowsVibrancy on all views by default, and add an allowsVibrancy prop to RCTView.

edit: Eh, that doesn't seem to work..

[aleclarson]

In the documentation on NSVisualEffectView, Apple says:

It is recommended that you enable vibrancy only in the leaf views of your view hierarchy. Subviews inherit the vibrancy of their parent. Once enabled in a parent view, a subview cannot turn off vibrancy. As a result, enabling vibrancy in a parent view can lead to subviews that look incorrect if they are not designed to take advantage of the vibrancy effect.

So the problem is that RCTRootView inherits from NSVisualEffectView and has vibrancy enabled by default.

We should disable vibrancy by default in RCTRootView and provide some mechanism for enabling such vibrancy in "leaf views" (as Apple puts it).