CSS Variables

List of CSS variables of Hugo search module.

Donate

Become a backer or sponsor to support our work.

Sponsors

You can easily to adjust the search UI to fit your theme and dark mode via the following CSS variables.

1:root {
2  --search-primary: skyblue;
3}
NameDescription
--search-primaryPrimary color.
--search-container-bgContainer background color.
--search-bgBackground color.
--search-colorPrimary text color.
--search-color-secondarySecondary text color.
--search-result-bgResult background color.
--search-result-bg-activeResult background color on active.
--search-result-colorPrimary result text color.
--search-result-color-activePrimary result text color on active.
--search-result-color-secondarySecondary result text color.
--search-result-color-secondary-activeSecondary result text color on active.
--search-result-highlight-bgThe highlight result background color, default to inherit.
--search-result-highlight-colorThe highlight result color, default to inherit.
--search-border-colorBorder color.