# Feature highlight
[](https://github.com/material-components/material-components-ios/issues?q=is%3Aopen+is%3Aissue+label%3Atype%3ABug+label%3A%5BFeatureHighlight%5D)
The Feature Highlight component is a way to visually highlight a part of the screen in order to introduce users to new features and functionality.
## Design & API documentation
## Table of contents
- [Installation](#installation)
- [Installation with CocoaPods](#installation-with-cocoapods)
- [Importing](#importing)
- [Usage](#usage)
- [Typical use: highlight a view](#typical-use-highlight-a-view)
- [Extensions](#extensions)
- [Color Theming](#color-theming)
- [Typography Theming](#typography-theming)
- - -
## Installation
### Installation with CocoaPods
Add the following to your `Podfile`:
```bash
pod 'MaterialComponents/FeatureHighlight'
```
Then, run the following command:
```bash
pod install
```
### Importing
To import the component:
#### Swift
```swift
import MaterialComponents.MaterialFeatureHighlight
```
#### Objective-C
```objc
#import "MaterialFeatureHighlight.h"
```
## Usage
### Typical use: highlight a view
#### Swift
```swift
let completion = {(accepted: Bool) in
// perform analytics here
// and record whether the highlight was accepted
}
let highlightController = MDCFeatureHighlightViewController(highlightedView: viewToHighlight,
completion: completion)
highlightController.titleText = "Just how you want it"
highlightController.bodyText = "Tap the menu button to switch accounts, change settings & more."
highlightController.outerHighlightColor =
UIColor.blue.withAlphaComponent(kMDCFeatureHighlightOuterHighlightAlpha)
present(highlightController, animated: true, completion:nil)
```
#### Objective-C
```objc
MDCFeatureHighlightCompletion completion = ^(BOOL accepted) {
// perform analytics here
// and record whether the highlight was accepted
};
MDCFeatureHighlightViewController *highlightController =
[[MDCFeatureHighlightViewController alloc] initWithHighlightedView:viewToHighlight
completion:completion];
highlightController.titleText = @"Just how you want it";
highlightController.bodyText = @"Tap the menu button to switch accounts, change settings & more.";
highlightController.outerHighlightColor =
[[UIColor blueColor] colorWithAlphaComponent:kMDCFeatureHighlightOuterHighlightAlpha];
[self presentViewController:highlightController animated:YES completion:nil];
```
Often when highlighting a view you will want to display a different view to the one you are highlighting. For example, flipping the primary and secondary colors in the presented version.
#### Swift
```swift
let displayedButton = UIButton(type: .system)
displayedButton.setTitle(highlightedButton.title(for: .normal), for: .normal)
displayedButton.setTitleColor(highlightedButton.backgroundColor, for: .normal)
displayedButton.backgroundColor = highlightedButton.titleColor(for: .normal)
let highlightController = MDCFeatureHighlightViewController(highlightedView: highlightedButton, andShow: displayedButton, completion: completion)
```
#### Objective-C
```objc
UIButton *displayedButton = [UIButton buttonWithType:UIButtonTypeSystem];
[displayedButton setTitle:[highlightedButton titleForState:UIControlStateNormal]
forState:UIControlStateNormal];
[displayedButton setTitleColor:highlightedButton.backgroundColor forState:UIControlStateNormal];
displayedButton.backgroundColor = [highlightedButton titleColorForState:UIControlStateNormal];
MDCFeatureHighlightViewController *highlightController =
[[MDCFeatureHighlightViewController alloc] initWithHighlightedView:highlightedButton
andShowView:displayedButton
completion:completion];
```
## Extensions
### Color Theming
You can theme feature highlight with your app's color scheme using the ColorThemer extension.
You must first add the Color Themer extension to your project:
```bash
pod 'MaterialComponents/FeatureHighlight+ColorThemer'
```
#### Swift
```swift
// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialFeatureHighlight_ColorThemer
// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()
// Step 3: Apply the color scheme to your component
MDCFeatureHighlightColorThemer.applySemanticColorScheme(colorScheme, to: component)
```
#### Objective-C
```objc
// Step 1: Import the ColorThemer extension
#import "MaterialFeatureHighlight+ColorThemer.h"
// Step 2: Create or get a color scheme
id colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];
// Step 3: Apply the color scheme to your component
[MDCFeatureHighlightColorThemer applySemanticColorScheme:colorScheme
toFeatureHighlightViewController:component];
```
### Typography Theming
You can theme feature highlight with your app's typography scheme using the TypographyThemer extension.
You must first add the Typography Themer extension to your project:
```bash
pod 'MaterialComponents/FeatureHighlight+TypographyThemer'
```
#### Swift
```swift
// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialFeatureHighlight_TypographyThemer
// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()
// Step 3: Apply the typography scheme to your component
MDCFeatureHighlightTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
```
#### Objective-C
```objc
// Step 1: Import the TypographyThemer extension
#import "MaterialFeatureHighlight+TypographyThemer.h"
// Step 2: Create or get a typography scheme
id typographyScheme = [[MDCTypographyScheme alloc] init];
// Step 3: Apply the typography scheme to your component
[MDCFeatureHighlightTypographyThemer applyTypographyScheme:colorScheme
toFeatureHighlightViewController:component];
```