Add a theme (and how to go about it)

[JulianDietzel]

Opening this since I have used standard TailwindCSS colors for the navbar in PR #303, @bastislack defined a custom color scheme in PR #308 and (if I am correct) @Dosbodoke updated the tailwind.css file to play well with shadcn in PR #302. It's all valid independently but a mess in combination.

Defining the approach

What needs to happen first is we need to define how we go about theming on a technical level and what kind of colors we need.

The technical side

In #305 we agreed on using shadcn as a component libary. Shadcn also comes with a theming system that I strongly assume automatically works with the shadcn components. That's really nice and convenient and I think we should therefore consider using it.

Practical changes

An issue I have with the shadcn colors is that they seem quite limited. The primary and accent color come in one version, the color itself. Often, they are needed in darker and lighter versions for different purposes though. Therefore I would suggest that in addition to the following colors themselves we provide each of them in both three lightened and three darkened versions:

• primary
• secondary
• accent
• destructive

To stick close to the TailwindCSS color naming, versions could then have a naming along the lines of

• primary-50
• primary-100
• primary-300
• primary
• primary-700
• primary-900
• primary-950

The name of primary is left as is (instead of the logical primary-500) to maintain interoperability with shadcn and to highlight what the main version of the color is supposed to be.

Adding "skill-level" colors

One of the central elements of the app it to track user progress. This has traditionally been displayed by giving the trick cards different colors depending on how good the user is at that trick. After some consideration I would personally like to stick to that approach. As a result we need either six or seven color for that, depending on whether "Work in progress" should be indicated by one of these colors. Since that is a discussion for a later day (I think) we should design for 7 colors and drop the one if we decide against it.

To dark theme or not to dark theme (Not)

For simplicity reasons I would ditch having a dark theme option. Having the option creates development overhead and I have personally not once used the app and wished for a dark theme. We could keep the logic in, in case we one day want to have a dark version but for now I wouldn't bother with it.

What we would need as a result:

Most of these colors could be taken from one of the provided themes of shadcn.

name	50	100	300	standard	700	900	950
background				:heavy_check_mark:
foreground				:heavy_check_mark:
card				:heavy_check_mark:
card-foreground				:heavy_check_mark:
popover				:heavy_check_mark:
primary	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
primary-foreground				:heavy_check_mark:
secondary	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
secondary-foreground				:heavy_check_mark:
muted				:heavy_check_mark:
muted-foreground				:heavy_check_mark:
accent	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
accent-foreground				:heavy_check_mark:
destructive	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
destructive-foreground				:heavy_check_mark:
border				:heavy_check_mark:
input				:heavy_check_mark:
ring				:heavy_check_mark:
skill-level-1				:heavy_check_mark:
skill-level-2				:heavy_check_mark:
skill-level-3				:heavy_check_mark:
skill-level-4				:heavy_check_mark:
skill-level-5				:heavy_check_mark:
skill-level-6				:heavy_check_mark:
skill-level-7				:heavy_check_mark:

Defining the colors

Now, here comes the fun part, which colors do we want to use. Please only start this discussion once we have agreed on all of the above. Once that is done I'd suggest we start with a theme of shadcn (mainly for the background, card, popover, etc. colors) that is closest to what we want and then adjust the colors as needed. This should be a lot less work than the long list would suggest.

Please let me know what you think of this approach? Am I missing something?

[bastislack]

I agree on everything you said!

I tried different approaches to replace the skill-level colors and nothing really worked well, so let's stick to the previous approach.

For picking the colors I used this article to choose the primary, secondary, and gray tones. So I guess for now it doesn't really matter which colors we choose, as long as we consistently use them throughout the app. Before releasing we can still tune the colorscheme :) For the skill levels I was quite happy with the colors that are used in the current version, but maybe we can replace the blue with a green, such that we only go from red to green (this way we would also be able to use blue as a theme color).

[JulianDietzel]

Nice. Then maybe @Dosbodoke could just simply confirm that this will work with shadcn as intended as he has the most experience with shadcn and initially recommended it for both the component libary and theming.

I am personally not super happy with how the skill level colors look and would try to look for a replacement of them in the future. For now though, they work really well functionally and I'd be good with using them for as long as we haven't found more visually pleasing colors.

