Volto Light Theme

Volto Light Theme (VLT) mission is to serve as a foundation for kitconcept's future projects, following the release of Plone 6. It incorporates feedback from the company's clients and Plone community from the last few years of projects and the success stories in the UI/UX side. It aims to be future-proof, keeping it aligned with the upcoming Volto and Plone 7 vision in terms of theming strategy decided by the Plone community.

Demo 🌎

You can try VLT online in: https://light-theme.kitconcept.io/

Documentation 📖

You can find the documentation of this package at https://volto-light-theme.readthedocs.io.

Upgrade 🚀

See a detailed upgrade guide at https://volto-light-theme.readthedocs.io/how-to-guides/upgrade-guide.html.

Developing 🏁

Prerequisites ✅

Ensure you have the following installed:

• UV 🐍 (Python dependency manager)
• Node.js 22 🟩
• pnpm 🧶 (JavaScript package manager)
• Docker 🐳 (Containerized environment)

Installation 🔧

1. Clone the repository:

git clone git@github.com:kitconcept/volto-light-theme.git
cd volto-light-theme

2. Install dependencies for both Backend and Frontend:

make install

Fire Up the Servers 🔥

1. Start the Backend (Plone) at http://localhost:8080/:

make backend-start

2. In a new terminal, start the Frontend (Volto) at http://localhost:3000/:

make frontend-start

🎉 Your Plone development environment is now live!

Release 🚀

See the release reference at https://volto-light-theme.readthedocs.io/how-to-guides/release.html.

Trying Volto Light Theme with Docker 📦

This setup includes:

• Prebuilt Docker images for Backend and Frontend 🖼️
• A complete stack with a Traefik router and a Postgres database 🗃️
• Accessible at http://voltolighttheme.localhost 🌐

To start the Docker-based environment, without cloning this repository, follow these steps:

Download docker-compose.yml

On your computer, create a new folder and download the current docker-compose.yml:

mkdir try-vlt
cd try-vlt
curl -L -o docker-compose.yml https://raw.githubusercontent.com/kitconcept/volto-light-theme/refs/heads/main/docker-compose.yml

Then start the stack using:

docker compose up -d

Once the backend image is running, create a Plone site with:

docker compose exec backend './docker-entrypoint.sh create-site'

🚀 Your Plone site is now up and running locally!

Contributing 🤝

Contributions are welcome! If you find any issues or want to suggest improvements, please check out:

• Source Code 💻
• Issue Tracker 🐛

Every pull request requires a Change log entry. The location of the news folder is the following:

• backend: backend/news
• frontend: frontend/packages/volto-light-theme/news

Project Structure 🏗️

This monorepo hosts two packages:

• backend/: Python package kitconcept.voltolighttheme providing Dexterity behaviors and example content.
• frontend/: React package @kitconcept/volto-light-theme providing the theme.

Code Quality Assurance 🧐

Ensure your code follows best practices by running the following commands:

• Format the codebase:

make format

• Lint the code for errors and adherence to Plone standards:

make lint

You can also run these commands separately in the backend or frontend folders.

Internationalization 🌐

Easily generate translation files for both Plone and Volto:

make i18n

Credits & Acknowledgements 🙏

This package is developed and maintained by kitconcept GmbH ❤️.