Drupal Themes — Installing, Managing and Configuring Themes

In this tutorial, you'll learn how to install, manage, and configure themes in Drupal — from finding contributed themes on Drupal.org to safely switching between themes and managing theme settings.

What You'll Learn

• Finding and evaluating contributed themes on Drupal.org
• Installing themes via the admin interface and Composer
• Configuring theme settings including logo, favicon, and layout
• Switching between themes safely without losing content
• Managing default and admin themes separately

Why It Matters

Your site's appearance is the first thing visitors notice. Drupal's theme system separates content from presentation, letting you change the entire look of your site without touching your content. Knowing how to find, install, and manage themes gives you the freedom to experiment with different designs and find the perfect fit for your project. Equally important is knowing how to switch themes safely — a wrong move can temporarily break your layout or hide content.

Real-World Use

A marketing agency launches Drupal sites for small business clients. They use a consistent base theme for all projects but install different child themes for each client's branding. When a client wants a design refresh, the agency installs and configures a new theme while the site remains live. The content stays intact because it is stored separately from the theme. The agency tests the new theme on a staging environment first, then switches the default theme during a scheduled maintenance window.

Learning Path

flowchart LR
  A[Theme Anatomy] --> B[Installing Themes]
  B --> C[Twig Templating]
  C --> D[Sub-themes]
  D --> E[Template Suggestions]
  E --> F[Asset Libraries]
  F --> G[Module Management]
  G --> H[Essential Modules]

Finding Themes

The Drupal.org theme directory is the primary source for contributed themes. Each theme has a project page with screenshots, documentation, release history, and usage statistics.

What to Look For

When evaluating a theme, check these factors:

Maintenance status — themes with recent releases (within the past year) are actively maintained. Check the issue queue for unresolved bugs.

Usage statistics — themes with thousands of installations are more likely to be stable and well-supported.

Drupal version compatibility — ensure the theme supports your Drupal version (10 or 11).

Base theme — many themes are sub-themes of Bootstrap 5, Olivero, or Stable 9. The base theme affects customization options.

Dependencies — some themes require specific modules. Check the dependencies listed on the project page.

Popular Contributed Themes

• Bootstrap 5 — responsive framework with Bootstrap components
• Gin — modern admin theme alternative
• Adminimal — lightweight admin theme
• Zircon — clean, accessible front-end theme
• Material Admin — Google Material Design for admin

Installing via Admin Interface

The simplest way to install a theme for beginners:

1. Go to Appearance on the admin toolbar
2. Click "Install new theme" at the top of the page
3. Enter the Drupal.org project URL or upload a .tar.gz file
4. Click "Install"

Drupal downloads the theme from Drupal.org and places it in themes/contrib/.

# Note: The admin install method requires the Update Manager module
# and server ability to download remote files.

Installing via Composer

For production sites, use Composer. This method handles dependencies automatically and integrates with your project's version control.

# Search for a theme:
composer search drupal/bootstrap5

# Install a theme:
composer require drupal/bootstrap5

# Install a specific version:
composer require drupal/bootstrap5:^5.0

# Install a theme with its dependencies:
composer require drupal/bootstrap5 drupal/bootstrap_library

Installing Multiple Themes

# Install multiple themes at once:
composer require drupal/gin drupal/adminimal_theme drupal/bootstrap5

Enabling Themes

After installation, you must enable the theme on the Appearance page:

1. Go to Appearance
2. You will see three sections: Default theme, Admin theme, and Installed themes
3. Click "Install and set as default" to make a theme the default front-end theme
4. Click "Install" to make it available but not active

# Enable a theme via Drush:
drush theme:enable bootstrap5

# Set a theme as default:
drush config-set system.theme default bootstrap5

Default and Admin Themes

Drupal lets you use different themes for the front end and admin interface.

Default theme — the theme visitors see when browsing the site.

Admin theme — the theme displayed on admin pages (usually Claro or Gin).

# Set the admin theme:
drush config-set system.theme admin gin

# Check current themes:
drush config-get system.theme
# Output:
# admin: gin
# default: bootstrap5

Using a lightweight admin theme like Claro or Gin improves admin panel performance. Your default front-end theme can be heavier with images and animations since only visitors see it.

Theme Settings Page

Each theme has a settings page where you customize its appearance without editing code:

1. Go to Appearance
2. Click "Settings" beside the theme name

Common Settings

Logo — toggle between the theme's default logo and a custom uploaded logo.

# Theme logo settings:
logo:
  use_default: true
  path: 'public://logo.png'
  upload: ''

Favicon — upload a custom favicon or use the theme default.

