The legacy method of creating a subtheme from a core base theme like Classy meant your site inherited years of technical debt and markup quirks. Drupal 10 introduces the Starterkit command-line tool to solve this. Why Abandon Traditional Sub-theming?
get('body')->value); } } /** * Internal helper to calculate reading time duration. */ function _my_modern_theme_calculate_read_time(?string $text): int if (empty($text)) return 1; $word_count = str_word_count(strip_tags($text)); return (int) ceil($word_count / 200); // Standard speed: 200 words per minute Use code with caution. 9. Accessibility (a11y) Best Practices in Drupal 10
To get the most out of modern Drupal 10 theme development, follow these best practices: modernizing drupal 10 theme development pdf
To successfully transition into modern Drupal 10 theme architectures, audit your development lifecycle using the following checklist: Legacy Workflow Modern Workflow (Drupal 10) MAMP / Local System PHP Isolated Docker containers via Ddev / Lando Theme Design Monolithic global template blocks Single Directory Components (SDC) Asset Gathering Asset compilation with Webpack / Gulp Lightning-fast native ES compiling via Vite JavaScript Standard Deeply embedded jQuery wrappers Clean ECMAScript 6 modules with native core/once Layout Building Hardcoded regions inside templates Layout Builder combined with SDC entities
To integrate Vite, create a standard package.json in your custom theme directory and install the necessary dependencies: The legacy method of creating a subtheme from
right-click and save the local copy: modernizing_drupal_10_theme_development_2025.pdf (5.2 MB)
Create a folder named src/components/card/ . Inside, create three files: card.component.yml , card.twig , and card.css . 1. card.component.yml (Metadata) get('body')->value); } } /** * Internal helper to
my_modern_theme/ ├── my_modern_theme.info.yml ├── my_modern_theme.libraries.yml ├── my_modern_theme.theme ├── config/ │ └── install/ │ └── my_modern_theme.settings.yml ├── dist/ (Compiled assets) │ ├── css/ │ └── js/ ├── src/ (Source assets) │ ├── css/ │ └── js/ ├── templates/ (Global layout overrides) │ ├── layout/ │ └── navigation/ └── components/ (Single Directory Components) └── card/ ├── card.component.yml ├── card.twig └── card.css Use code with caution.
Using native PHP or disparate local server installations introduces environment drift. Instead, use Docker-based local development tools like , Lando , or Docksal . Ddev is highly optimized for Drupal 10 and includes native support for modern Node.js versions out-of-the-box. Key Tools to Install
To generate a clean custom theme base using Drush or the Drupal console, navigate to your root directory and run the built-in PHP script script: php core/scripts/drupal generate-theme my_custom_theme Use code with caution.
Replaces the starterkit_theme machine name with my_modern_theme .