Colors
Customize the color scheme of your search bar for light and dark modes.
Vellumine lets you fully customize the colors of your search bar to match your blog's branding. Colors are configured separately for light mode and dark mode, so your search bar looks great in both.
Color customization is available on the Pro and Growth plans.
Color Properties
Each mode (light and dark) has the following customizable color properties:
| Property | What it controls |
|---|---|
| Primary background | The main background of the search modal. |
| Secondary background | Background for result items, cards, and secondary areas. |
| Primary text | The main text color (search input, result titles). |
| Secondary text | Supporting text (descriptions, meta information). |
| Border | Border color for the modal, input field, and dividers. |
| Accent | Accent color for interactive elements like buttons and links. |
| Overlay background | The dimmed backdrop behind the search modal. Supports opacity. |
| Highlight | The color used to highlight matching text in search results. |
Customizing Colors
- Open your collection in the Vellumine dashboard.
- Navigate to the UI Customization page.
- Scroll to the color section. Use the tabs to switch between Light and Dark mode settings.
- Click on any color swatch to open the color picker, or enter a hex value directly.
- Changes are saved automatically and take effect immediately on your blog.
Tips
- Start with your blog's primary brand color as the accent, then adjust backgrounds and text for contrast.
- Test in both modes -- Even if your blog doesn't have a dark mode toggle, some readers may have a system-level dark mode preference. If you've set the theme to "System", both color schemes will be used.
- Overlay opacity -- A semi-transparent overlay helps focus attention on the search modal. Adjust the opacity to your taste.