How to use single color array in theme?

[engin-can]

Hi, my theme only consists of 6 colors. I noticed each array requires at least 10 colors. How should this be handled?

Is there a better way than this?

colors: {
    cayola: [
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
      '#FF6F3D',
    ],
    sapphire: [
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
      '#0056b3',
    ],
    and so on ...
  },
  primaryColor: 'cayola',

[atareversei]

You need 10 shades per color for Mantine color themes to work properly. As the documentation states it:

Colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some variants will not have proper colors. If you only have one color value, you can either pick the remaining colors manually or use the colors generator tool.
You can add more than 10 shades per color: these values will not be used by Mantine components with the default colors resolver, but you can still reference them by index, for example, color="blue.11".

I would suggest using the color generator to create 10 standard shades out of your original color and placing them into the array.

[engin-can]

But where in that array would my input color live?

To give you more context:
I want to use my logo color as primary color (#0056b3). When I use this as base color, it generates 10 colors based on this color, but as far as I can tell, it doesn't tell me where in this range my base color would live. It highlights color #0053AD, but what does that even mean? I want it my primary color to default to #0056b3.

[atareversei]

Well, Mantine is following a design system and I believe it has based its colors on Open Color. This color system doesn't use very dark shades, and the primary color you are providing to the color generator, is perceived to be too dark to be used in the shades set as is and it gets converted to the closest shade possible which is #0053AD (that's why it gets highlighted). Mantine is trying to get a balanced set of colors so it can ensure that components will have enough amount of contrast in different states and also when they are used together.

Even other color generators that belong to other color systems might change your color. e.g. Material Design.

But you don't have to follow this rule, you can create your own shades and tints and just pick 10 (or more) from those colors. This tints and shades generator website could help you. You can just pick #0056b3 and 4 tints and 5 other shades to create your own custom color system.

[engin-can]

Thanks for explaining! Do you happen to know which index primaryColor defaults to?

[atareversei]

You're welcome, if the answer helped you, please mark it as answered so it gets closed.
For the second part, it depends on the usage. For each color, Mantine is going to create CSS custom properties known as CSS variables for each shade.

/* for cayola */
--mantine-color-cayola-0: #something;
--mantine-color-cayola-1: #othercolor;
/* so on and so forth... */

For the primary color it is going to create some other custom properties like:

--mantine-primary-color-filled: var(--mantine-color-cayola-filled); /* because you have provided cayola as the primary color */
--mantine-primary-color-filled-hover: var(--mantine-color-cayola-filled-hover);
/* and so on... */

For the fun part, it creates two sets of other CSS properties for --mantine-color-cayola-filled and other primary custom properties. One for light mode, one for dark mode. For example:

/* light */
--mantine-color-cayola-filled: var(--mantine-color-cayola-6);

/* dark */
--mantine-color-cayola-filled: var(--mantine-color-cayola-8);

So you have to look at the documentation or just inspect the elements to see which color they are using.