Idea/Request: Make header background color match exact value from config

pReya

Hey there,

I want to integrate Flarum into my existing visual identity/other services, so I'm trying to make it match the rest of my designs color-wise. However the header background color does never match the configured value from the Admin panel. There's some LESS mix() magic going on in the stylesheets, which I assume modifies the given color.

I think it would be a desired feature to have the color match the value from the admin panel exactly (because it is one of the largest, colored areas), and then maybe modify all the other occurences of the same color.

Yes, I am aware that I can use custom CSS to change this behavior, however I'd still argue to make this the default behavior.

davwheat

pReya

This change has now been merged into Flarum Core! 🎉

SychO

Hello! Welcome to Flarum,

I'm not sure that I fully understand what you mean, but the header background is set to the exact primary color value (if colored header is turned in the admin panel of course), the line you are referring to defines the background color of elements such as buttons located in the header when the header is colored.

.define-header(true) {
  @header-bg:                      @primary-color;
  @header-color:                   @body-bg;
  @header-control-bg:              mix(#000, @header-bg, 10%);
  @header-control-color:           mix(@body-bg, @header-bg, 60%);
}

Could you explain a bit more perhaps ? I am most likely missing what you mean.

pReya

Sorry, if my description was unclear. Also, it seems my diagnosis about the root of this problem is not correct. However, the problem still persists:

To recreate:

Go to Admin -> Appearance and set the first color value to black (#000000) and check the "colored header" toggle
Go to the frontend and inspect the CSS of the <header> element. You will find that the background property is set to background: rgba(0,0,0,0.98); (within the class .App-header), which is not the same as #000000.

askvortsov

pReya To clarify, you're proposing that this transformation should not be applied, right?

pReya

askvortsov I am suggesting that the background-color of the header should match the given value from the Admin area exactly, without any modification (apart from maybe converting from hex to rgba).

askvortsov

Looks like this bit is actually coming from https://github.com/flarum/core/blob/db0d8e89c75394c40661df2b4b07e8ede7c9cf13/less/common/mixins/header-background.less#L2-L2. It was introduced in flarum/corea9ded36, but that's a massive commit and there's no explanation of that piece in particular.

As a temporary workaround, you can override the mixin responsible with the following custom less:

.header-background() {
  background: @header-bg;
}

EDIT: Opened a PR to fix in core: flarum/core2685

pReya

askvortsov Thanks for the quick resolution! Looking forward to the next release. And thanks for the workaround!