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


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


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

Create the and paste:

name: Scarf
type: theme
description: This is a sub-theme of theme Bartik.
core: 8.x
base theme: bartik
  - scarf/styles
  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'


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

      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

We value your opinion. Please add your feedback.

Filtered HTML

  • Allowed HTML tags: <h2> <h3> <h4> <h5> <h6> <del> <ins> <img> <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <iframe> <span> <sup> <div> <table> <thead> <th> <tbody> <tr> <td> <video> <hr>
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Global tokens will be replaced with their respective token values (e.g. [site:name] or [current-page:title]).
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.