Premise
It's fairly common to have a select for selecting colours on a content type or paragraph that then are used by the theme to apply the proper style. The colour cannot be hardcoded because any future change to the colour could lead to an overhead migrating the existing values to the new one. A simple solution is to use names that then are converted to colour code by the theme, for example applying the colour name as class and styling accordingly.
Problem
While this solution works perfectly on a site with a single theme, it fall short on flexibility and do not allow to support multiple themes, e.g. on a multisite instance like LGD Microsite.
A simple solution could be to use a generic colour scheme name, "Primary", "Secondary" ..., but this solution would impact the Editor experience, whom would not have a clear evidence of what colour would then been applied by the theme.
Solution
The solution for this problem is to define a generic colour select using the generic names as stated before "Primary", "Secondary", etc.
Then for theming every theme can apply the proper colour to the relative classes.
In order to maintain a good editorial experience, we can leverage the theme info.
bg_colours:
primary: 'Blue'
secondary: 'Green'
tertiary: 'Red'Then using a module, the select can be altered based on the current frontend theme changing only the select option label
$default_theme = $this->configFactory->get('system.theme')->get('default');
$themes = $this->themeHandler->listInfo();
$info = isset($themes[$default_theme]) ? $themes[$default_theme]->info : [];
if (isset($info['bg_colours'])) {
$options = &$element['subform']['field_background_colour']['widget']['#options'];
foreach ($options as $key => &$option) {
if (isset($info['bg_colours'][$key]) && is_string($info['bg_colours'][$key])) {
$option = $info['bg_colours'][$key];
}
}
}