Dynamic availableColors in theme.yaml

Need Help
#1

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.

image
image711×354 6.66 KB

October v2

#2

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:
https://octobercms.com/docs/api/cms/theme/extendconfig

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
#3

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

#4

If you don’t want to be using Model classes colours can easily be defined directly in the blueprints like:

title_colour:
        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:
image

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

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

Hope that’s what you’re looking for!

1 Like