Choose any color as primary

[idling-mind]

Updated color picker to let user choose any color as primary.
Variations of selected color is automatically calculated and added as new color "myColor" to the theme.
Selected color is created such that it's number 5 in the list so that primaryShade can be set to 4.

[AnnMarieW]

Hi @idling-mind

This is cool! Thanks!

Can you tell me more about how you generated the 10 colors? It can be tricky to generate a high quality sequence that has even steps between the colors and accounts for things like tone and saturation. It would be ideal if we could generate the same color sequence as the Mantine Color generator: https://mantine.dev/colors-generator/

Why choose 4 for the primary shade? The Mantine default is { light: 6, dark: 8 }

[idling-mind]

hi @AnnMarieW , right now, i'm interpolating using the hsl colors. I'm creating 4 new colors to the left and 5 colors to the right of the chosen color's luminosity. That's why I had to keep the primaryShade to 4.
I had taken a look at mantine.dev's color generator and that's kind of what inspired me to do this. But i dont really know exactly how mantine.dev does it.

[AnnMarieW]

Yeah, I'm concerned about generating colors this way -- whether it will work correctly with the Mantine theme. Mantine uses colors throughout the spectrum for things like active, hover, text colors, background colors etc in both light and dark mode. I think it would be better for people to use the Mantine Colors generator if they want to add custom colors.

https://mantine.dev/styles/css-variables-list/

This is really cool though. I wonder if there is a way to integrate the Mantine color generator...

[idling-mind]

ok, I understand.

I found the code here. I'll try to port it to python.

[AnnMarieW]

Interesting... it uses chroma.js I wonder if there is a Python equivalent library.

[idling-mind]

Interesting... it uses chroma.js I wonder if there is a Python equivalent library.

I couldn't find any. I tried something anyway. But it's not giving the same colors as mantine's version. But the behavior seems similar.

[AnnMarieW]

This looks pretty good! I tried a few things like entering a very light color, and it correctly placed it low in the series and made a nice 10 color sequence. The app shows good contrast for buttons etc. in light and dark mode using the default primary shades.

For another test, I took the custom color from the colorpicker text field and used it in the Mantine color generator. Then asked ChatGPT Code Copilot to analyze the two color series. The results are below.

Even if this color generator isn't quite as perfect as the Mantine version, I think including this feature adds a lot of value because it demonstrates how to add custom colors to the theme object.

We could update the README to recommend using the Mantine color generator for production apps.

---

To evaluate these two color sequences for use in a Mantine app, I'll analyze their suitability based on key design criteria: smoothness, contrast, cohesion, readability, and accessibility.

---

Sequence 1 Analysis

[
    "#faebfd", "#f1d5f8", "#e0aced", "#ce82e1", "#bd60d4",
    "#b349cd", "#b138cf", "#9e27bb", "#911aae", "#8509a4"
]

