Rainbow Header Gradient for Discourse

Customization Theme component

AI-generated summary

The Rainbow Header Gradient for Discourse theme component adds a simple rainbow gradient to the header and composer. It can be installed on top of other themes and is customizable through the color palette, allowing users to control the color of header icons using header primary and header background colors.

This theme component was inspired by the Ghost cyberpunk theme, Peacock Gradient theme, and Discourse Rainbow theme, with credits given for used code.

Future development plans include making the gradient colors customizable as theme settings and simplifying the process of customizing header icon colors.

A preview of the theme is available at https://discourse.theme-creator.io/theme/bloomexperiment/header-gradient, and the repository is located at https://github.com/t1-tracey/discourse-header-gradient/.

1
:information_source: Summary Header Gradient and Composer Gradient
:eyeglasses: Preview Theme Creator
:hammer_and_wrench: Repository GitHub - tracey-le/discourse-header-gradient: Gradient header - Discourse theme component · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

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
image3968×2240 442 KB

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.

Credits

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)

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)

15 Likes