Theming

Largely when doing any theme related work with Drupal WxT this almost always should be done in a sub-theme.

For more on creating sub-themes please consult the official documentation:

• Creating sub-themes

To assist with sub-theme creation WxT Bootstrap provides an example starterkit that should be of benefit.

Note: Sub-themes are just like any other theme except they inherit the parent theme’s resources.

Sub Theme Configuration

a) Replace every instance of THEMENAME with your chosen machine name often of the pattern <prefix>_bootstrap.

b) Enable your new sub-theme preferably via drush:

drush en `<prefix>_bootstrap`
drush cc css-js

c) Point to your new sub theme for WxT Library to properly load assets under Themes Visibility on the /admin/config/wxt/wxt_library page.

Notes

Inheriting Block Templates

If the theme you are extending has custom block templates these won’t be immediately inherited because a sub-theme creates copies of all the blocks in the parent theme and renames them with the sub-theme’s name as a prefix. Twig block templates are derived from the block’s name, so this breaks the link between these templates and their block.

Fixing this problem currently requires a hook in the THEMENAME.theme file and should have the following contents:

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function THEMENAME_theme_suggestions_block_alter(&$suggestions, $variables) {
  // Load theme suggestions for blocks from parent theme.
  // https://www.drupal.org/project/wxt/issues/3310485#comment-14715969
  for ($i = 0; $i < count($suggestions); $i++) {
    if (str_contains($suggestions[$i], 'THEMENAME_')) {
      $new_suggestions = [
        str_replace('THEMENAME_', '', $suggestions[$i]),
        str_replace('THEMENAME_', 'wxt_bootstrap_', $suggestions[$i]),
      ];
      array_splice($suggestions, $i, 0, $new_suggestions);
      $i += 2;
    }
  }
}

Programmatic Logic

The following provides an example of how you can configure your sub theme to be installed as the default on a module install:

/**
 * Implements hook_modules_installed().
 */
function MODULENAME_modules_installed($modules) {
    if (in_array('wxt', $modules)) {
      \Drupal::configFactory()
        ->getEditable('system.theme')
        ->set('default', 'THEMENAME')
        ->set('admin', 'claro')
        ->save(TRUE);
    }
  }
}

The following provides an example of how you can configure wxt_library to use your sub theme by creating a config/install/wxt_library.settings.yml file with the following contents:

url:
  visibility: 0
  pages:
    - 'admin*'
    - 'imagebrowser*'
    - 'img_assist*'
    - 'imce*'
    - 'node/add/*'
    - 'node/*/edit'
    - 'print/*'
    - 'printpdf/*'
    - 'system/ajax'
    - 'system/ajax/*'
theme:
  visibility: 1
  themes:
    THEMENAME: THEMENAME
    wxt_bootstrap: wxt_bootstrap
minimized:
  options: 1
files:
  types:
    css: css
    js: js
wxt:
  theme: theme-gcweb