Change header background color dynamically

Store Design

Topic summary

A user working with the Dawn theme wants the header background color to automatically adjust based on the banner or slideshow image beneath it.

Proposed Solutions:

  • JavaScript color detection: Use a library like Color Thief to identify the dominant color of the image and apply it to the header’s backgroundColor via JavaScript. This approach requires additional Liquid and CSS modifications for smooth transitions.

  • Manual color settings per slide: Add a color picker setting to each slideshow block in the theme editor, output it as a data attribute (e.g., data-header-color), then use JavaScript to update the header background when each slide becomes visible.

Status: Multiple implementation approaches have been suggested, but no final solution has been confirmed. One respondent offered to review the specific website for a tailored recommendation.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I’m using Dawn theme and I need the header color to change dynamically according to the banner/slideshow image color under it. Please help.

2

Hi @rvjattan

In order to have the color of the header change dynamically according the banner or slideshow image simply use JavaScript to detect the dominant color of the image section (e.g. using a library like Color Thief) and set it as a style attribute of the header. backgroundColor. You will also require a few Liquid and CSS modifications to make smooth transitions.

3

Add a color setting to each slideshow block, then output it as output it as a data attribute on the same like

data-header-color="{{ block.settings.header_background }}

Then use javaScript to update the header’s background dynamically when the block is visible.

4

Hi @rvjattan ,

This would be a complex change, involving adding Liquid code, CSS and JS.

Please send the website link, I will check it for you