Since you have used a blue primary color and, as you said, that does not interfere with the color theme of the skill frequency we could use the blue theme from shadcn themes. The only thing we'd have to do is create different shades of the primary color and the distructive color. The secondary color and accent color are both defined as the same very light blue in the theme. I don't know if we should set them now or wait until we need them. I think it can wait unless you already needed a secondary or accent color for your implementation. Again, I personally feel like using a different color than blue. But we can use it for now and have that discussion later. Part of the point of having the theming system is that it should be relatively easy to swap out the theme if needed.

[Dosbodoke]

Nice. Then maybe @Dosbodoke could just simply confirm that this will work with shadcn as intended as he has the most > experience with shadcn and initially recommended it for both the component libary and theming.

Yes, this works perfectly, but it actually fits more as an integration with Tailwind than with Shadcn.

[JulianDietzel]

In #310, #311 and #312 a theme was added (standard blue) and the primary and destructive color were expanded to have different brightness levels (50, 100, 300, ...). Also SkillLevel colors (skill) were added from skill level 1 to 7.

What now needs to happen is, that we need to decide on what to use the secondary and what to use the accent colors for. Then they need to be set and different lightness versions be added. The decision on what these colors should mean should primarily be driven by how shadcn uses them. I have not found good documentation on this but will look more into this. As of now, the secondary and the accent colors should not be used outside of shadcn components utilizing them!

[bastislack]

I guess we could go with the Material Design definitions on how to use the primary/secondary/tertiary colors?

• Primary is used for most prominent components in the UI, like FAB, high-emphasis buttons, etc...
• Secondary is used for less prominent components.
• Tertiary brings contrast to and balances primary and secondary colors and can bring more attention to certain elements.

I did not understand why we shouldn't use those colors in other components that are not shadcn components?

[JulianDietzel]

The Material Design definitions are good but let me explain why I think that we need to at least partially inform this decision based on how shadcn uses those colors:

My intention

I suggested in my first post that we use the color palette used for shadcn (the theme) with the primary, secondary, accent, destructive and so on colors. This was because shadcn needs these css-variables defined anyways as its components used them to set their own colors. So if we change the value of the primary color, all shadcn components that use the primary color (for example the buttons) will change their color as well. This is a good thing.

For me the next logical step was to say that we then use these css variables for the styling of all the components we write ourselfs as well. This way if we update the primary color in the css file, not just the shadcn components are adjusted but our custome ones too. This also is a good thing.

Why this causes minor troubles

The only problem that this brings with it is that shadcn, to my knowledge, never specifies anywhere what color (primary, secondary, accent) is used for what purpose. So my worry was that if we, for example, change the secondary color, all the sudden all the shadows around shadcn-components start having that color. That's nice if that color is gray but a massive eye sore if it is anything else.

This problem is further complicated by the provided shadcn themes. They look nice, sure, but the secondary, the accent and the muted colors are all the same: a light grey. So if I see a light grey in a shadcn-component, which color was actually used for that?

Testing it

To get an idea of how the colors are used it set up a small test. I created a new project, set it up with vue, vite and shadcn and then added a bunch of default components. I then set the them so that the colors were defined as follows:

• primary: blue
• secondary: yellow
• accent: green
• muted: turquoise
• destructive: red

This is horrendous to look at but at least we can see what color is used for which purpose. Here are screenshots of all components I tested this on. The only thing I need to add is that all hover effects (apart from components with a primary or destructive color) are using the accent color (green). Components with primary or destructive coloring just make the color a little more bright on hover. I just couldn't screenshot that.

With the dropdown open:

How shadcn seems to use colors

Here is what I take from the screenshots:

• primary: The primary color is used in the traditional sense. Whenever color is needed, the primary color is used. I marks clickable or important objects
• secondary: The secondary color seems to be intended to be a fairly muted color, being used for dividers and the sekeleton. Apart from that it is mainly just offered to the developer as an alternative to the primary color. There is no clear indicator of when to use it. My feeling tells me though that the secondary color is intended to be a very desaturated color that draws less attention than the primary color. Looking at all the themes, I feel like the intention of the shadcn-team is for the secondary color to be gray. It can be used for dividers, less important buttons, and stuff that should just be grey but not grey in the sense of being deactivated
• accent: This is the color for hovering objects and sporadically selected items in a dropdown. That's what it is. It is used for nothing else in the examples I choose
• muted: It is used in exactly two places in my examples: As the backdrop for the tabs and as the color for the dividers of the items in the dropdown. The dividers in the dropdown just have to be a mistake, as all other dividers / separators (the horizontal yellow lines) are always using the secondary color. I believe that this really is intended to be grey, almost no matter what else we decide on, as it probably intended to show inactivity of an element. In the original theme it differs from the secondary color by having a different, more light foreground (text) color.
• destructive: For destructive actions, simple as that. It is not used by shadcn automatically in any of the selected components but is offered as an option to the developer.

