Create a new D10 theme

Mediacurrent Theme Generator

The Mediacurrent theme generator is a scaffolding tool that has evolved with the years to provide a production-ready Drupal 10 theme that is component-based ready out of the box.

Exercise: Create a new D10 theme

Follow the instructions below.

1. In your Drupal 10 site, create a new folder for your theme (i.e. /themes/custom/training_theme). Although you can use any name you wish, all exercises in this curriculum use training_theme.

2. In your command line app, change into the newly created directory (training_theme), type the following command and press Return:

nvm install 16 && node -v > .nvmrc

The command above will install the NVM v16 and create a new hidden file in your project called .nvmrc where that version of Node will be declared as the default version for this project.

• Next run this command:

npm install -g libnpx

• Then run the following command:

npm create yo mc-d10-theme

Respond to the on-screen prompts as follows:

1. Assign a Human readable name to your theme

2. IMPORTANT: When the What is your theme's machine name? question comes up, be sure it matches the name of the directory you created above (i.e. training_theme).

3. Type a description for your theme

4. Type Y and press Return when Should we update the .gitignore to ignore compiled files? comes up. This will hide /dist from git to avoid having to commit already compiled files.

5. While you can select any editorial components from the list, we recommend starting all of them, especially if you are using the generator for the first time.

WARNING: The theme's machine name should always match the directory you created in the first step above (i.e. training_theme).

• After the theme has been successfully created, run the following commands to launch Storybook:

npm install
npm run storybook

• Click the URL provided in the console output (e.g. http://localhost:6006/), to access Storybook.

Resources

Project: https://github.com/mediacurrent/theme_generator_10