Custom RGB colors for cards

[trobonox]

Currently, clicking a card has a fixed range of colors. Next to these toggles, there should be a color palette icon to select a custom color. This should also be inside a circle like the other colors, displaying the circle with the currently selected custom color.

The logic for this can be found in components/modal/Kanban.vue where the setCardColor function is used. The colors are applied using TailwindCSS, so for custom hex colors you would have to save the strings in a format like this: bg-[#fefefe]

[Khusyasy]

Hello @trobonox , I'm interested to help on this issue,

I have explored the code a little bit, so what I think I should do is to add a new option for card color and then the user use some sort of color selector right? is there any color selector component already available or prefered?

[trobonox]

Hi, thanks for wanting to help out! I will assign this issue to you.
If I understood you correctly, you are on the right track: You need a new option besides the existing card colors and that opens a color picker. (The UI element should be a similar design and next to the elements you can see in the screenshot below)

At the moment, you can just use the native HTML element (<input type="color" />, you can find a reference implementation in components/CustomThemeEditor.vue).

If you have any other questions, feel free to reach out!

[Khusyasy]

Hey @trobonox , I have implemented custom color in my fork,

but there is a bit of problem with the color not showing because tailwind classes are compile-time generated, so if i use variable inside the bracket for example bg-[${customColor}] there wil be no class for that color.

so one of the solution i found is using CSS variables, but i think the Card Component would need to be updated too, so what do you think about this?

[trobonox]

Just tried out the implementation on your fork and it looks good so far. I totally understand the issue you're running in, thanks for pointing this out.
I think at this point a modification of the Card component is inevitable, but the approach using Tailwind you linked seems a little complicated to me. Could you just try to conditionally apply either a Tailwind class from the presets, or if the color which is saved starts with a #, representing a hex color we just use Vue's way of adding styles using :style?

Here's an approach I was thinking of for the Card component modification, not sure if this would work but maybe this helps:

// Add this to the main div in the Card component
:class="[cardTextClassZoom, cardBackgroundColor, (cardTextColor.startsWith('#') ? '' : cardTextColor)]"
:style="[cardTextColor.startsWith('#') ? {'background-color': cardTextColor} : {}]"

Please let me know if this makes sense or if you want to try out another approach. Feel free to experiment, I'm just thinking about possible ways to keep the implementation as clean as possible without extra entries to the Tailwind config or extra CSS variables.

[Khusyasy]

I see what you mean, Im gonna first try out using the Vue style way, because I think using Tailwind that way would make it more complicated

[trobonox]

Thanks for your contribution!