Interface controls
Configure search, keyboard shortcuts and color mode behavior.
DevLab keeps the interface small, but a few controls are worth knowing before you publish: search shortcuts, keyboard navigation, search messages and color mode behavior.
Search shortcuts
When search is enabled, the header search field supports a keyboard shortcut:
| Platform | Shortcut |
|---|---|
| Windows/Linux | Ctrl+K |
| macOS | Cmd+K |
The static HTML fallback shows Ctrl+K. When JavaScript loads, the shortcut hint is updated on Apple platforms by checking navigator.userAgentData.platform first and falling back to navigator.platform.
The shortcut hint is rendered next to the search input and hidden on small screens so the mobile header layout stays compact.
Search states
Search shows two non-result states:
| State | Fallback text |
|---|---|
| Empty input | Start typing to search. |
| No results | No results found. |
The messages are prepared for localization through extra.labels:
[extra.labels]
search_start = "Start typing to search."
search_no_results = "No results found."The empty-input message appears when the field receives focus with no query. The no-results message appears only after a search query returns no matches.
Search keyboard navigation
When the search input is focused and result links are visible, the keyboard can move through results without changing the search algorithm or index format:
| Key | Behavior |
|---|---|
ArrowDown | Select the next result. |
ArrowUp | Select the previous result. |
Enter | Open the selected result. |
Escape | Clear the field, hide results and blur input. |
Mouse clicks still use normal anchor behavior.
Color modes
The color mode model has three modes:
| Mode | Icon | Behavior |
|---|---|---|
system | Desktop | Follows prefers-color-scheme. |
light | Sun | Forces the light palette. |
dark | Moon | Forces the dark palette. |
The selected mode is stored as data-theme-mode. The resolved palette is stored as data-theme, so existing light and dark CSS variables continue to work.
The toggle cycles in this order:
system -> light -> dark -> systemThe button label and title describe the current mode:
System themeLight themeDark theme
Theme settings
The default color mode is configured with theme_default:
[extra]
theme_default = "system"Valid values are system, light and dark. If a visitor has already chosen a mode, the saved localStorage value takes priority over theme_default.
The toggle button can be disabled without changing theme resolution:
[extra]
theme_toggle = falseWhen disabled, the theme toggle partial does not render the button, but the configured default mode and saved visitor preference still apply.