How To Use Custom Colors and Modifiers in SwiftUI

Using Color Sets to simplify working with colors

Rudrank Riyam
Oct 3, 2019 · 2 min read
Image for post
Image for post
Gradients Game (Image source: Author)

I have been working on my SwiftUI game for a few weeks now, and it’s turning out to be fun!

Custom Colors

I switched to custom colors for the branding, which is inspired by the systemIndigo color from UIColor. The above mockup uses systemIndigo, but I want to have a darker color for the light mode and a lighter color for the dark mode.

To achieve this, you can create a new color set in the Assets.xcassets folder.

Image for post
Image for post

Then tick-mark the Any, Dark appearances to have a different color in Dark Mode because why not?

Image for post
Image for post

Provide the values for the color(s). I used sRGB with a 0–255 method.

Image for post
Image for post

Create an extension of the struct color with a static constant, getting the color from the asset catalog.

extension Color {    static let oldPrimaryColor = Color(UIColor.systemIndigo)    static let newPrimaryColor = Color(“primaryColor”)}

You can easily use it on a View like:

Text(“Gradients Game”)    .fontWeight(.black)    .font(.system(size: 36))    .foregroundColor(.newPrimaryColor)

Custom Modifiers

Image for post
Image for post

If you look at the mockups above, both the Continue and Evaluate buttons have the same design.

You can achieve this by writing custom modifiers to reuse the design everywhere.

struct ButtonModifier: ViewModifier {    func body(content: Content) -> some View {        content            .font(.headline)            .foregroundColor(.white)            .padding()            .frame(width: UIScreen.main.bounds.width — 30, alignment: .center)            .background(RoundedRectangle(cornerRadius: 8, style:   .circular).fill(Color.newPrimaryColor))            .padding(.bottom, 8)    }}

To make it even simpler to use, write a function in an extension of the View to return the modifier.

extension View {    func customButton() -> ModifiedContent<Self, ButtonModifier> {        return modifier(ButtonModifier())    }
}

Now you can easily use it as:

Text(“Evaluate”)    .customButton()

Better Programming

Advice for programmers.

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Rudrank Riyam

Written by

Consultation/Contract Work — contact@rudrankriyam.com

Better Programming

Advice for programmers.

Rudrank Riyam

Written by

Consultation/Contract Work — contact@rudrankriyam.com

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store