Style-dictionary: iOS Dark Mode Support

[yangchen-acc]

Hi folks, I've been digging into this for a while, from the doc as far as I understand it can transform colors into a .swift file of a list of UIColors, is there a way we can specify multiple colors for the same name and use the iOS 13 init(dynamicProvider: @escaping (UITraitCollection) -> UIColor) ?
Basically what it does is to return different color in dark and light mode
I know some custom transformation work need to be done and also templating work, but is there any existing guidance that I could look for?
Thanks

[dbanksdesign]

There is no existing guidance. If you could post a code snippet, I can show you how to do it with transforms and formats.

[chazzmoney]

@yangchen-acc if you have a code snippet showing what you are looking to generate as output, we can help guide you using the current system or see if adding a format setup or formal setup for dark modes might be appropriate.

[juliensagot]

Hi, my company is also interested in this feature, here is a template that you can use:

var colorName: UIColor {
    guard #available(iOS 13, *) else { return LIGHT_COLOR }
    return UIColor { traitCollection in
        return traitCollection.userInterfaceStyle == .light ? LIGHT_COLOR : DARK_COLOR
    }
}

On iOS 12 and lower, it will return the light color as one might expect.

[dbanksdesign]

Another way to do this would be to output color set assets. Here is an article about creating and using color set assets: https://devblog.xero.com/managing-ui-colours-with-ios-11-asset-catalogs-16500ba48205

But we should build a dark mode example (for ios, android, and web) though...

[dbanksdesign]

I'm working on an in-depth blog post and demo on supporting dark mode (on all platforms). If you want a sneak peak, the WIP demo is here: https://github.com/dbanksdesign/style-dictionary-dark-mode