Support for UI Skins 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"
  utility_equivalent:
    - bg-light
    - text-bg-light

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 ✨ Theme definition: link to utility classes Active .

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.

Seems like just removing the specific light classes is enough for the dark theme support!

grimreaper → changed the visibility of the branch 3499985-extract to hidden.

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.