TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: Using custom colors in a Gradient

Forums > SwiftUI
@flaneur7508  

Hello,

Today I’m playing with Gradient and custom colors. I can’t seem to figure out the syntax to use a custom color and a Gradient tho.

I’ve created 3 custom colors in my assets. botBlue, botGreen, botOrange, botPurple, and I’ve tried to use them in the examples below, all of which do not compile.

.background(LinearGradient(gradient: Gradient(colors: [Color(mobColors.botBlue), Color.green]), startPoint: .top, endPoint: .bottom))

…

.background(LinearGradient(gradient: Gradient(colors: [Color(botBlue), Color.green]), startPoint: .top, endPoint: .bottom))

…

.background(LinearGradient(gradient: Gradient(colors: [Color(.botBlue), Color.green]), startPoint: .top, endPoint: .bottom))

I’ve also tried to create a static var and then use the variable name in a Gradient, as follows, but no joy. 

struct mobColors {
    static let botifyPurple = Color("botPurple")
    static let botifyBlue = Color("botBlue")
    static let botifyGreen = Color("botGreen")
    static let botifyOrange = Color("botOrange")
}

If anyone can advise how I can use custom colors in a Gradient, that would be much appriciated.

Tnank you!

2      

@Sergey  

Try like this: .background(LinearGradient(colors: [.botBlue, .green], startPoint: .top, endPoint: .bottom))

2      

@NigelGee  HWS+

You can put them in to an extension on Color EG

extension Color {
    static let botifyPurple = Color("botPurple")
    static let botifyBlue = Color("botBlue")
    static let botifyGreen = Color("botGreen")
    static let botifyOrange = Color("botOrange")
}

Then you can use it as a normal color

LinearGradient(colors: [.botifyOrange, .green], startPoint: .top, endPoint: .bottom)

To use @Sergey suggestion you have to add the struct name first

LinearGradient(colors: [MobColor.botifyOrange, .green], startPoint: .top, endPoint: .bottom)

Or use Color("botOrange")

LinearGradient(colors: [Color("botOrange"), .green], startPoint: .top, endPoint: .bottom)

My choice is to use the first as less likely for typos and will be on the auto complete so you can use anywhere

PS you should use caps form struct names EG MobColor not mobColors

2      

@flaneur7508  

Thank you! and thanks for the Struct tip. I just use camel case all the time. Will revise.

2      

@deirdresm  HWS+

A few other tricks for you.

  1. You can define them in an enum. In my case, these matched Asset colors (which had both a light and dark variant).
  2. If you make the enum conform to CaseIterable, you can do .allCases.
  3. You can add previews for enums! And look at how they look in light and dark modes.

https://gist.github.com/deirdresm/8c5e5a450de53ca0569017a17d4ef5f7

I'll probably crib together a small standalone example with a README, but there are a lot of tricks in here. (Some I'd do differently now that I've been working in SwiftUI for a couple of years; this is a couple of years old.)

Screencap of the preview output is below the code.

3      

Hacking with Swift is sponsored by Blaze.

SPONSORED Still waiting on your CI build? Speed it up ~3x with Blaze - change one line, pay less, keep your existing GitHub workflows. First 25 HWS readers to use code HACKING at checkout get 50% off the first year. Try it now for free!

Reserve your spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

Swift breaks down barriers between ideas and apps, and I want to break down barriers to learning it. I’m proud to make hundreds of tutorials that are free to access, and I’ll keep doing that whatever happens. But if that’s a mission that resonates with you, please support it by becoming a HWS+ member. It’ll bring you lots of benefits personally, but it also means you’ll directly help people all over the world to learn Swift by freeing me up to share more of my knowledge, passion, and experience for free! Become Hacking with Swift+ member.
Click here to visit the Hacking with Swift store >>
 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.