Project Mess #3: Hardcoded UI colours

In this short article we will see another project mess.
Let’s see the following example:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .foregroundColor(Color.black)
                .padding(.leading, Spacing.tight.rawValue)
                .background(Color.red)
        }
    }
}

struct ContentView: View {

var body: some View {

VStack {

Text("Hello, world!")

.foregroundColor(Color.black)

.padding(.leading, Spacing.tight.rawValue)

.background(Color.red)

}

A worst variation of this will be a color initialised with hex values.
Using hard coded values for colours will not get us far. And the day we will be requested to change all the buttons background colour is not far.
Let’s see how we can improve this. As we did with the Spacing, we need a central place for these values.

public class ColorTheme {
    enum Palette {
        static var text = Color.black
        static var background = Color.red
    }
}

public class ColorTheme {

enum Palette {

static var text = Color.black

static var background = Color.red

}

So we can update our view code:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .foregroundColor(ColorTheme.Palette.text)
                .padding(.leading, Spacing.tight.rawValue)
                .background(ColorTheme.Palette.background)
        }
    }
}