Styling the Widgets

Search Expander's widget HTML is rendered directly on your page, so you can modify its appearance with CSS like any other page element. However, it will often be easier to specify style properties via the colors property of the sxpr() settings object.

Here's a simple example:

    se: 'your-id',
    colors: {
        foreground: '#EAEAEA',
        background: '#333',
        foregroundEmphasis: 'blue',
        border: '#FAFAFA',
    // ... other settings

(Note that due to some widget behaviour, it is best to avoid using transparent and inherit for background colors.)

A darkPlaceholderImages boolean setting is available for the case where you want thumbnail placeholder images to follow a dark color scheme. Placeholder images are visible when a thumbnail image has not yet loaded, or where a thumbnail image is missing for any reason.

    se: 'your-id',
    darkPlaceholderImages: true,
    // ... other settings

You can try out these properties via your search engine's preview page.

If you want to update the colors of widgets that have already rendered, but do not want to make an additional API request, you can use the sxpr.updateColors() function. This can be useful if you have a dark mode switch which updates your page's theme dynamically. This function accepts a colors argument and a darkPlaceholderImages argument.

The colors argument is the same object as the colors argument described above, and the darkPlaceholderImages is a boolean which has the same effect as the darkPlaceholderImages setting described above.

For example:

// Apply a dark color scheme
    foreground: '#FFF',
    background: '#313',
    foregroundEmphasis: '#DCDADA',
    border: '#EEE',
}, true);

Color properties

Property values in the colors object can be any valid CSS color value.

Property Description
background Main widget background color
foreground Main text color
foregroundEmphasis Text color for some important contexts, including the knowledge panel title
foregroundAlt Color of some special text and symbols
accent Used in various contexts for highlighting/aesthetics
border Widget border color
tabLinkHover Mouse hover foreground color for knowledge panel tabs
popupBackground Background color of knowledge panel image popups
popupForeground Main text color of knowledge panel image popups
popupForegroundEm Color of some important text in knowledge panel image popups
popupUrl Color of URLs in knowledge panel image popups
thumbAlt Color of some special text inside thumbnails
buttonHighlight Background color of highlighted button
weatherBackground Background color of weather widget
weatherForeground Text color of weather widget
loadingBars Color of the widget placeholder loading bars
darkIcons Color of various dark-colored icons, including Spotify play buttons and some social icons
arrowButtonBackground Arrow button background color
arrowButtonForeground Arrow button foreground color

» Search Links