Develop a new theme

When developing a new Drupal theme, instead of starting from scratch you could either go with one of starter themes with clean structure as, for example, Basic theme, or create and start working with a sub-theme of another theme.

Sub-themes inherit the parent theme's resources. There are no limits on the chaining capabilities connecting sub-themes to their parents. A sub-theme can be branched and organized however you see fit.

This tutorial shows how to create a sub-theme of Bartik theme that comes with Drupal 7 and Drupal 8 enabled by default.

Create a sub-theme of Bartik on Drupal 8

Structure

You can place the files of your sub-theme in any of the following directories:

themes
sites/all/themes
sites/default/themes
sites/yourwebsite/themes

A sub-theme must have a different internal name from its parent theme. Let's suppose this sub-theme internal name is "scarf".

cd themes
mkdir scarf
cd scarf

scarf.info.yml

Create the scarf.info.ymlfile and paste:

name: Scarf
type: theme
description: This is a sub-theme of theme Bartik.
core: 8.x
base theme: bartik
libraries:
  - scarf/styles
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

scarf.libraries.yml

Create the scarf.libraries.yml file with the following content:

styles:
  css:
    theme:
      css/scarf.css: {}

scarf.css

Create the css directory and paste some style code into the scarf.css file in it:

mkdir css
echo '#content {background: red;}' >> css/scarf.css

Logo and template files

Copy the logo and template files from Bartik:

cp ../core/themes/bartik/logo.svg .
cp -R ../../core/themes/bartik/templates/ .

Enable your new sub-theme

Finally, go to the /admin/appearance page on your website's UI and enable your new sub-theme.

Disable Drupal 8 caching during development

Running the drupal site:mode dev command should do, however if it does not, then follow instructions on https://www.drupal.org/node/2598914