Asset catalog Color Sets

[johnrbent]

Hello!

I see that asset catalog image sets are supported with light and dark variants. It looks like color sets are not yet supported? Are there any plans to add that?

I did see in this discussion that you added colorScheme support that could be used to achieve the same effect, but it requires defining each color programmatically and observing colorScheme in each view, and writing ternary switches in each modifier. (Maybe there's a simpler way that I'm not aware of)

Mostly I'm just trying to decide the best way to approach building my app with full light/dark variants, which is typically pretty simple in SwiftUI with color sets.

[johnrbent]

Well I learned a lot trying to figure out the best approach to this, and finally settled on something I can work with...

The missing piece for me was the ShapeStyle protocol. I always overlooked this in all of the SwiftUI styling interfaces and just blindly passed in a Color from my color sets that already had light/dark values. But it's perfect for this workaround, and I can just pass in this CustomColor type everywhere I would normally pass in a Color with the same dot-notation and autocomplete ease. Here's how it's defined:

import SwiftUI
#if SKIP
import androidx.compose.foundation.isSystemInDarkTheme
#endif

public struct CustomColor: ShapeStyle, View {
    public let light: Color
    public let dark: Color
    
    #if !SKIP
    public func resolve(in environment: EnvironmentValues) -> some ShapeStyle {
        if environment.colorScheme == .light {
            return light
        } else {
            return dark
        }
    }
    #else
    @Composable public override func asColor(opacity: Double, animationContext: ComposeContext?) -> androidx.compose.ui.graphics.Color? {
        isSystemInDarkTheme() ? dark.colorImpl() : light.colorImpl()
    }
    #endif
}

extension CustomColor {
    public var inverse: CustomColor {
        CustomColor(light: dark, dark: light)
    }
}

extension ShapeStyle where Self == CustomColor {
    public static var primaryText: CustomColor {
        CustomColor(
            light: Color(red: 0.020, green: 0.051, blue: 0.157),
            dark: Color(red: 0.984, green: 0.980, blue: 0.973)
        )
    }
    
    public static var primaryBackground: CustomColor {
        CustomColor(
            light: Color(red: 0.984, green: 0.980, blue: 0.973),
            dark: Color(red: 0.020, green: 0.051, blue: 0.157)
        )
    }
    
    ...
}

One caveat is that this only works for iOS 17+ due to use of the resolve function. But it's getting to be version-dropping season, so not that big of a deal for most folks. I noticed in the SkipUI source that this function is there but commented out, so maybe this is on your radar...

I also haven't thoroughly tested all of the hierarchical system colors, but they appeared to work in my limited testing (I don't use them in my own projects)

I still think that color sets are the ideal and would reduce a good bit of upfront friction for people like myself who like to start projects this way by setting up the whole UI styling framework so it's in place on every View when it comes time to pick a theme (colors, fonts, etc).

[aabewhite]

Thanks, this is great! We'd definitely like to get named colors working for everyone. And when we do, perhaps we'll be able to take advantage of some of this code!

[tomauty]

Any update on plans to support named colors? Importing quite a few for my current project and realized after the fact that they aren't supported yet :)

[aabewhite]

Sorry, they are in fact supported now!
https://skip.tools/docs/modules/skip-ui/#named-colors

Use File > Packages > Update to Latest Versions to make sure you have an updated skip-ui version

[aabewhite]

Oh... my guess is the hex values. Can you try one that uses all decimals and no hex?

[tomauty]

Yep that was it. You're my savior.

Now have to go and convert a lotta colors :D

[tomauty]

Apparently just changing the input method should convert it.

For anyone encountering the same issue. Thank god I don't have to re-copy all these values.

[aabewhite]

I'll see about supporting hex in the future, but not sure exactly when. I just didn't realize that was a thing! Thanks for helping to debug

[tomauty]

Yeah I chose that because it was easiest to copy/paste from a Figma diagram haha. You can actually select everything in the catalog, then cmd-select each color, then set the input method for all of them all at once to convert over, so it wasn't too painful.