@claus
So first, addonsThemeCustomizationsVariables is used by Volto to load CSS Variables from Addons. Normaly this should just stay where it is.
My Node Version is also 20 and pnpm also at 9.1.1
As a reminder you can setup Node very quick to let Node choose the Packetmanager for you, so Node will see that Plone/Volto uses pnpm and pick it automatically. It will ask to install pnpm during make install when you do it the first time. (See Docs Node installation: Node Setup)
Back to the problem. I installed a fresh Plone 6.1 Installation and add VLT and it worked, so i want to share my process below with you. Its a bit of text and if you have Plone already installed as below just read through it.
Fresh Install Setup for Plone 6.1
Instruction based of Install Plone with Cookieplone — Plone Documentation v6
Prerequisites
Setup the Prerequisites as stated in the docs Install Plone with Cookieplone — Plone Documentation v6. (The link highlights the section so you know which part i mean)
Install Plone with cookieplone
- Run the commmand in the directory you want the plone directory created:
pipx run cookieplone
You will be presented with a series of prompts. You can accept the default values in square brackets ([default-option]) by hitting the Enter key, or enter your preferred values. For us now just fill in the Project Title. I used "Demo Plone" here so my project folder will be "demo-plone" and my frontend package is called "volto-demo-plone" so you have better understanding of the screenshots.
- Navigate into the new Folder (For me:
cd demo-plone)
- Run the command
make install
Start Backend and Frontend for quick check
Run the following commands, each command in is own shell session:
Shell 1 for Backend: make backend-start
Shell 2 for Frontend: ```make frontend-start``it
Screenshot 1:
You should have a running default Plone 6.1 Instance with Volto 18
You can access it at http://localhost:3000
Install Volto Light Theme (VLT)
- Add the Dependencies to the
package.json in frontend/packages/volto-demo-plone
package.json:
...
"dependencies": {
"@eeacms/volto-accordion-block": "^10.4.6",
"@kitconcept/volto-button-block": "^3.0.2",
"@kitconcept/volto-dsgvo-banner": "^2.3.2",
"@kitconcept/volto-heading-block": "^2.4.0",
"@kitconcept/volto-highlight-block": "^4.0.0",
"@kitconcept/volto-introduction-block": "^1.0.0",
"@kitconcept/volto-separator-block": "^4.1.2",
"@kitconcept/volto-slider-block": "^6.3.1",
"@kitconcept/volto-light-theme": "^5.0.1"
},
...
- Add the Addons to the
package.json in frontend/packages/volto-demo-plone (So we can use them in Volto otherwise we wouldnt the the Blocks in the Frontend, they would only be a dependency used at a technical layer.)
Warning:
In the Addon list, the order of it has a meaning. Every Addon overwrites the addons before it. Your policy add-on should be the last one, so that it overrides any previous ones. @kitconcept/volto-light-theme should be the second-last, placed immediately before your policy add-on.
package.json:
"addons": [
"@eeacms/volto-accordion-block",
"@kitconcept/volto-button-block",
"@kitconcept/volto-dsgvo-banner",
"@kitconcept/volto-heading-block",
"@kitconcept/volto-introduction-block",
"@kitconcept/volto-highlight-block",
"@kitconcept/volto-separator-block",
"@kitconcept/volto-slider-block",
"@kitconcept/volto-light-theme",
"volto-demo-plone"
],
- Declare the Volto Light Theme in
volto.config.js
volto.config.js:
const addons = ['volto-demo-plone'];
const theme = '@kitconcept/volto-light-theme';
module.exports = {
addons,
theme
};
Screenshot 2:
- Run
make install to get the dependencies ect.
- Start the Backend and Frontend with
make backend-start and make frontend-start
Now you should have a Plone Instance running at http://localhost:3000 with Volto Light Theme installed.
Screenshot 3:
PS: Sry for the long post and the spelling/grammar errors 
