Droost Theme

Droost Theme is the theme layer of the ecosystem, designed so an AI agent (or a human) can restyle a whole site by editing data, with no build pipeline in the way.

Tailwind CSS v4 + daisyUI semantic components: btn btn-primary, card, hero, navbar, stats, alert, available in any template.
Design tokens as editable CSS. css/tokens.css holds the daisyUI theme variables (--color-primary, --color-base-100, --radius-box, and the rest). Rebranding the site is an edit to this one file.
A Canvas-clean component library. 21 single-directory components (hero, card, button, section, grid, stats and stat, steps and step, tabs and tab, timeline and timeline item, carousel and slide, faq item, avatar, rating, radial progress, code, text) with prop schemas strict enough for Drupal Canvas and UI Patterns.

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 the brand".
Component classes: daisyUI's vocabulary in templates.
Utility classes: any Tailwind utility in Twig or component markup.

Never edit assets/vendor/*, the vendored runtimes.

Two CSS modes

The theme delivers Tailwind + daisyUI one of two ways, chosen per site by the css_mode theme setting (Appearance → Droost Theme → CSS delivery, or drush cset droost_theme.settings css_mode <mode>):

Mode	What it is	Use it for
`compiled` (default)	`css/droost_theme.css`, built by `npm run build` from `css/src/droost_theme.css` and committed, so installing the theme never needs node. Every daisyUI component class is in it; utilities are the ones found in the theme's templates, components and PHP. No runtime JavaScript, no flash of unstyled content, nothing for a Content-Security-Policy to allow.	Production. Any public site.
`jit`	The Tailwind browser runtime plus vendored daisyUI: any utility class in any template works immediately, with no build step and no safelist.	Development, and agent-driven restyling.

The honest trade-off: the compile only knows the sources it scanned. A utility that appears only in another module's markup is not in the production stylesheet. Add an @source line to the entry file and rebuild, or leave that site on jit. daisyUI component classes are never affected.

bash

npm install
npm run build        # css/droost_theme.css — commit the result
npm run watch        # while editing templates or components

css/tokens.css loads after the compiled stylesheet in both modes, so the brand-editing loop is unchanged and still build-free.

Restyling without editing contrib

Tokens live in themes/contrib, so editing them in place works right up until composer update reverts the brand. The durable path is a subtheme of three short files:

yaml

# web/themes/custom/mysite/mysite.info.yml
name: 'My Site'
type: theme
base theme: droost_theme
core_version_requirement: ^10.3 || ^11 || ^12
libraries:
  - mysite/tokens

yaml

# web/themes/custom/mysite/mysite.libraries.yml
tokens:
  css:
    theme:
      css/tokens.css: {}
  dependencies:
    - droost_theme/global    # load-bearing: forces the base stylesheet out first

Copy the :root, [data-theme='droost'] block from the base theme's css/tokens.css into your own, change the values you need, then:

bash

drush theme:install mysite
drush config:set system.theme default mysite

Regions, templates and components are inherited. To override one, copy it into the same relative path in the subtheme; Drupal prefers the subtheme's copy. This is the exact shape droost.org uses.