Rainbow Header Gradient for Discourse

Install this theme component

Simple rainbow gradient in the header and composer, as a theme component — so you can add it to other themes.


Settings and info

Header icon colors

In your color palette, you can control the color of the icons in the header with header primary & header background colors. (I would like to look into tweaking it so you just have to set the one variable instead of two)

I didn’t want to hard-code this color in case people want to install this component on multiple themes (e.g. with dark and light color palettes)

Here’s how to change the color of the icons:

FYI: The reason for having to set both is because the actual header icon color is dependent on mixing header primary with the header background color.


Thanks to the Ghost cyberpunk theme, Peacock Gradient theme and Discourse Rainbow theme which I variously took inspiration or used code from over the years (I added credits for each part in comments in theme code)


  • I’m hoping to figure out how to make the gradient colors customisable as theme settings - just never had the chance to really look into it.

  • make it so that you can customise the color of the header icons by just setting the header primary color (the header background color is not relevant to the user because the whole header background is rainbow gradient)