Use color theme variables for the gallery element

Hello!

Context

Recently we received a report that the gallery macro looks out of place in white background color themes (this includes our standard, Iceberg). From what I can see, this macro’s current design was implemented around 2011 by @mflorea . Do you know if this design was voted or if there were specific reasons behind this choice of colors?

The colors in this macro seem to be hard-coded. No matter what choice we make, it’d be good to update the CSS to use colorTheme values.

Do you agree with the idea of swapping out the palette of the gallery macro?

For reference, here is a gallery macro as it stands now:


Here is a quick PoC for a gallery macro with swapped out colors:

On a dark theme, if we don’t swap colors (but still use colorTheme values)


swapped out colors:


Note that in any case, when expanding the picture, I think we should keep a black dropdown with white buttons, to be in line with what we do in the lightbox :slight_smile: .

Thank you for your help on this subject!
Lucas C.

I think we need a border, right now the expand button looks weird (it’s floating…).

+1 on the general idea of adjusting the colors based on the color theme, if we can.

What colortheme variable are you using in your screenshots? How would it look with other color themes?

Thx!

There was no vote on the design. I implemented the gallery macro over the winter holidays, taking inspiration for the UI of other libraries, so there wasn’t much thought put into it :slight_smile:

Definitely. A border or a background, something to clearly indicate that those controls are part of the same widget.

Thanks,
Marius

1 Like

I just hardcoded variables to get something close to the final result quickly :slight_smile:
I was thinking of using the main background color as a background for the gallery. For the buttons, text and border, I think we should just use the regular text color.

The complain in the ticket was that the distinct background looked too heavy on most pages using the gallery. I agree that the best solution then would be to use a border :+1:


Thank you both for your feedback!
Lucas C.

1 Like

Closing this brainstorming, I’ll start the implementation soon since noone was against the idea :slight_smile:
Feel free to still share your opinion on the question!

Lucas C.