Lock.swift: Style Customization Options

There are numerous options to configure Lock's style and appearance listed below. In addition, there are also quite a few options available to alter Lock's behavior and functionality in the Behavior Configuration Options page.

Customizing Lock's appearance

Style customization options can be added to your Lock initialization using withStyle.

Lock
  .classic()
  .withStyle {
	  $0.title = "Company LLC"
	  $0.logo = LazyImage(name: "company_logo")
	  $0.primaryColor = UIColor(red: 0.6784, green: 0.5412, blue: 0.7333, alpha: 1.0)
	}
  .present(from: self)

Was this helpful?

Header Style Options

headerBlur

Blur effect style used. It can be any value defined in UIBlurEffectStyle.

.withStyle {
  $0.headerBlur = .extraLight
}

Was this helpful?

headerColor

Color used as the header background color. By default it has no color, just a blur.

.withStyle {
  $0.headerColor = UIColor? = nil
}

Was this helpful?

logo

Header logo image. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height).

.withStyle {
  $0.logo = LazyImage(name: "company_logo")
}

Was this helpful?

headerCloseIcon

The "close" icon in the header can be altered.

.withStyle {
  $0.headerCloseIcon = LazyImage(name: "ic_close")
}

Was this helpful?

headerBackIcon

The "back" icon in the header can be altered.

.withStyle {
  $0.headerBackIcon = LazyImage(name: "ic_close")
}

Was this helpful?

Title Style Options

hideTitle

Hide header title and show only the logo. By default this option is false.

.withStyle {
  $0.hideTitle = false
}

Was this helpful?

title

Title text used in the header

.withStyle {
  $0.title = "Company LLC"
}

Was this helpful?

titleColor

Color used as the header title color.

.withStyle {
  $0.titleColor = UIColor.black
}

Was this helpful?

Button and Component Style Options

buttonTintColor

Color used as the primary button tint color.

.withStyle {
  $0.buttonTintColor = UIColor.white
}

Was this helpful?

disabledColor

Color used as the Lock disabled component color.

.withStyle {
  $0.disabledColor = UIColor(red: 0.8902, green: 0.898, blue: 0.9059, alpha: 1.0)
}

Was this helpful?

disabledTextColor

Color used as the Lock disabled component text color.

.withStyle {
  $0.disabledTextColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}

Was this helpful?

hideButtonTitle

Hide primary button title and show only the icon. By default this option is false.

.withStyle {
  $0.hideButtonTitle = false
}

Was this helpful?

primaryColor

Color used as the Lock primary color.

.withStyle {
  $0.primaryColor = UIColor.orange
}

Was this helpful?

Input Field Styles

inputTextColor

The color of input field text.

.withStyle {
  $0.inputTextColor = UIColor.black
}

Was this helpful?

inputPlaceholderTextColor

The color of the placeholder text in input fields.

.withStyle {
  $0.inputPlaceholderTextColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}

Was this helpful?

inputBorderColor

The color of the border of input fields.

.withStyle {
  $0.inputBorderColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}

Was this helpful?

inputBorderColorError

The color of the border of input fields which have invalid values.

.withStyle {
  $0.inputBorderColorError = UIColor.red
}

Was this helpful?

inputBackgroundColor

The color of the background of input fields.

.withStyle {
  $0.inputBackgroundColor = UIColor.white
}

Was this helpful?

inputIconBackgroundColor

The color of the background of input field icons.

.withStyle {
  $0.inputIconBackgroundColor = UIColor(red: 0.9333, green: 0.9333, blue: 0.9333, alpha: 1.0)
}

Was this helpful?

inputIconColor

The color of the input field icons.

.withStyle {
  $0.inputIconColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}

Was this helpful?

Status Bar Styles

UIStatusBarAnimation

The Lock Controller Status Bar update animation.

.withStyle {
  $0.UIStatusBarAnimation = .none
}

Was this helpful?

statusBarHidden

The Lock Controller Status Bar's visibility.

.withStyle {
  $0.statusBarHidden = false
}

Was this helpful?

UIStatusBarStyle

The Lock Controller Status Bar style.

.withStyle {
  $0.UIStatusBarStyle = .default
}

Was this helpful?

UISearchBarStyle

The Lock Passwordless Search Bar style.

.withStyle {
  $0.UISearchBarStyle = .default
}

Was this helpful?

Other Style Options

textColor

The color for the text in the body.

.withStyle {
  $0.textColor = UIColor.black
}

Was this helpful?

backgroundColor

Color used as the Lock background color.

.withStyle {
  $0.backgroundColor = UIColor.white
}

Was this helpful?

backgroundImage

Image used as the Lock background

.withStyle {
  $0.backgroundImage = LazyImage(name: "company_logo")
}

Was this helpful?

oauth2

Any non-db OAuth2 connection can have styles customized by mapping a connection name with an AuthStyle

.withStyle {
  $0.oauth2["slack"] = AuthStyle(
    name: "Slack",
    color: UIColor(red: 0.4118, green: 0.8078, blue: 0.6588, alpha: 1.0),
    withImage: LazyImage(name: "ic_slack")
  )
}

Was this helpful?

seperatorTextColor

Social separator label color.

.withStyle {
  $0.seperatorTextColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.54)
}

Was this helpful?

secondaryButtonColor

The color of secondary buttons.

.withStyle {
  $0.secondaryButtonColor = UIColor.black
}

Was this helpful?

tabTextColor

The color of the text on the database login tab.

.withStyle {
  $0.tabTextColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}

Was this helpful?

tabTintColor

The color of the tinting on the database login tab.

.withStyle {
  $0.tabTintColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}

Was this helpful?