Steps to create sub-theme in drupal 8

In this article, we are going to explain about sub-theme of drupal 8. Sub-theme is a powerful way to create a new theme from an existing theme. If you are going to do major changes like templating and hook alteration in theme. It is preferable to build a seperate sub-theme by using existing theme instead of doing direct changes in original theme.

We will define existing theme as parent theme in info file. It uses all the resources i.e. css, js etc. of the existing or parent theme. You can easily add additional functionality as per your requirement.

Suppose, we need to add some css changes & region changes in the Bartik theme ( Default theme of Drupal 7 and Drupal 8 ). We can implemented this task easily by creating a subtheme in few minutes.

Here are the steps to create sub-theme:

Step 1: In Drupal 8, all non-core theme should reside inside the /themes folder. Create a folder inside it and give it a name. It will be the name of our sub-theme. Let’s name it bartik-etutorialz for now.

Step 2: Create bartik-etutorialz.info.yml file inside of bartik-etutorialz folder. If you used different name, create yourthemename.info.yml file.

Step 3: To create a subtheme of Bartik theme, copy code from bartik.info.yml file and paste it to bartik-etutorialz.info.yml file and save it.

Step 4: Update base theme i.e. bartik in this info file like this.

name: bartik-etutorialz 
type: theme
description: Bartik Etutorialz is sub theme of drupal 8 core theme i.e. bartik. In this subtheme, we have added a new css & a new region i.e. Header Top
base theme: bartik
core: '8.x'

Step 5 : Update Library in info file and add new region.

Libraries:
  - bartik-etutorialz/custom-styling

Add New Region i.e. Header Top

regions:
header_top: 'Header Top'
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary 

Step 6 : Create bartik-etutorialz.libraries.yml file on the same folder where .info.yml file is located. And paste the following code:

custom-styling:
css:
    theme:
      css/custom-style.css: {}

Step 7 : Create the custom-style.css file in the location as indicated above (/themes/bartik-etutorialz/css/custom-style.css). Here, you can write CSS to override CSS of the Bartik theme.

Step 8 : Update region in template file. Copy page.html.twig from bartik and paste it to location i.e. themes/bartik-etutorialz/templates/. Update header section code of page.html.twig file with this code :

    

That’s all. We have successfully created a Drupal sub-theme. To enable it, login to your website, go to Appearance, click Install and set as default of bartik-etutorialz theme.