Theming

Themes control everything Drupal renders. This section opens with a flagship six-part tutorial that builds a complete theme component-first, using single-directory components (SDC), and continues with how-to guides for the front-end tasks every project needs. To learn how render arrays become HTML, read the render and theming pipeline concept first.

Tutorial: build your first themeSix parts from starterkit to shipped theme: Twig and template suggestions, asset libraries, a card component with props and slots, JavaScript with once(), and theme settings.

Twig in DrupalTemplates, template suggestions, the variables Drupal provides, preprocessing, and debugging with Twig's dev mode.

Single-directory componentsSelf-contained components with component.yml, props, slots, and how to embed them from templates and render arrays.

Asset librariesAttach CSS and JavaScript the Drupal way: *.libraries.yml, dependencies, conditional attachment, and overrides.

JavaScript behaviorsWrite JavaScript that survives AJAX and BigPipe with Drupal.behaviors and once(), and pass settings from PHP.

LayoutsThe Layout API from a themer's perspective: regions, layout plugins, and template overrides.

Images and mediaResponsive images, image styles, and rendering media entities without fighting the field formatter system.