UI Skins: support theme setting

Thanks a lot for the feature request and the MR.

I will give a look and test.

Can we move...

The declaration in some YAML files?

in order to be authorable by front developers.

For example, naive proposal in ui_suite_bootstrap.ui_skins.themes:

# No target because scopable.
# No value because same as plugin ID.
dark:
  label: "Dark"
  label_context: "color"
  key: "data-bs-theme"
  bg_utility:
    - bg-dark
  fg_utility:
    - text-bg-dark

# No target because scopable.
# No value because same as plugin ID.
light:
  label: "Light"
  label_context: "color"
  key: "data-bs-theme"
  bg_utility:
    - bg-light
  fg_utility:
    - text-bg-light

This proposal is just a first draft, let's think about a better way of doing that

The Bootstrap::getThemeMapping() logic in UI Skins?

We can keep the apply in the ui_suite_bootstrap PHP code for now, so those function will call the new UI Skins API:

• PreprocessPage::preprocess()
• PreprocessMediaMediaLibrary::preprocess()
• FormMediaLibraryAddFormAlter
• ElementPreRenderLayoutBuilder
• ...

UI Skins issue created #3500562: Theme definition: link to utility classes.

I will isolate generic stuff unrelated to theme selection in another MR to merge it right now.

Merged what was independent from UI Skins.

First MR rebased, so it is clearer what needs to be made generic.

Postponing until UI Skins issue is done.

Found missing spots.

JS:
- assets/js/text/text.js
- assets/js/misc/tabledrag.js

Some btn-outline-dark, so I think the theme class should be made available in a drupalSettings.

src/Utility/Element.php:

// Find a class based on the value of "value", "title" or "button_type".
    if (!$class) {
      $themeClass = Bootstrap::getThemeMapping();
      $value = $this->getProperty('value', $this->getProperty('title', ''));
      /** @var string $button_type */
      $button_type = $this->getProperty('button_type', 'outline-' . $themeClass);
      $class = "{$prefix}-" . Bootstrap::cssClassFromString($value, $button ? $button_type : 'outline-' . $themeClass);
    }

src/HookHandler/PreprocessMenuLocalAction.php:

$class = Bootstrap::cssClassFromString($link['title'], 'outline-dark');

On PHP side, maybe for both, but at least for PreprocessMenuLocalAction, the problem is that it is the opposite that needs to be gathered. When in dark mode, we need outline-light.

So, more complex than a simple mode/class pair only.

Need to wait for UI Styles 2 (/UI Skins 2), the theme settings will be changed.