Colors and sizes of the search box are defined as CSS custom properties, with light and dark defaults.

Dark mode

The dark mode follows the system preference, unless the root element has a data-theme attribute, as set by the theme selector of this demo: try it with the button next to the search box.

Custom properties

Override the custom properties in your own stylesheet, for example to use the accent color of your website:

:root {
  --flexsearch-accent: #163c56;
  --flexsearch-selected-bg: #f2d07f;
}

All elements have a flexsearch-* class, so the styles can also be fully replaced.

The search box is translated in English and French, and an index is generated for each language of the website: switch to French with the link in the footer, the search only returns French pages.

Add a language

Extract the strings to translate in another language with the following command, then translate the generated file:

cecil util:translations:extract --locale=<locale> --save --theme=flexsearch