Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – SwiftUI – difference between accent, foreground and tint color?

Could someone please explain to me the difference between Foreground, Tint and Accent color?

Linguistically:

  • Tint means shade
  • Accent means bright colors
  • Foreground means regular colors

Programmatically:

  • What is Tint?
  • Foreground is that primary color that changes the text/view color
  • Accent color is the secondary color

Also, why does Accent not work in the code below?

Text("Accent Color")
.accentColor(.blue)

Text stays black

Tags:

2

Answers


  1. 0

    In iOS 15 Beta there is a new method to set tint.

    Documentation says:

    Accent Color

    Use accentColor(_:) when you want to apply a broad theme color to your app’s user interface. Some styles of controls use the accent color as a default tint color.

    Tint

    Use this method to override the default accent color for this view. Unlike an app’s accent color, which can be overridden by user preference, the tint color is always respected and should be used as a way to provide additional meaning to the control.

    Foreground Color

    The foreground color to use when displaying this view. Pass nil to remove any custom foreground color and to allow the system or the container to provide its own foreground color. If a container-specific override doesn’t exist, the system uses the primary color.

    Foreground color usually applies to text based views (Text, Labels, etc.) Images (as a template).

    Accent/Tint colors apply to controls (including images in controls, e.g. buttons, pickers etc).

    Accent Color sets the global overall color for the app, tint is for one-off overrides on controls.

    Another way to put it is Foreground Color is for everything non-interactive, Accent/Tint are for interactive items.

    Login or Signup to reply.
  2. 0

    In terms of your code example, the new way to achieve what that was trying to specify is:

    Text("Accent Color")
    .foregroundColor(.blue)

    Or, if you want to apply the current system accent colour, you can use:

    Text("Accent Color")
    .foregroundStyle(Color.accentColor)

    or:

    Text("Accent Color")
    .foregroundColor(.accentColor)

    Accent color is a special color that not only changes based on the system’s current accent color, but also displays as grey when the underlying item is set to .disabled.

    Whether the use of .accentColor will be desirable will of course depend on the context of how you are intending to use it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search