Droost Theme

What it is

Droost Theme is an agent-first base theme: it is built so an AI coding agent (or a person) can restyle a whole site by editing data, with no build pipeline in the way. It is the theme layer of the Droost ecosystem and the default theme of the Droost CMS recipe.

• Tailwind CSS v4 via the browser JIT runtime. Every utility class works immediately in development: no build step, no safelist, no purge.
• daisyUI semantic components. btn btn-primary, card, hero, navbar, stats, alert and the rest, available in any template.
• Design tokens as editable CSS. css/tokens.css holds the daisyUI theme variables (--color-primary, --color-base-100, --radius-box). Rebranding the whole site is an edit to that one file.
• A Canvas-clean SDC library. 21 Single Directory Components (hero, card, button, section, grid, stats, steps, tabs, timeline, carousel, and more) with prop schemas strict enough for Drupal Canvas and UI Patterns formatters.

Use this if you are using Droost

Droost Theme is designed to be driven by a Droost agent: tokens, daisyUI classes and SDCs are exactly the surface Droost styles a site through. It is a companion to Droost, and that is where we recommend it. On its own it is a competent Tailwind and daisyUI base theme, but without Droost you are maintaining by hand what Droost automates, and you would likely be happier with a general-purpose base theme. If you are building with Droost, this is the theme meant for it.

The three styling layers

Edit the highest layer that solves the problem:

• Tokens (css/tokens.css): palette, radii, surfaces. The right layer for "make it feel like our brand".
• Component classes: daisyUI's vocabulary in templates.
• Utility classes: the runtime generates any Tailwind utility on demand in Twig or component markup.

Rebranding that survives composer update

Editing css/tokens.css in themes/contrib works right up until composer update reverts it. The durable path is a subtheme: it keeps everything this theme exists for (the same tokens, the same daisyUI vocabulary, still no build step) while the file you edit lives in your own repository. The README walks through the three short files a subtheme needs, including the one non-obvious requirement (regions are not inherited, so restate them).

Production CSS, no Node required to install

The theme delivers Tailwind and daisyUI two ways, chosen per site by the css_mode setting:

• compiled (default, production): css/droost_theme.css is built and committed, so installing the theme never needs Node. No runtime JavaScript, no flash of unstyled content, nothing for a Content-Security-Policy to allow.
• jit (development): the Tailwind browser runtime plus vendored daisyUI, the build-free mode that lets an agent use any utility class in any template immediately.

Install

composer require 'drupal/droost_theme:^1.0@alpha'
drush theme:install droost_theme
drush config:set system.theme default droost_theme

Block placements (branding, main menu, messages, local tasks, title) ship as config/optional. The Droost CMS recipe installs and defaults this theme for you, so a recipe-built site gets it without these steps.

Requirements

Drupal 10.3+, 11 or 12; PHP 8.3+. No Node is required to install (the production stylesheet is committed); Node is only needed if you rebuild the compiled CSS yourself.

The ecosystem

• Droost is the brain and the tools an AI agent drives: introspection, code and semantic search, the build surfaces, and the plan, code, test, complete workflow.
• Droost Theme (this project) is the theme layer those agents style through tokens, daisyUI and SDCs.
• Droost CMS is the recipe that composes Droost and this theme onto Drupal CMS in one apply.