What a mess. They defined a color theme where three out of five colors should actually be grey. Lovely.

Options of where to go from here

Here are the options I see (mixing them is possible):

1. We work with how shadcn sees the world: There is a primary color and a lot of greys. This might be better than I make it sound. Their designs look fairly nice and their components have a clean aesthetic to them. I actually might not need more than. Look around GitHub. In the light theme they use a bunch of grey and then different shades of green for the buttons. There are sporadically other colors but, if we apply this to us, in the few cases we need it, we can just use the TailwindCSS colors.
2. We set the primary, secondary (and perhaps tertiary) colors as we want and the update the shadcn components. They are downloaded to our code base after all and it is both legal and a valid practice to alter them to our needs. This causes a little bit of work every time a new component is added, but it actually shouldn't be to bad.
3. We let shadcn do its thing with the colors it defines but when we write our own components we use a different system. What I mean by this is that in the configuration we start making a difference between the colors that shadcn uses and the ones we use as developers. Maybe there will be secondary and secondary-dev or, not the best but better secondary and secondary-500 - if it adheres to the TailwindCSS naming system a developer can use it and if it isn't then a dev shouldn't.

If there are more options please add your ideas!

My personal opinion

We do a bit of all of the options:

• We think like shadcn. Primary and grey, this is the way (poetry is my passion). We have talked about the issue of having too many colors in the app in the past, due to all the colors indicating the skill frequency. It is probably good if we limit ourselves to mostly just using one color. I would stick with having the primary color in different lightnesses (50, 100, 300, default, 700, 900, 950) so we have some room to play with that color.
• As a result we do not add different lightnesses to both the secondary and the accent colors. They are a light grey, it makes little sense to give them different lighntess options. If we do ever run into a situation where they would be needed, we can add them then.
• secondary is now defined as the color used for filled elements that shouldn't be of the primary color. Buttons on less importance, badges, icons if needed, separator lines, etc. It is supposed to be used as a background color only, not a text color. Use secondary-foreground for text.
• accent is now defined as the color used for interactive elements: Hovers, selected dropdown items, etc. Here too, accent is only used for the background, accent-foreground for text.
• muted is now defined as the color used for inactive or less important elements. If it is less prominent than secondary used muted, they only differ in their foreground color anyways
• destructive explains itself, stays as is and also keeps its different lightness variants
• This should fit with most shadcn components from what I can tell. If they differ from these definitions to greatly, we change the code of the shadcn component (looking at your, Dropdown)
• For cases where a color is needed once but not system wide we use the TailwindCSS colors (they are great)
• If we do want to go with having more than one system wide color (primary) we add it under a different name (not secondary, or accent, etc.) and without it being linked to shadcn. Then we can use it for development but shadcn is not tangled up in the use of it. We can add this color now or wait to see if someone is actually in need of it and then add it. Adding is always easy, it's the removing that is hard.

Those are my two cents on the matter. It got surprisingly long. Please don't feel like I've got this all figured out now because I used a lot of words. I don't know how good my proposed approach is and it could also very well be that I forgot to consider further options. Please let me know what you guys think and let me know if anything is unclear, I'm happy to clarify stuff :)

[bastislack]

Primary and grey, I like it! Definitely makes it easier deciding on only one color while having all the skill colors. Having it in different lightnesses gives us room to play around with it in different contexts.

I also agree with the adherence to how shadcn uses the colors. So let's go with that for now and see how it turns out, in case it doesn't look as we'd like we can still change it up.

[JulianDietzel]

Sweet, if noone else has any concerns with the approach, I suppose the nexts steps should be:

• [x] Add a wiki article on how color should be used with a link to this thread, a short summary and perhaps an image of all available colors with their name
• [x] Fix up the coloring of the separators in the shadcn dropdown
• [x] Start a new thread on whether we want to stick to the current colors or update them to different ones (not the system but the colors: What color should be the primary color and so on). This has no urgency though

[JulianDietzel]

Added a wiki article: https://github.com/bastislack/highline-freestyle/wiki/Colors

[JulianDietzel]

Follow up thread: #322