Colors

How to use colors provided by the library.

Default Colors

ComponentsKit offers a default color palette right out of the box, perfect for when you're still undecided about your specific branding colors.

These colors fall into two categories:

  • UniversalColor: A color representation for dark and light modes.
  • ComponentColor: A color specifically designed for components. It includes three UniversalColor values — main, contrast, and background.

Background

Primary

Secondary

Foreground

Primary

Secondary

Content

Content 1

Content 2

Content 3

Content 4

Divider

Components

Background
Primary
Background
Accent
Background
Success
Background
Warning
Background
Danger

Custom Colors

You can extend both UniversalColor and ComponentColor to create your own colors.

Here’s how to define a custom universal color:

extension UniversalColor {
  static var customPurple: UniversalColor {
    .universal(.hex("#A020F0"))
  }
}

Usage

We recommend using the colors from the library in all your custom views and components, so all parts of your app automatically update when the theme changes.

UIKit

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()  

    view.backgroundColor = UniversalColor.background.uiColor
  }
}

SwiftUI

struct App: View {  
  var body: some View {
    UniversalColor.background.color
  }
}