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 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.
- Use the live preview to check how your search bar looks in Light and Dark mode.
- Click Detect from blog to let Vellumine read colors from your Ghost theme and apply a suggested light and dark palette.
- Click any color swatch to fine-tune the result, or enter a hex value directly.
- Click Save Changes to publish the updated colors to your blog.
Auto-detection reads your public Ghost theme HTML and stylesheets. It works best when your theme defines clear brand, accent, background, and text colors.
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.