Detail page: a per-route theme

This entire page: header, footer, and content uses the Rijkshuisstijl Community theme instead of this project's default start-theme. The rest of the site keeps its own theme, so this page lives in its own route group, app/(detail)/, with its own root layout, app/(detail)/layout.tsx, that applies the rhc-theme class and imports @rijkshuisstijl-community/design-tokens instead.

How to change themes

A theme is just a design tokens package plus a class name. To use a different one:

Install the design tokens package for the theme you want.
```
pnpm add @rijkshuisstijl-community/design-tokens
```

Import its CSS once, wherever you apply the theme.

import '@rijkshuisstijl-community/design-tokens/dist/index.css';

Apply the theme's class name to whichever element should carry it. For a single, global theme, that's the <html> element in app/layout.tsx.

Every theme documents its own class name and token package — check the theme's README instead of assuming rhc-theme or start-theme apply universally.

Themes created by governments are proprietary and may only be used by them. The NL Design System has several themes that you can use as a starting of point for your own theme or to play around with:

For getting started
@nl-design-system-unstable/start-design-tokens
An example theme
@nl-design-system-unstable/voorbeeld-design-tokens

How to add custom CSS variables

Most components have defined their own custom tokens. So you can easily overwrite them to create your own theme. For this page several CSS variables have been overwritten. Have a look in /app/(detail)/detail/detail.css.