Help make a theme for plone

Plone Support Customizing Plone
,
1

I need to make a custom volto theme add-on for a project but I cant seem to figure out how to actually load the custom theme into plone. I haven't found anything about where the theme directory needs to be nor what I need to do for plone to recognize the theme.

I have tried putting my theme files inside the packages folder of the frontend but that didn't do anything and adding the theme inside the volto.config.js just makes the frontend crash on startup.

Can anyone tell me where I can find that information or show me where I need to put the files?

Any help would be appreciated, thanks in advanced.

2

Did you know we have trainings around like this one? It contains also installation instructions.

This training is going much deeper, including theming and installation:

Does it help?

3

Thank you for those trainings.

But I still cant seem to figure it out, every time I configure a theme it gives me an error when trying to start the frontend.

4

Here is the error message

ERROR Unexpected error

TypeError: Cannot read properties of undefined (reading 'modulePath')
at defaultModify (/home/plone/test-plone/frontend/core/packages/volto/razzle.config.js:331:57)
at modifyWebpackConfig (/home/plone/test-plone/frontend/core/packages/volto/razzle.config.js:448:27)
at /home/plone/test-plone/frontend/node_modules/.pnpm/razzle@4.2.18_@babel+core@7.26.0_babel-preset-razzle@4.2.18_eslint@8.57.1_html-webpack-plugin_5puuquf5agmxxuxr4jbd7oeuvq/node_modules/razzle/config/createConfigAsync.js:1069:22
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
/home/plone/test-plone/frontend/core/packages/volto:
ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL @plone/volto@18.4.0 start: make build-deps && razzle start
Exit status 1
ELIFECYCLE Command failed with exit code 1.
make[1]: *** [Makefile:45: start] Error 1
make[1]: Leaving directory '/home/plone/test-plone/frontend'
make: *** [Makefile:51: frontend-start] Error 2

5

Please give us more context. We don't know what your environment is (OS, Python and other versions), which instructions you tried to follow, nor which commands ran successfully just before the error.

6

Im on Windows 11 using WSL (Windows subsystem for linux) to run the plone installation.

Python 3.12

I was following the trainings from the Plone dokumentation (I cant include links in my post, thats why i didnt share them before.

All the commands need to setup plone worked before.

This error really only appeared after I followed step 3.3 on the first training provided by @jensens

7

Ah, ok – I've bumped your trust level up now so you should be able to include links in your posts. (We do that because we have had that type of spam from new users).

8

Here? 3. Installing Volto Light Theme – Customizing Volto Light Theme — Plone Training 2025 documentation

9
10

yes, on step three where i need to add @kitconcept/volto-light-theme this is where it broke.

const addons = ['volto-project-title'];
const theme = '@kitconcept/volto-light-theme';

module.exports = {
  addons,
  theme
};

Small Edit: I wont be able to respond until Tomorrow but I appreciate all help I can get

1 Like
11

You are missing to add the theme as an addon as well. Did you follow all the steps carefully?

12

I've read the Instruction multiple time and I even asked a college for help and both of us couldn't make it work.

Could you tell me how I can add it as an addon?

13

As any other addon, using the addons key on your inner package.json.

Again if you don't give reproduceable steps, we cannot help you.

In this webcast we showed how to do it: