Install and Uninstall Themes for Drupal 8 and Drupal 9

Last updated July 2, 2020
Theming8.9.x/9.0.x

Themes are enabled, and disabled, via the user interface.

In this tutorial we'll learn to:

  • Install a theme and make it the default
  • Differentiate between installed themes, default themes, and uninstalled themes
  • Use an administration theme for the administration section of our site

Goal

Understand how to download, install, and uninstall a theme.

Prerequisites

Video walk-through

This video from the Drupal 8 User Guide: 11.5. Downloading and Installing a Theme from Drupal.org demonstrates how to download and install a theme from Drupal.org.

Downloading and Installing a Theme from Drupal.org

Update: Using Drush to enable a theme

In the community Drupal User Guide video, drush en THEMENAME is demonstrated, but it no longer works.

Enable a theme using Drush

drush theme:enable THEMENAME

(Substitute THEMENAME with the machine name of your theme, for example, bartik or claro.)

Set the theme as the default using Drush

drush config:set system.theme default THEMENAME --yes

Example

For example, to enable the Drupal theme Claro and set it as the default using Drush:

drush theme:enable claro
drush config:set system.theme default claro --yes

Download a theme

New themes can be either custom themes that you create, or themes downloaded from Drupal.org. Before a theme can be installed, its files need to be placed into the /themes directory in the root of your Drupal project in a place where Drupal can find them.

Download a contributed theme

Follow these steps if you have already downloaded the core software via Composer, and you want to use Composer to add a contributed module or theme with its dependencies.

  1. Each time you want to add a contributed theme, determine the project's short name. This is the last part of the URL of the project page; for example, the theme MAYO module, at https://www.drupal.org/project/mayo, has short name mayo.
  2. To download the contributed theme, along with its external dependencies, enter the following command at the root of your project (where your project's composer.json file lives) and substitute the short name of the theme for mayo:
composer require drupal/mayo

Optionally, download a theme .zip, or .tar.gz file from Drupal.org. Unzip the the archive file, and copy the resulting directory to your project's /themes/contrib folder. See the User Guide 11.6. Manually Downloading Module or Theme Files for instructions.

Adding a custom theme

Alternately, copy the files for your custom theme into your Drupal project's /themes/custom directory.

For more information about the location of a theme and its files see Structure of a Theme.

Install a theme

Change the theme that users see when they are viewing your site.

Log in

Log in as an administrator, or another user who has permission to administer themes.

Open the Appearance page

In the Manage administrative menu, navigate to Appearance (admin/appearance). This is the primary location for configuring themes and their settings.

Locate the theme

Locate the theme that you would like to enable from the list of themes on the Appearance page.

Set as default

If the theme is already installed, click the link labeled Set as default.

Or install and set as default

If the theme is not currently installed, click the Install and set as default link for the theme that you want use.

Verify it worked

Navigate to the homepage, or any other public-facing page on your site, and you should see that your new theme is active.

Uninstall a theme

Change the theme that users see when they are viewing your site. You must always have at least one theme installed and set as default.

Log in

Log in as an administrator, or another user who has permission to administer themes.

Open the Appearance page

In the Manage administrative menu, navigate to Appearance (admin/appearance).

Locate the theme

Locate the theme that you would like to uninstall in the list of installed themes on the Appearance page.

Uninstall the theme

Click on the link labeled Uninstall next to the theme to be disabled.

Verify it worked

You should see a message at the top of the page that says, "The configuration options have been saved."

Installed vs. uninstalled and default

When you navigate to Appearance (admin/appearance), you'll notice the page is divided into two sections: installed themes, and uninstalled themes.

It's possible to have more than one theme enabled at a time, but only one can be the default theme. For most sites, the default theme is the one that the general public will see when visiting the site.

In most cases you're likely to only have two themes installed: one used for the end-user facing portion of your website, and an administration theme.

Administration themes

Generally, you don't need the same flashy interface for your administrators as you do for your users. Instead, administrators want an interface that allows them to quickly and easily accomplish administration tasks in a consistent and user-friendly way.

Drupal allows you to designate a separate theme as the "administration theme." This theme will be used when displaying any administration pages -- for the most part, anything that starts with admin/ in the path. It may also be used for adding content and editing pages.

By default, Drupal uses the Seven administration theme that comes with core. However, should you want to change it, you can do so by following these steps.

Changing the administrative theme

Install the theme

Install the theme as per the instructions above, but instead of setting it to the default theme in this case you only need to click the Install link.

Choose an administration theme

In the Manage administrative menu, navigate to Appearance (admin/appearance). Scroll to the bottom of the page to find the section where you may choose an Administration theme. Use the dropdown list to choose any installed theme.

Tip: Many contributed themes are specifically designed as administrative themes. You might get the best results selecting a theme optimized for administrative pages.

Save configuration

Select Save configuration to save your changes and use the new administrative theme. You should see a message at the top of the page that says, The configuration options have been saved. And you should notice a that the Appearance page now uses the theme you selected as an administrative theme.

Recap

In this tutorial, we walked through downloading, installing, and uninstalling a theme in Drupal. We also discussed how to change the administrative theme.

Further your understanding

  • What is the difference between a theme that's installed, and a theme that is set as the default?
  • When are non-default themes used?
  • Where does Drupal look for themes that it can install? Learn about the Structure of a Theme to understand more about the use-case for putting your code into each of these various locations.

Additional resources