Dynamic availableColors in theme.yaml

Hi! Can someone explain how to create dynamic aviableColors in /themes/xyz/theme.yaml?
I found this but don’t know how to use it with a theme instead of a plugin.

October v2

Do you mean “dynamic” in the sense that the colors get dynamically generated or are you using “dynamic” in the sense of “not defined in the YAML file”? There is nothing “dynamic” about the example above, the colors are still hard-coded, just in a different place. And I don’t really see a possibility to generate colors outside of PHP or a (S)CSS solution with variables.

But if you have a custom plugin at hand, you can use the cms.theme.extendFormConfig event:

There is actually a spot-on example in the comments in the Theme class:

         * @event cms.theme.extendFormConfig
         * Extend form field configuration supplied by the theme by returning an array.
         * Example usage:
         *     Event::listen('cms.theme.extendFormConfig', function ($themeCode, &$config) {
         *          array_set($config, 'tabs.fields.header_color', [
         *              'label'           => 'Header Colour',
         *              'type'            => 'colorpicker',
         *              'availableColors' => [#34495e, #708598, #3498db],
         *              'assetVar'        => 'header-bg',
         *              'tab'             => 'Global'
         *          ]);
         *     });

Still nothing “dynamic” to see here though :wink:

1 Like

Thank you! I was thinking of creating a color palette using a repeater field and then reusing that palette as aviableColors.

If you don’t want to be using Model classes colours can easily be defined directly in the blueprints like:
label: Colour of the title
type: colorpicker
availableColors: [‘#ffffff’, ‘#e5570c’, ‘#1b8c30’, ‘#000000’]

That’ll also generate the fifth option which will allow you to pick custom value like:

If you don’t want the custom option there’s an option to add ‘allowCustom: false’ line like

label: Colour of the title
type: colorpicker
availableColors: [‘#ffffff’, ‘#e5570c’, ‘#1b8c30’, ‘#000000’]
allowCustom: false

Hope that’s what you’re looking for!