# Favicon settings:
favicon:
  use_default: true
  path: ''
  mimetype: image/png

Layout — some themes offer layout options like full-width vs boxed, sidebar position, or header style.

# Example layout settings:
layout:
  container_width: 1200
  sidebar_position: left
  header_style: sticky

Custom Theme Settings

If the theme provides a .schema.yml file, additional settings appear automatically. These are defined by the theme developer:

# Custom settings from schema.yml:
settings:
  font_family: Inter
  primary_color: '#0044cc'
  show_social_icons: true

Switching Themes Safely

Changing a theme can affect your site's layout and block placement. Follow these steps to switch safely:

Pre-Switch Checklist

Each theme may have different region names. Blocks assigned to a sidebar region in one theme will not appear if the new theme calls that region right_sidebar. Before switching, note which blocks are placed in which regions.

Content is stored in the database, not the theme. You will not lose nodes, taxonomy, or other content when switching themes. Blocks may seem to disappear if their assigned region does not exist in the new theme.

Switching Process

1. Test the new theme on a staging environment first
2. Document current block placement for the old theme
3. Switch the default theme on the Appearance page
4. Visit the site to verify the layout
5. Reassign blocks to the new theme's regions as needed
6. Test key pages: homepage, article page, contact page, search results

# Quick theme switch with Drush (useful for testing):
drush config-set system.theme default gin -y

# Revert to previous theme:
drush config-set system.theme default bootstrap5 -y

Theme Updates

Keep your themes updated for security patches and compatibility fixes.

# Check for theme updates:
composer outdated drupal/bootstrap5

# Update a theme:
composer update drupal/bootstrap5

# Run database updates if needed:
drush updatedb

Base Themes

A base theme provides foundational templates and CSS that other themes build upon.

Stable 9 — Drupal's default base theme. Extremely minimal. Good for performance but requires more custom work.

Olivero — Drupal 10's default front-end theme. Can be used as a base theme for sub-themes.

Classy — provides more default styling than Stable. Useful for prototyping.

Stark — minimal, unstyled base theme. Used for debugging.

# Example .info.yml using a base theme:
name: 'My Sub-theme'
type: theme
core_version_requirement: ^10 || ^11
base theme: olivero
libraries:
  - my_subtheme/global

Theme Dependencies

Some themes depend on specific modules. Drupal handles this automatically during installation.

# Theme that depends on a module:
dependencies:
  - drupal:responsive_image
  - drupal:media
  - drupal:media_library

# When installing via Composer, dependencies are handled:
composer require drupal/bootstrap5
# This also installs bootstrap_library if needed.

Common Mistakes

1. Not testing themes in staging: Switching themes in production without testing can break layouts, hide blocks, or introduce styling conflicts. Always test on a staging environment first.

2. Ignoring block region differences: Different themes use different region names. Blocks assigned to regions that do not exist in the new theme disappear. Document block placement before switching.

3. Using Composer and admin installation together: Mixing installation methods creates conflicts. Use Composer exclusively on production sites for consistent dependency management.

4. Forgetting to clear cache after theme changes: Drupal caches CSS, JavaScript, and template information. Always run drush cr after installing or switching themes.

5. Choosing feature-heavy themes for simple sites: A theme with hundreds of options and dependencies adds maintenance overhead. Choose a theme proportional to your site's complexity.

Practice Questions

1. What is the difference between the default theme and the admin theme in Drupal, and why would you use separate themes?

2. How do you safely switch between themes without losing block placement? What happens to blocks when the region names differ?

3. What are the advantages of installing themes via Composer instead of the admin interface?

4. Challenge: Plan a theme management workflow for a multi-site Drupal setup. Describe how you would install a consistent base theme across all sites, manage theme updates centrally, handle per-client customizations through sub-themes, and safely push theme changes from staging to production.

FAQ

Mini Project

Goal: Install, configure, and switch between two themes.

1. Install Bootstrap 5 theme via Composer
2. Install Gin admin theme via Composer
3. Enable both themes on the Appearance page
4. Set Bootstrap 5 as the default theme
5. Set Gin as the admin theme
6. Configure Bootstrap 5's settings: upload a custom logo and favicon
7. Place a few blocks in the new theme's regions (header, sidebar, footer)
8. Temporarily switch the default theme to Olivero and observe block placement changes
9. Switch back to Bootstrap 5 and confirm blocks reappear
10. Clear cache after all changes

What's Next

Now that you can install and manage themes, proceed to Twig templating to learn how Drupal renders templates. After that, explore creating sub-themes to customize base themes.