https://github.com/kitconcept/volto-light-theme
https://github.com/kitconcept/volto-light-theme
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kitconcept/volto-light-theme
- Owner: kitconcept
- Created: 2022-10-20T08:08:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-08T09:28:12.000Z (about 1 year ago)
- Last Synced: 2025-05-08T10:19:52.463Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://light-theme.kitconcept.io
- Size: 465 MB
- Stars: 14
- Watchers: 6
- Forks: 13
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-volto - volto-light-theme - Plone 6 Volto Light Theme (by kitconcept) (Add-ons / Themes)
README

# Volto Light Theme
[](https://www.npmjs.com/package/@kitconcept/volto-light-theme)
[](https://pypi.org/project/kitconcept.voltolighttheme/)
[](https://pypi.org/project/kitconcept.voltolighttheme/)
[](https://pypi.org/project/kitconcept.voltolighttheme/)
[](https://github.com/kitconcept/volto-light-theme/actions)
[](https://github.com/kitconcept/volto-light-theme)
[](https://github.com/kitconcept/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/](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:
```sh
git clone git@github.com:kitconcept/volto-light-theme.git
cd volto-light-theme
```
2. Install dependencies for both Backend and Frontend:
```sh
make install
```
### Fire Up the Servers ๐ฅ
1. Start the **Backend** (Plone) at [http://localhost:8080/](http://localhost:8080/):
```sh
make backend-start
```
2. In a new terminal, start the **Frontend** (Volto) at [http://localhost:3000/](http://localhost:3000/):
```sh
make frontend-start
```
๐ Your Plone development environment is now live!
## 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](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`:
```sh
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:
```sh
docker compose up -d
```
Once the backend image is running, create a Plone site with:
```sh
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](https://github.com/kitconcept/volto-light-theme/) ๐ป
- [Issue Tracker](https://github.com/kitconcept/volto-light-theme/issues) ๐
Every pull request requires a [Change log entry](https://6.docs.plone.org/contributing/index.html#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**:
```sh
make format
```
- **Lint the code for errors and adherence to Plone standards**:
```sh
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:
```sh
make i18n
```
## Credits & Acknowledgements ๐
This package is developed and maintained by [kitconcept GmbH](https://kitconcept.com) โค๏ธ.