ColorScheme or Asset Catalog support

[cwinters8]

Hi, I'm back again - sorry to keep bugging you guys 😬

Summary

Is there any guidance or possibly an example for handling custom colors based on the user's color scheme? For example, different background colors for dark or light mode. I've tried conditionally setting values based on the .colorScheme environment value and a color set in the Asset Catalog so far, but it seems like neither may not be supported yet.

Details

I need to set some custom color values based on the user's color scheme preference. In the original iOS-only project I accomplished this by getting the color scheme like this

@Environment(\.colorScheme) private var colorScheme: ColorScheme

Then setting the right color values based on the value of colorScheme. For example

.background(colorScheme == .light ? offWhite : smokeyBlack)

When I tried using this pattern in the Skip project, I got the error Unresolved reference: colorScheme

So then I tried to take the approach of using the Asset Catalog to store the conditional color values. When I tried to refer to an Asset Catalog color set (e.g. Color("BackgroundColor")), I got the This API is not yet available in SKIP error. Then I found in the Resources & Images docs

Skip does not yet support iOS asset catalogs

So using the Asset Catalog for this purpose is probably not valid just yet.

Thanks in advance! I hope y'all are having a great weekend.

[cwinters8]

If there's not a solution for this yet, that's alright - I'll dig into figuring out how to accomplish this behavior from the Android side and handle it with #if SKIP blocks.

[aabewhite]

Thanks for the request. We do not have support for detecting (or setting) the color scheme yet, though your app will properly adapt to the system color scheme by default. And as you've seen, we don't have asset catalog support.

Getting and setting the color scheme has been pretty high on our list, however, so I'll do some investigation today and update you with my findings. Maybe we can implement it quickly.

[aabewhite]

Update: I do think we'll have .colorScheme and .preferredColorScheme support in the next few days

[cwinters8]

Great news!! Looking forward to it! Thank you

[aabewhite]

.colorScheme and .preferredColorScheme support are in the latest SkipUI (0.6.0). Use Xcode's File -> Packages -> Update to Latest to get it.

Supporting this required some modifications to the Main.kt file that gets generated with skip init, though. Since you have an existing project, you'll have to edit its Main.kt. Instructions for doing so are in the SkipUI README's new Preferred Color Scheme topic:

https://github.com/skiptools/skip-ui/blob/main/README.md#preferred-color-scheme

Please let us know if you have any trouble!

[cwinters8]

Awesome!! I just tried to build with the changes, but I'm getting a new error - not sure if it's possibly related to the Main.kt changes?

From skip-gradle.log.txt:

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:packageDebugResources'.
> /Users/clark/code/hoofhub/app/hoofhub/Android/app/src/main/res/gerbera_fonts/gerbera_bold.ttf: Error: The file name must end with .xml

[cwinters8]

Here's my current Main.kt with the required updates described in the README

[cwinters8]

I just checked the directory its complaining about and realized that is a remnant of my attempts at custom fonts before the official custom font support. I deleted the gerbera_fonts directory and am rebuilding now

[cwinters8]

That fixed it. Color scheme detection is working perfectly! Thanks so much!! You guys rock.