> For the complete documentation index, see [llms.txt](https://www.nl-portal.nl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.nl-portal.nl/4.x/configuratie/eigen-vormgeving.md). # Eigen vormgeving NL Portal is opgebouwd met componenten gebaseerd op het [NL design system](https://nldesignsystem.nl/). Om je eigen NL Portal vorm te geven volgens de huisstijl kun je designtokens gebruiken. Designtokens zijn kleine stukjes van het designsysteem die ontwerpbeslissingen vertegenwoordigen zoals kleuren en lettertypes. ![eigen-vormgeving](https://3084050308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTe2nT6doitVIY57twWxT%2Fuploads%2Fgit-blob-3edf5116aa91dd2c8fccd05e07525d9c6e0c7359%2Feigen-vormgeving.png?alt=media)*Drie verschillende klantportalen met verschillende vormgeving door middel van design tokens* ## Via het Configuration Panel De eenvoudigste manier om de huisstijl aan te passen is via het [Configuration Panel](/4.x/configuratie/configuration-panel.md). Hiermee kun je zonder code aan te passen: * **Logo uploaden** — vervang het standaard logo door je eigen organisatielogo * **Design tokens aanpassen** — pas kleuren, typografie en andere stijlen aan via de ingebouwde CSS-editor In het Configuration Panel ga je naar de **Theme** sectie. Onder **Logo** kun je een afbeelding uploaden. Onder **Style** vind je een CSS-editor waarin je design tokens kunt toevoegen of overschrijven. Een voorbeeld van een design token: ```css --nlportal-header-bar-background-color: #03801f; ``` Hiermee wordt de kleur van de header bar ingesteld op #03801f. Zie de [Configuration Panel](/4.x/configuratie/configuration-panel.md) pagina voor het opzetten van het Configuration Panel. ## Een thema activeren met een theme class Een NL Design System-thema wordt geactiveerd met een class op het root-element. Zet de feature-eigenschap `nl-portal.config.features.properties.theme-class` (env: `NLPORTAL_CONFIG_FEATURES_PROPERTIES_THEMECLASS`) op de naam van je thema, bijvoorbeeld `denhaag-theme`. De frontend plaatst die class op het ``-element, conform de [NL Design System-richtlijn](https://nldesignsystem.nl/handboek/developer/thema-maken/) dat de theme class op `` (of ``) hoort, zodat de token-overrides in het hele document doorwerken. Dit staat los van de CSS-editor hierboven: die injecteert je token-overrides rechtstreeks. Schrijf die overrides op `:root` als je geen benoemd thema gebruikt; `theme-class` is alleen nodig wanneer je CSS onder een thema-class is gescoped. ## Design tokens vinden De makkelijkste manier om te achterhalen met welk design token je een bepaald component kunt instellen is door in de [developer toolbar](https://developer.chrome.com/docs/devtools/overview) met de inspector te kijken. ![design-token-voorbeeld](https://3084050308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTe2nT6doitVIY57twWxT%2Fuploads%2Fgit-blob-e3657ad2295da7baefd976215e3d1c50e056b8af%2Fdesign-token-voorbeeld.png?alt=media)*Een voorbeeld van het designtoken nlportal-current-page-indicator-background-color* In het voorbeeld hierboven is een knop geselecteerd. In het omcirkelde deel is zichtbaar dat de achtergrondkleur van de knop wordt ingesteld met het designtoken `nlportal-current-page-indicator-background-color`. ## Geavanceerd: eigen vormgeving via code Als je de vormgeving wilt beheren in versiebeheer of meer controle nodig hebt, kun je de design tokens ook aanpassen in een fork van de [NL Portal monorepo](https://github.com/nl-portal/nl-portal). Ga naar het bestand `frontend/packages/app/src/styles/nl-portal-design-tokens.css` en voeg je eigen designtokens toe die de standaard waardes overschrijven. Bouw vervolgens je eigen images met `RUN_MODE=local docker compose --profile zgw --profile haalcentraal up -d --build`. Zie [Opzetten NL Portal](/4.x/configuratie/opzetten-nl-portal.md) voor meer informatie over het forken en bouwen van eigen images.