Change font color of a TextField in SwiftUI

In this tutorial, we will see how to change the font color of a TextField in SwiftUI.

This article will cover the topics mentioned below.

• Changing Font Color in TextField
• Change Cursor Color in TextField
• Custom RGB Color for Font

Now, we will explore the above-mentioned topics one by one and see how they work.

Changing Font Color in TextField

We can change the font color by applying the .foregroundColor() modifier to the TextField . This modifier takes color as an argument, we can specify the color we want for the font of the TextField.

Syntex

.foregroundColor(.mint)

In the above code, I have specified .mint as an argument in the .foregroundColor() modifier. So, it will change the font color of the TextField to mint.

Now, have a look at the complete code below to achieve this task.

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .font(.title)
            .padding()
            // To change the font color 
            .foregroundColor(.mint)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

The code above will display a TextField with a rounded border. When we enter text into the TextField, it will show in mint color.

Output:

Change Cursor Color in TextField

We can also change the color of the vertical line inside the TextField that indicates the current text insertion point or cursor position using the .accentColor() modifier.

This modifier allows us to specify a color that SwiftUI uses for elements such as buttons, switches, progress indicators, and other controls.

Example

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .font(.title)
            .padding()
            // To change the font color
            .foregroundColor(.red)
            // To change the accent color
            .accentColor(.red)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

The above code will create a TextField with the placeholder text “Enter text“.

The cursor color that indicates the current text insertion point or cursor position inside the TextField will be red due to the .accentColor(.red) modifier.

Output:

Custom RGB Color for Font

Now, If we want to specify a color using RGB values in SwiftUI, we can use the Color(red: green: blue:) initializer. The values for red, green, and blue should be in the range of 0.0 to 1.0.

Syntex

.foregroundColor(Color(red: , green: , blue: ))

We can specify the values we want between 0.0 to 1.0 to create a custom RGB color for the font of the TextField.

Here is the example below to achieve this task

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .font(.title)
            .padding()
            .foregroundColor(Color(red: 0.9, green: 0.7, blue: 0.9))
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

In the above program, the .foregroundColor() will set the color of the entered text to a custom color (RGB values: red – 0.9, green – 0.7, blue – 0.9).

Output: