Skip to content Nav/Search Keys For Color Background Pages (
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Support
Linear/radial/conic gradients with themed stops.
Direction Control
Set gradient angle or center/shape depending on gradient type.
Search Box Styling
Configure search colors under hero.colors.search*.
Gradient Colors
Primary focus: hero.background.type=color with the modern gradient contract.
Modern Contract (Recommended)
yaml
hero:
background:
type: color
color:
gradient:
enabled: true
type: linear # linear | radial | conic
direction: 135deg
stops:
- color: "rgba(99, 102, 241, 1)"
position: 0%
- color: "rgba(168, 85, 247, 1)"
position: 52%
- color: "rgba(236, 72, 153, 1)"
position: 100%Legacy Contract (Still Supported)
yaml
hero:
background:
type: color
color:
gradient: ["rgba(99, 102, 241, 1)", "rgba(168, 85, 247, 1)", "rgba(236, 72, 153, 1)"]
direction: 135Nav/Search Keys For Color Background Pages (hero.colors.*)
| Group | Key | Description |
|---|---|---|
| Nav | hero.colors.navText | Nav text color |
| Nav | hero.colors.navTextScrolled | Nav text color after scroll |
| Nav | hero.colors.navTextHover | Nav hover/active text color |
| Nav | hero.colors.navTextHoverScrolled | Nav hover/active color after scroll |
| Nav | hero.colors.navBackground | Nav background color |
| Nav | hero.colors.navBackgroundScrolled | Nav background color after scroll |
| Search | hero.colors.searchBackground | Search button background |
| Search | hero.colors.searchBackgroundScrolled | Search background after scroll |
| Search | hero.colors.searchHoverBackground | Search hover background |
| Search | hero.colors.searchHoverBackgroundScrolled | Search hover background after scroll |
| Search | hero.colors.searchText | Search text/icon color |
| Search | hero.colors.searchTextScrolled | Search text/icon color after scroll |
| Search | hero.colors.searchTextMuted | Search placeholder/muted color |
| Search | hero.colors.searchTextMutedScrolled | Search placeholder/muted after scroll |
| Search | hero.colors.searchBorder | Search border color |
| Search | hero.colors.searchBorderScrolled | Search border color after scroll |
| Search | hero.colors.searchKeyBackground | Keyboard key-chip background |
| Search | hero.colors.searchKeyBackgroundScrolled | Keyboard key-chip background after scroll |
| Search | hero.colors.searchKeyText | Keyboard key-chip text |
| Search | hero.colors.searchKeyTextScrolled | Keyboard key-chip text after scroll |