Generating custom themes in Drupal 10

A short on generating themes using scripts

This will be a very brief article on how to generate a custom theme using two methods. Using the Drupal starterkit and by using the Bootstrap Barrio theme.

Drupal starterkit

Drupal starterkit theme has been in the making for a while to overcome the upgrading issues with the very old Classy theme from D8.

There is this article from D.O explaining this in length.

New starterkit will change how you create themes in Drupal 10

For us to generate a new sub theme using this option, all we need to do is execute a command like so;

List of available options for the starterkit generation

php web/core/scripts/drupal generate-theme genone --name "GenOne" --description "Created with core starterkit theme generator" --path themes/custom

In the above command, I’m creating a theme named GenOne. You can pass in the machine name, theme name, description and path.

There has been an update to this as described in this change record https://www.drupal.org/node/3425844 where you can utilise a starterkit.yml

The end result can be found in my GitHub repository.

https://github.com/pasankg/d10-playground/tree/develop/web/themes/custom/genone

Bootstrap Barrio Sub-theme generator

Barrio has been around for quite some time, and we can utilise this contrib module to generate a custom sub theme. Since Barrio is a Base theme, we should not be using it directly.

1. Install and enable the module with composer. (https://www.drupal.org/project/bootstrap_barrio)
2. Add the following script in the composer.json file if you want your bootstrap version to update via composer.

"scripts": {
      "post-drupal-scaffold-cmd": [
          "mkdir -p web/libraries/bootstrap",
          "cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap"
      ]
  }

3. From within the custom theme directory; Run the following script.

This will make a copy fromweb/themes/contrib/bootstrap_barrio/subtheme and move it to the custom theme directory, while replacing placeholders with your new custom theme name provided in the script.

https://www.drupal.org/docs/8/themes/barrio-bootstrap-4-drupal-89-theme/bootstrap-barrio-installation/creating-a-custom-barrio-sub-theme#s-create-by-script

As the above script did not work for me, I updated it and added it in a file named create_subtheme.sh

Simply execute sh create_subtheme.sh

#!/bin/bash

# Define your custom theme name
export CUSTOM_BARRIO="playground_2024" # change this to your custom theme_name

# Check if the subtheme directory exists
if [ -d "../contrib/bootstrap_barrio/subtheme" ]; then
    # Copy the subtheme directory
    cp -r "../contrib/bootstrap_barrio/subtheme" "$CUSTOM_BARRIO" || exit
else
    echo "Subtheme directory not found."
    exit 1
fi

# Move into the custom subtheme directory
cd "$CUSTOM_BARRIO" || exit

# Rename files and replace strings
find . -type f -exec sh -c '
    for file; do
        new_name=$(echo "$file" | sed "s/bootstrap_barrio_subtheme/$CUSTOM_BARRIO/")
        mv "$file" "$new_name"
        sed -i "s/bootstrap_barrio_subtheme/$CUSTOM_BARRIO/g" "$new_name"
    done
' sh {} +

4. The end result can be found in my GitHub repository https://github.com/pasankg/d10-playground/tree/develop/web/themes/custom/playground_2024