🎨 How to Create a Custom Drupal 10 Theme Using the Olivero Base Theme
🟢 Introduction
Drupal 10 brings with it modernized frontend tools, cleaner code, and recommended theming practices — including using Olivero, its sleek, responsive, and accessibility-focused default theme.
If you’re building a website and want full control over your design, creating a custom theme is the way to go. In this blog, we’ll walk you through creating a basic custom theme in Drupal 10, based on Olivero. This guide is perfect for developers and site builders looking to start with a reliable base and build their brand’s visual identity from there.
🧱 Step 1: Create Your Custom Theme Folder
First, navigate to your Drupal project directory and create your theme folder:
cd web/themes/custom
mkdir mytheme
cd mytheme🗂 Step 2: Create the .info.yml File
This file tells Drupal how to recognize and use your theme.
Create a file called mytheme.info.yml with the following content:
name: MyTheme
type: theme
description: 'A basic custom theme for Drupal 10'
package: Custom
core_version_requirement: ^10
base theme: olivero
libraries:
- mytheme/global-styling
regions:
header: Header
primary_menu: 'Primary Menu'
content: Content
sidebar_first: 'Sidebar First'
sidebar_second: 'Sidebar Second'
footer: Footer🔍 What this does:
- Declares
oliveroas the base theme (included in Drupal 10 by default). - Registers layout regions like
header,content,footer, etc. - Points to a custom CSS/JS library.
🎨 Step 3: Add Styles and Scripts with libraries.yml
Create a mytheme.libraries.yml file:
global-styling:
css:
theme:
css/style.css: {}
js:
js/script.js: {}
dependencies:
- core/jqueryThis file tells Drupal which CSS/JS files to load with your theme.
📁 Step 4: Add CSS and JavaScript Files
Create the necessary folders and files:
mkdir css js
touch css/style.css js/script.jscss/style.css
body {
background-color: #f5f5f5;
font-family: sans-serif;
}js/script.js
(function ($, Drupal) {
Drupal.behaviors.myThemeBehavior = {
attach: function (context, settings) {
console.log('MyTheme JS is working!');
}
};
})(jQuery, Drupal);🧾 Step 5: Add a Basic Template (Optional)
Templates define your site’s HTML structure. Start by adding a page template.
mkdir templatestemplates/page.html.twig
<!DOCTYPE html>
<html>
<head>
<head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body>
{{ page.header }}
{{ page.primary_menu }}
<main role="main">
{{ page.content }}
</main>
{{ page.footer }}
<js-bottom-placeholder token="{{ placeholder_token }}">
</body>
</html>This template gives you full control over how pages are structured in your theme.
🚀 Step 6: Enable Your Theme
You can enable your theme either through the admin panel or using Drush:
drush theme:enable mytheme
drush config:set system.theme default mytheme
drush crThen visit your site to see your theme live!
✅ Summary
You’ve now created a fully functional custom theme in Drupal 10 using the Olivero base theme. Here’s a quick recap of what we did:
| Step | Description |
|---|---|
| 1 | Created a theme folder under themes/custom/ |
| 2 | Created the .info.yml to register the theme |
| 3 | Defined styles and scripts with libraries.yml |
| 4 | Added simple CSS and JS files |
| 5 | Optionally created a custom page.html.twig layout |
| 6 | Enabled the theme using Drush or UI |
Using Olivero as your base gives you a clean, responsive, and accessible foundation. You can now start extending it with your brand’s colors, layouts, components, and more.
Download from Github
