# Rainbow Header Gradient for Discourse

**URL:** https://meta.discourse.org/t/rainbow-header-gradient-for-discourse/301625
**Category:** Theme component
**Created:** [March 30, 2024, 6:55am UTC](https://meta.discourse.org/t/rainbow-header-gradient-for-discourse/301625 "2024-03-30T06:55:12Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![traceymoko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/traceymoko/32/483235_2.png) [@traceymoko](https://meta.discourse.org/u/traceymoko)
#### Post date: [March 30, 2024, 6:55am UTC](https://meta.discourse.org/t/rainbow-header-gradient-for-discourse/301625/1 "2024-03-30T06:55:12Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Header Gradient and Composer Gradient |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/bloomexperiment/header-gradient) |
| 🛠 | **Repository** | [GitHub - tracey-le/discourse-header-gradient: Gradient header - Discourse theme component · GitHub](https://github.com/t1-tracey/discourse-header-gradient/) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

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

## Screenshots

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/d/6/3d6adf2b003e466cc2aba9f9f8f5449037869d73.jpeg)

## 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:

- **white:** You can set both of these values to `#ffffff`

- **black:** You can set both of these values to `#000000`

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.

### Credits

Thanks to the [Ghost cyberpunk theme](https://meta.discourse.org/t/ghost-a-cyberpunk-theme-for-discourse/111806), [Peacock Gradient theme](https://meta.discourse.org/t/peacock-a-noble-theme-for-discourse/176653) and [Discourse Rainbow theme](https://meta.discourse.org/t/rainbow-a-colorful-theme-for-discourse/177978/2) which I variously took inspiration or used code from over the years (I added credits for each part in comments in theme code)

### TODO:

- 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)