Steps to create sub-theme in drupal 8

Here, we are going to explain about sub-theme of drupal 8. Sub-theme is a very interesting way to create a subtheme from an existing base 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 will use all resources like css, js and images of the base or parent theme. You can easily add new or additional functionality as per your requirement.

Suppose, we need to add some css changes & region changes in the base theme i.e. bartik ( Default theme of D7 and D8 ). We can implemented this task in a very easy way by development of subtheme in couple of minutes.

Here are the steps to create sub-theme:

Step 1: In D8, all themes except core themes resides in the /themes folder. Create new folder at same path i.e. /themes and give a name that will be name of new subtheme. Let’s name it bartik-etutorialz for now.

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

Step 3: For creating 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 path of .info.yml and paste this code:

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

Step 7 : Create the custom-style.css file at location as mentioned above (/themes/bartik-etutorialz/css/custom-style.css). You can write CSS script to override CSS of the base 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 :

<header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t }}">
         <div class="section-header-top layout-container clearfix">
              {{ page.header_top }}
         </div>
         <div class="section layout-container clearfix">
                {{ page.secondary_menu }}
                {{ page.header }}
                {{ page.primary_menu }}
       </div>
    </header>

That’s all. We have successfully created a subtheme of Drupal 8. For enabling it, login to your website, go to Appearance, click Install and Choose "Set as default" of bartik-etutorialz theme.