Theming Feedback

Hi @dan,

based on this post I would like to make some suggestions for basic theme styles.

In general I realized the following. The themes that you provided have some colors that are not part of tailwind (brand, secondary, text, …).

What I like about that approach better is that its easier to change color since they are not tied to a color name. Same approach in like google material ui design.

What I was thinking at first was that it might be good to have a specific contrast color for each color type. Those could be calculated. They are either black or white depending on the background color. This would lead in total to an overbloaded palette.

Below I pasted a palette that I am currently using for my private themes. Instead of black / white I would prefer dark / light but used those to be compatible with what you guys have.

The reason why I am having a primary + brand is that brand is something that might be used for logos. That does not mean that my primary color might be the same. Seen that a lot with customers before.

The color variables names I used mainly from material ui. Some design guidelines are using an accent color which would be a tertiary one. But yeah I guess that up to the users.

Just working out the required defaults for the themes… and tentatively suggesting this:

Tailwind Base Colours + The following Theme Colours:

  • Brand – The primary brand color, commonly used for logos and brand assets.
  • Primary – The dominant colour used for interface elements, such as buttons and key actions.
  • Secondary – A complementary color used for additional UI elements, accents, and supporting details.
  • Surface – The background color that provides contrast behind text and UI elements.
  • Text – The primary color for headings and body text, ensuring readability and visual clarity.
  • Black – Usually just shades of black, but can be a deep, rich color palette.
  • White – Usually just shades of white, but can be a soft, neutral color palette.

We don’t want to overdo it for the required extra colours. I don’t think the warning, success, etc. colours are required as we have all the standard Tailwind colours (and the theme developer can change the shade of those if they choose to).

As mentioned the only thing that I do not like about the tailwind colors that they are colors and if someone is using color A in a theme and you switch the theme it would then change the intended layout.

As I mentioned I did follow the mui guidelines for years and I found their concept a lot more sustainable comparing to what I saw at taildwind right now.

Specially when you start to use component from different devpacks.

But oh well .. I assume for what I am doing for my own stuff its up to me .. but when providing themes for others I would prefer a high compatability when switching a theme.

Tailwind does not have black and white in their palette.

Have added Black and White to the list as we already have those.

And, yes I get what you’re saying :+1: I Wwill continue to refine the exact spec, and update the theme colours section in the manual.

How about Dark / Light instead of Black / White. Then it would not be color bound for all theme colors besides the tailwind once.

Also realized you are mostly refering to the 500 patch when using colors. On the Black / White might not make sense and use the 900 / 50 .. since 950 is not there.

At least when assigning defaults. Text Patches are references to the 50 by default in the properties. Would be good to have a specific rulebook for that. But yeah not anything for now.

@Beblebroks Okay, how about something like this…

3 Likes

:heart_eyes: … Perfect

1 Like

Still plans to get the 950 back in? Or is that there just not showing in the theme editor?

Yes, we have an open ticket for 950, not sure why we’re missing it…

We were just talking about this internally, and are thinking it might be best to scale the extras back a little bit… still working it out. Keep an eye on the theme docs.

We’ve added support for the 950 colour to the next release (due later this week) :tada:

1 Like