(How) can the new color-field be combined with existing CSS classes?

Kirby 4
1

Displaying the selected colors is a visual added value.
However, I wonder how I can use this with existing colors that are already predefined in CSS classes?

Example:

:root {
--color-red: #e30914;
--color-cyan: #0dcaf0;
--color-green: #2ed47c;
}

.red { background-color: var(--color-red); }
.cyan { background-color: var(--color-cyan); }
.green { background-color: var(--color-green); }

I assume that the new color-field cannot be used here.
Is there another way to display CSS classes in color?

color:
  type: color
  mode: options
  options:
    "red": "#e30914"
    "cyan": "#0dcaf0"
    "green": "#2ed47c"

Can the descriptions be used here instead of the HEX color values?
The HEX color values would only be used for visualization purposes.

2

I guess you don’t really want a color picker but rather a select field with your class names.

What you could while still using the color picker, is a sort of reverse lookup, i.e. a map where you look up the class for the given color value.

3

Correct, I don’t need the color picker if the colors have already been defined in the CSS file. (I‘ve just added this to the code of my question.)

The reverse search fits well with my thoughts. However, I lack the know-how as I have never used this case in practice. Is there a solution approach here in the forum or in the cookbook that I can use? For lack of a suitable search term, I have not found anything.

4

Just an array defined in your config with key/value pairs, e.g.

'colormap' => [
  'hexColorCode' => 'colorClassName',
  // ...
],

Lookup:

$colorClassName = kirby()->option('colormap')['hexColorCode'];
2 Likes
5

Great! That’s easier than I thought! Thank you very much!

6

How did you implement this at the end?
I don’t fully understand how to use the provided solution =)