View shown by App Intent with ShowsSnippetView doesn't adapt to dark mode

I have an App Intent that conforms to ShowsSnippetView and returns a view that is shown in the Siri interface after the shortcut runs. The view simply consists of a VStack with a Text element, with no special styling. When my device is set to dark mode, the view doesn't adapt: the text is black, but the background of the Siri interface is a transparent dark gray, which makes the text almost unreadable. The text should be white in dark mode. The colorScheme environment value inside the view corresponds to light mode, even though the device is set to dark mode. This is most likely a bug in iOS.

Answered by DTS Engineer in 838871022

You should set up your view so that it uses the system's vibrant color constants, so that they automatically adapt in Dark Mode — Design App Shortcuts mentions this. Our sample code project does this in a view for a snippet with the secondary color modifier (partly shown below), with the Dark Mode results you see in the screenshot.

struct TrailInfoView: View {
...
var body: some View {
HStack {
Spacer()
VStack {
...
VStack {
Text(trail.name)
.font(.title)
Text(trail.regionDescription)
.font(.subheadline)
.foregroundColor(.secondary)
if includeConditions {
Text(trail.currentConditions)
.font(.callout)
.foregroundColor(.secondary)
}
}
}
Spacer()
}
}
}

— Ed Ford,  DTS Engineer

You should set up your view so that it uses the system's vibrant color constants, so that they automatically adapt in Dark Mode — Design App Shortcuts mentions this. Our sample code project does this in a view for a snippet with the secondary color modifier (partly shown below), with the Dark Mode results you see in the screenshot.

struct TrailInfoView: View {
...
var body: some View {
HStack {
Spacer()
VStack {
...
VStack {
Text(trail.name)
.font(.title)
Text(trail.regionDescription)
.font(.subheadline)
.foregroundColor(.secondary)
if includeConditions {
Text(trail.currentConditions)
.font(.callout)
.foregroundColor(.secondary)
}
}
}
Spacer()
}
}
}

— Ed Ford,  DTS Engineer

@DTS Engineer , I don't see anything in that view that is different from what I already have:

struct ResponseSnippetView: View {
let text: String
var body: some View {
VStack(alignment: .leading, spacing: 8) {
Text(.init(text))
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
}
}

As I mentioned, the text appears black in dark mode, not white as in the screenshot you posted. The colorScheme value inside the view corresponds to light mode even when the device is in dark mode.

I created a minimal reproduction here: https://github.com/DePasqualeOrg/Test-App-Intent-Snippet

As I noted, this appears to be a bug in iOS.

I can't access the GitHub link you posted. Based on your code snippet, you don't have a semantic color modifier on your Text, like .foregroundColor(.secondary) in my code snippet. That's the correct way to handle this.

— Ed Ford,  DTS Engineer

Sorry, I forgot to make the repo public. It's now public.

You're wrong about specifying .foregroundColor(.secondary). I tried that and it does not change the fact that the snippet view is not displaying properly in dark mode.

Please read again what I wrote: The colorScheme environment variable is even showing light when the device is set to dark mode, so this is a bug in iOS. Please try the reproduction in the repo to see it for yourself.

You're wrong about specifying .foregroundColor(.secondary). I tried that and it does not change the fact that the snippet view is not displaying properly in dark mode.

What iOS version are you testing on? I shared a screenshot that shows a snippet in dark mode, straight from one of our published sample code projects. If you run that same sample code project on the iOS version that you are testing with, do you see the exact same thing as in my screenshot?

I looked at your project (thanks for opening up the GitHub link), and if I run the project without modifications, I cannot reproduce your screenshot on iOS 18.5. I've attached the screenshot from your app at the end for the record.

— Ed Ford,  DTS Engineer

I'm running iOS 18.5, and the snippet view is still showing the light colorScheme environment value in dark mode, with black text instead of white text.

If you run the sample code project on iOS 18.5, do you see the exact same thing as in my screenshot? Please share a screenshot of that test run.

— Ed Ford,  DTS Engineer

I tried it around the time I originally posted this thread, and that sample code project displays the dialog correctly, but it's not analogous to what I'm discussing here, because it uses IntentDialog. The repo I posted with the reproduction only uses a snippet view without a dialog. The dialog adds a top section with additional information. I just want to display the snippet.

Also, when I wrap a snippet in an IntentDialog, sometimes I get the same behavior where the snippet doesn't adapt to dark mode.

When I tried to build Apple's sample code project again just now, I got this error: Invalid value of WKCompanionAppBundleIdentifier key in WatchKit 2.0 app's Info.plist: com.example.apple-samplecode.AppIntentsSampleApp (expected com.example.apple-samplecode.AppIntentsSampleApp<redacted>)

It's good to know you're not interested in the intent dialog options, but my intention is to focus on the snippet that the sample shows (the Thunder Mountain Trail text and additional text elements below it in my screenshot). Do you see those text elements of the snippet render legibly in both dark mode and light mode on iOS 18.5?

As for that error when you try to run the sample — you can remove the watchOS target from the app for the purposes of this discussion. The sample shipped with some build setting magic to tie everything together. I looked at the git history included in the download of the sample and I see that part of that build setting setup accidentally got undone for one of the sample's updates. I will follow up on that internally, thank you for sharing the error message!

— Ed Ford,  DTS Engineer

The snippet from the sample app is also not displaying properly in dark mode.

Ah ha! If you can reproduce this with the sample project on your device, then this behavior is a bug. The sample's implementation of that view is the correct way of handling how a snippet view may be rendered in either light or dark modes. Since you can reproduce this but I can't, it would be helpful for you to file a bug report. including that screenshot as well as a sysdiagnose. (And please post the FB number here for the record.)

— Ed Ford,  DTS Engineer

I already did that: FB17603899

Thanks for doing that.

— Ed Ford,  DTS Engineer

View shown by App Intent with ShowsSnippetView doesn't adapt to dark mode
 
 
Q