Store color name instead of color value

The CMS Questions
1

Is there a way to use the color field with predefined options and store the color name instead of the actual color value?
For the editors it is great to have a visual preview of the color in the panel, but i think it would be great to have the possibility to later adjusts a color value a bit if needed. Therefore saving the name of the color would be a great option.

Is this somehow possible? Or do I have to work with a select field?

1 Like
2

No, you cannot use the color field with color names as values instead of color values as values.

You would have to use a select field without visual clues, or one of the old color plugins (see plugins page) (don’t know if they have been updated for Kirby 4)

3

You can vote for the idea to save a different value than the color value on Nolt.

4

@silvan @Mirkokokoko This feature has been requested several times. I also tend to use CSS color names rather than HEX color values. However, with a workaround, it is possible to continue working with (predefined) color values in the panel and then replace them with the CSS color name in the template. I solved it in a project like this:

In my blueprint:

fields:
  colorField:
    label: Select a Color
    type: color
    options:
      - "#ffffff"
      - "#000000"
      - "#0d6efd"
      - "#6c757d"
      - "#198754"
      - "#ffc107"
      - "#dc3545"
      - "#0dcaf0"
      - "#f8f9fa"
      - "#212529"
    default: "#ffffff"

In my Template:

<?php
$color = $page->colorField()->value(); 
$colorMapping = [
    '#ffffff' => 'bg-white',
    '#000000' => 'bg-black',
    '#0d6efd' => 'bg-primary',
    '#6c757d' => 'bg-secondary',
    '#198754' => 'bg-success',
    '#ffc107' => 'bg-warning',
    '#dc3545' => 'bg-danger',
    '#0dcaf0' => 'bg-info',
    '#f8f9fa' => 'bg-light',
    '#212529' => 'bg-dark',
];
$cssClass = $colorMapping[$color] ?? ''; 
?>
<div class="<?= $cssClass ?>">
    <!-- Your content -->
</div>
1 Like
5

Thank you for the suggestion! For my use cases, the following workaround works great:

blueprint.yml

myColor:
    type: toggles
    mode: options
    options:
      type: query
      query: kirby.option('silllli.colors')
      text: "<span style='background: {{ item.value }}; border: 1px solid var(--color-border)'>          </span>"
      value: "{{ item.name }}"

config.php

…

'silllli.colors' => [
    [
      'name' => '1',
      'value' => '#F8B195',
    ],
    [
      'name' => '2',
      'value' => '#F67280',
    ],
    [
      'name' => '3',
      'value' => '#C06C84',
    ],
    [
      'name' => '4',
      'value' => '#6C5B7B',
    ],
    [
      'name' => '5',
      'value' => '#4F4673',
    ],
];

template.php

<div class="is-color-<?= $page->myColor()->value() ?>">
    <!-- Your content -->
</div>

It saves color names (I use plain numbers) and previews the according color values in the panel. If a color value changed in the future, I’d update the list in config.php and accordingly in the websites stylesheet.