iOS development
UITableViewCell customization
iOS UI design
Swift programming
Xcode tips

How to change the blue highlight color of a UITableViewCell?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

UITableViewCell uses a system-provided selected appearance unless you replace it. If the default blue highlight clashes with your app's visual design, the supported fix is to provide a custom selected background view instead of trying to tint the built-in highlight directly.

Why the Default Highlight Appears Blue

When a row becomes selected or highlighted, UIKit updates the cell's visual state. The standard cell style uses an internal background treatment that looks blue in many table configurations. That color is not intended to be customized through a single property such as tintColor.

The important point is that selection and highlight are state transitions, not one-off drawing events. If you only set backgroundColor, you usually change the normal state, not the selected one. The correct place to customize the selected appearance is selectedBackgroundView.

Use selectedBackgroundView

Each cell can host a separate background view that appears only while the cell is selected. This is the most direct and stable way to replace the blue highlight.

swift
1import UIKit
2
3final class ColorTableViewController: UITableViewController {
4    private let items = ["Inbox", "Archive", "Sent", "Drafts"]
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
9    }
10
11    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
12        items.count
13    }
14
15    override func tableView(
16        _ tableView: UITableView,
17        cellForRowAt indexPath: IndexPath
18    ) -> UITableViewCell {
19        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
20        cell.textLabel?.text = items[indexPath.row]
21
22        let selectedView = UIView()
23        selectedView.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.25)
24        cell.selectedBackgroundView = selectedView
25
26        return cell
27    }
28}

In this example, the cell keeps its normal background while idle. Once the user taps the row, UIKit swaps in the orange selectedBackgroundView.

Difference Between Highlighted and Selected States

Users often notice two slightly different moments:

  • the finger-down highlight
  • the selected state after the touch completes

If you want both to look consistent, configure the cell so that its selected background still makes sense during reuse and selection updates. For more complex designs, subclass the cell and react to setHighlighted or setSelected.

swift
1import UIKit
2
3final class SettingsCell: UITableViewCell {
4    private let customSelectedView = UIView()
5
6    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
7        super.init(style: style, reuseIdentifier: reuseIdentifier)
8
9        customSelectedView.backgroundColor = UIColor.systemGreen.withAlphaComponent(0.18)
10        selectedBackgroundView = customSelectedView
11
12        contentView.layer.cornerRadius = 10
13        contentView.layer.masksToBounds = true
14    }
15
16    required init?(coder: NSCoder) {
17        fatalError("init(coder:) has not been implemented")
18    }
19
20    override func layoutSubviews() {
21        super.layoutSubviews()
22        selectedBackgroundView?.frame = bounds.insetBy(dx: 8, dy: 4)
23    }
24}

This pattern is useful when you want inset cards or rounded list rows. The selected view is still the mechanism, but you shape and size it yourself.

Storyboard and Modern Configurations

If you are using storyboards, you can still set selectedBackgroundView in tableView(_:cellForRowAt:) after dequeuing the cell. Interface Builder exposes some appearance settings, but programmatic configuration is clearer because reuse behavior is explicit and easy to audit.

On newer iOS versions, cells may also be configured with UIBackgroundConfiguration. That works well for modern list-style UIs, but the same design principle applies: customize the state-specific background rather than expecting the system default selection color to be theme-aware.

swift
1import UIKit
2
3final class ModernCell: UITableViewCell {
4    override func updateConfiguration(using state: UICellConfigurationState) {
5        var background = UIBackgroundConfiguration.listPlainCell()
6        background.backgroundColor = .systemBackground
7
8        if state.isSelected || state.isHighlighted {
9            background.backgroundColor = UIColor.systemPink.withAlphaComponent(0.20)
10        }
11
12        backgroundConfiguration = background
13    }
14}

This approach is cleaner when you already use content and background configurations throughout the table view.

Reuse, Accessibility, and Contrast

Remember that table view cells are reused. If your customization depends on the row or theme, always set it every time the cell is configured. Do not assume a fresh cell instance.

Also check contrast. A very light selection color may become invisible in light mode, while an opaque color can hide labels and icons. In many cases, a partially transparent color works best because it preserves text readability and still signals state change.

Common Pitfalls

  • Setting backgroundColor and expecting the selected state to change. Use selectedBackgroundView or backgroundConfiguration for state-specific styling.
  • Configuring the selected view only once in Interface Builder and forgetting reuse logic. Reapply the intended appearance during cell configuration.
  • Using a fully opaque color that makes labels unreadable. Prefer a color with alpha so content remains visible.
  • Styling only the selected state and ignoring the highlighted touch-down state. Test both interactions to avoid a jarring visual jump.
  • Trying to change the system blue with unrelated properties such as tintColor. Those properties affect other UI elements and will not reliably replace the selection background.

Summary

  • The default blue row highlight is a UIKit selection style, not a simple color property.
  • 'selectedBackgroundView is the standard solution for custom table cell highlight colors.'
  • Subclassing helps when you need rounded, inset, or highly customized selection visuals.
  • 'UIBackgroundConfiguration is a good modern option for newer list-based interfaces.'
  • Always test reuse, contrast, highlighted state, and selected state together.

Course illustration
Course illustration

All Rights Reserved.