Create a sub-theme of Bartik in Drupal 8/9

When developing a new Drupal theme, instead of starting from scratch you could either go with one of starter themes with a 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 8 enabled by default.

Create a sub-theme of Bartik

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:
    component:
      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