1. Smoothness:

   • The progression from light (#faebfd) to dark (#8509a4) is relatively smooth but has a noticeable jump between #ce82e1 and #bd60d4, where the saturation increases sharply.
   • The lightest shades (#faebfd, #f1d5f8) are visually close, which might make them less distinct in use cases like hover effects.

2. Contrast:

   • Adequate contrast exists between the mid-range (#bd60d4, #b349cd) and darker colors (#911aae, #8509a4), making them suitable for text or accents.
   • The very light colors may lack sufficient contrast when paired with white or light backgrounds.

3. Cohesion:

   • The sequence has good visual harmony, with consistent hues leaning toward a purple/magenta palette.

4. Readability & Accessibility:

   • Darker colors (#9e27bb, #911aae) will work well for text on lighter backgrounds.
   • The lighter colors may struggle with accessibility when used with white or other light shades.

---

Sequence 2 Analysis

[
    "#feecff", "#f2d8f9", "#e0b0ec", "#cd85df", "#bd60d4",
    "#b449ce", "#af3dcc", "#9a2eb4", "#8927a2", "#781e8e"
]

1. Smoothness:

   • This sequence transitions more smoothly from light to dark compared to Sequence 1.
   • There is a consistent gradient effect, particularly from #f2d8f9 to #781e8e.

2. Contrast:

   • Better contrast is observed among the lighter shades (#feecff, #f2d8f9, #e0b0ec), making them more usable for subtle background or hover effects.
   • The darker colors (#781e8e, #8927a2) maintain good contrast against light text or backgrounds.

3. Cohesion:

   • The sequence feels more cohesive than Sequence 1, maintaining consistent saturation and hue adjustments.
   • The palette leans slightly toward a lavender/violet tone compared to the magenta-like feel of Sequence 1.

4. Readability & Accessibility:

   • The darker colors (#781e8e, #8927a2) are highly readable against light backgrounds.
   • The lightest shades (#feecff, #f2d8f9) are more distinct than in Sequence 1 and provide better usability for UI elements.

---

Recommendation

Sequence 2 is better suited for a Mantine app because:

• It provides smoother transitions and consistent contrast, making it visually appealing and polished.
• The lighter shades are more distinct and functional for hover states or subtle backgrounds.
• The palette has a balanced vibrancy, making it suitable for both dark and light themes.

Suggestions:

1. Test both sequences in context (e.g., for buttons, text, hover states) to ensure they meet accessibility standards (e.g., WCAG AA).
2. Adjust the lightest shades in Sequence 1 if it must be used, to enhance contrast and usability.

---

[idling-mind]

For another test, I took the custom color from the colorpicker text field and used it in the Mantine color generator. Then asked ChatGPT Code Copilot to analyze the two color series. The results are below.

That's a clever way to analyze the colors! I'll see if I can refine the implementation a bit more. In any case, I'll just update the readme as you suggested.

[idling-mind]

I added a color shades swatch now. Just to give us a better idea about which shades are being created when we select a custom color. During this, I realized that for the default colors, (especially yellow and orange), the shades are probably hand crafted. They are much more saturated towards darker tones.

I think I'll stop going down the rabbit hole of colors now :). Please do feel free to make any changes to this pull request. It was just something I felt missing, but realized that it was much more complicated than I imagined.

Thanks for creating this tool. I hope I can contribute more in the future!

[AnnMarieW]

It looks like the mantine colors generator is available as a seperate package. I might be able to add that function to dash-mantine-components library 🤔

RubixCube-Innovations/mantine-theme-builder#7

[idling-mind]

That would be quite nice to have in dmc!

[AnnMarieW]

I'm a little backed up on dmc project, but I'll open an issue and see if someone can help with a PR. Might be fairly straight forward.

In the meantime, what do you think about having a link to the Mantine colors generator, then have people copy the result and paste it into the customize theme panel? Could use a dmc.JsonInput component for the input field.

[idling-mind]

I think that would be nice... So do you mean a JsonInput for only the generated colours or JsonInput for the whole theme? It would also be cool if we could play with the entire theme using a JsonInput field. Then we could try other customisations that the theme object allows.

I'm a little backed up on dmc project, but I'll open an issue and see if someone can help with a PR. Might be fairly straight forward.

I can also give a try. Haven't looked into the dmc codebase yet.

[AnnMarieW]

It would also be cool if we could play with the entire theme using a JsonInput field. Then we could try other customisations that the theme object allows.

^^ That's a really good idea!

Thanks for considering doing a dmc PR 🙂

[idling-mind]

I tried a bit to do a two way bind of jsoninput and the theme controls. I felt it became much more complicated than your current clean implementation. Do you have some proposal on how to do this? As of now, I also would like to bring the theme controls outside of a modal so that I can see the changes in the theme without closing the modal.

[AnnMarieW]

I tried a bit to do a two way bind of jsoninput and the theme controls.

What do you think about another version of the app where it starts with the default theme in the JsonInput that you could edit and see the changes live. Then there would be no need to do a two way sync of the menu driven options?

I agree that it would be better to have the theme controls in something other than a modal. Maybe a Collapse component would work. Or a sidebar that's always visible?