Skip to content Nav/Search Keys (Full,
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Values
Use light/dark objects for theme-aware colors.
Automatic
Colors switch automatically based on theme.
Search Box Sync
Search UI follows light/dark palettes through color.search.*
Theme Sync Colors
Primary focus: Light/dark theme-aware color configuration.
Actual Frontmatter
yaml
hero:
background:
type: color
color:
solid:
light: "rgba(248, 250, 252, 1)"
dark: "rgba(15, 23, 42, 1)"
nav:
colors:
navText:
light: "rgba(15, 23, 42, 1)"
dark: "rgba(248, 250, 252, 1)"
searchText:
light: "rgba(15, 23, 42, 1)"
dark: "rgba(248, 250, 252, 1)"
searchTextMuted:
light: "rgba(71, 85, 105, 1)"
dark: "rgba(148, 163, 184, 1)"Nav/Search Keys (Full, hero.colors.*)
| Key | Description |
|---|---|
hero.colors.navText(.light/.dark) | Nav text color |
hero.colors.navTextScrolled(.light/.dark) | Nav text color after scroll |
hero.colors.navTextHover(.light/.dark) | Nav hover/active text color |
hero.colors.navTextHoverScrolled(.light/.dark) | Nav hover/active color after scroll |
hero.colors.navBackground(.light/.dark) | Nav background color |
hero.colors.navBackgroundScrolled(.light/.dark) | Nav background after scroll |
hero.colors.searchBackground(.light/.dark) | Search button background |
hero.colors.searchBackgroundScrolled(.light/.dark) | Search background after scroll |
hero.colors.searchHoverBackground(.light/.dark) | Search hover background |
hero.colors.searchHoverBackgroundScrolled(.light/.dark) | Search hover background after scroll |
hero.colors.searchText(.light/.dark) | Search text/icon color |
hero.colors.searchTextScrolled(.light/.dark) | Search text/icon after scroll |
hero.colors.searchTextMuted(.light/.dark) | Search placeholder/muted text |
hero.colors.searchTextMutedScrolled(.light/.dark) | Search placeholder after scroll |
hero.colors.searchBorder(.light/.dark) | Search border color |
hero.colors.searchBorderScrolled(.light/.dark) | Search border after scroll |
hero.colors.searchKeyBackground(.light/.dark) | Keyboard chip background |
hero.colors.searchKeyBackgroundScrolled(.light/.dark) | Keyboard chip background after scroll |
hero.colors.searchKeyText(.light/.dark) | Keyboard chip text |
hero.colors.searchKeyTextScrolled(.light/.dark) | Keyboard chip text after scroll |