Skip to Content

What is the main color in SwiftUI?

SwiftUI is Apple’s new user interface framework that was introduced in iOS 13. It provides a declarative way to build user interfaces for Apple platforms using simple, readable code. One of the key features of SwiftUI is its emphasis on color and styling.

The default color

The main default color used in SwiftUI is called “Default.” This refers to the system default tint color that automatically adapts based on the user’s selected appearance (light or dark mode). Here is an overview of the default SwiftUI color:

  • It is a dynamic color that automatically adapts to light or dark mode.
  • The light mode version is blue.
  • The dark mode version is green.
  • It is used for tinting interactive elements like links, highlights, selected rows, etc.
  • Apple refers to it as “accentColor” in their API documentation.

So in summary, the main default color in SwiftUI is simply called “Default” and it dynamically changes to match the system appearance. This allows SwiftUI interfaces to automatically adapt their look and feel based on the user’s theme preferences.

Customizing the default color

While the default SwiftUI color is useful for adaptability, you may want to customize it to match your app’s branding. SwiftUI makes it easy to set a custom default tint color.

There are a couple ways to customize the default tint color in SwiftUI:

  1. Set the accentColor on individual views or containers.
  2. Set the global accentColor on the SwiftUI environment.

For example, to set a custom default red color on just a single view, you would use:


Text("Hello")
  .accentColor(.red) 

And to set the global app-wide default accent color to green you would use:

    
@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
    .accentColor(.green) // global accent color
  }
}

This makes it very flexible to either change the color sitewide or just for individual views. Customizing the default SwiftUI color helps make sure your app has its own consistent, branded look.

Using semantic colors

Beyond just the default accent color, SwiftUI also defines a set of semantic color names that have specific meanings:

Semantic Color Description
.primary The primary branding color for your app. By default this is blue in light mode.
.secondary A secondary color for your branding. The default is gray.
.accentColor The color for interactive elements. This dynamically adapts to light/dark mode.
.red A standard red color.
.green A standard green color.
.blue A standard blue color.

These semantic color names let you quickly use common colors that adapt to light and dark modes. And you can override any of the defaults simply by assigning that semantic color name to a different color.

For example, to use a custom primary color instead of the default blue:


Text("Hello")
  .foregroundColor(.primary)

@main 
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
    .primaryColor(.purple)
  }
}  

The semantic colors provide an easy way to tap into common meanings like “brand color” or “accent color” without needing to hardcode specific colors each time.

Dynamic colors

One of the most powerful features of SwiftUI’s coloring system is that the colors automatically adapt based on external factors like light/dark mode, accessibility settings, etc. This is done through the use of dynamic colors.

For example, here is how to define a custom color that dynamically changes based on the current appearance:


let myColor = Color {
  switch UITraitCollection.current.userInterfaceStyle {
    case .dark: 
      return .blue
    default:
      return .red 
  }
}

Now any view that uses this myColor will automatically change between red and blue based on dark mode. This makes it easy to have different versions of colors without having to manually check the theme everywhere.

Some other ways to leverage dynamic colors in SwiftUI include:

  • Using the default .accentColor which adapts to light/dark mode.
  • Using the boolean environment values like .colorScheme to conditionally choose colors.
  • Adapting foreground/background colors based on accessibility settings like increased contrast.

Overall, dynamic colors help make sure your SwiftUI app looks great in all settings while minimizing repetitive code for handling different contexts. The system automatically does the heavy lifting.

Conclusion

SwiftUI provides a robust, flexible system for working with color in your app’s interface. Some key highlights include:

  • The default accent color that dynamically adapts to light or dark mode.
  • Semantic colors like .primary and .accentColor that have specific meanings.
  • Setting custom global or view-specific default colors.
  • Dynamic colors that automatically change based on external factors.

By combining these capabilities, you can build a consistently branded, adaptive interface that looks great in any context. And SwiftUI handles much of the complexity behind the scenes to make working with color simple and declarative.