From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Wed, 18 Mar 2026 23:35:02 +0000 (+0100)
Subject: docs(ui): document theme configuration and available themes
X-Git-Tag: ocpp-server@v3.2.0~46
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=3926beb67a5266774c4b5b50e27292d64fa1ec26;p=e-mobility-charging-stations-simulator.git

docs(ui): document theme configuration and available themes
---

diff --git a/ui/web/README.md b/ui/web/README.md
index eb544a2c..ca3fb0db 100644
--- a/ui/web/README.md
+++ b/ui/web/README.md
@@ -19,6 +19,7 @@ Vue.js dashboard for monitoring and controlling the e-mobility charging stations
     - [Single server](#single-server)
     - [Multiple servers](#multiple-servers)
   - [Configuration reference](#configuration-reference)
+- [Theming](#theming)
 - [Getting started](#getting-started)
   - [Install dependencies](#install-dependencies)
   - [Development](#development)
@@ -65,6 +66,7 @@ Edit `public/config.json` to point to your simulator UI server(s).
 
 ```json
 {
+  "theme": "tokyo-night-storm",
   "uiServer": {
     "host": "localhost",
     "port": 8080,
@@ -86,6 +88,7 @@ The `uiServer` field accepts an array to connect to multiple simulator instances
 
 ```json
 {
+  "theme": "catppuccin-latte",
   "uiServer": [
     {
       "host": "server1.domain.tld",
@@ -117,18 +120,30 @@ The `uiServer` field accepts an array to connect to multiple simulator instances
 
 ### Configuration reference
 
-| Field                     | Type                    | Required | Description                       |
-| ------------------------- | ----------------------- | -------- | --------------------------------- |
-| `host`                    | `string`                | Yes      | Simulator UI server hostname      |
-| `port`                    | `number`                | Yes      | Simulator UI server port          |
-| `protocol`                | `"ui"`                  | Yes      | WebSocket subprotocol             |
-| `version`                 | `"0.0.1"`               | Yes      | Protocol version                  |
-| `name`                    | `string`                | No       | Display name for server selection |
-| `secure`                  | `boolean`               | No       | Use `wss://` instead of `ws://`   |
-| `authentication.enabled`  | `boolean`               | No       | Enable authentication             |
-| `authentication.type`     | `"protocol-basic-auth"` | No       | Authentication method             |
-| `authentication.username` | `string`                | No       | Basic auth username               |
-| `authentication.password` | `string`                | No       | Basic auth password               |
+| Field                     | Type                    | Required | Description                               |
+| ------------------------- | ----------------------- | -------- | ----------------------------------------- |
+| `theme`                   | `string`                | No       | Theme name (default: `tokyo-night-storm`) |
+| `host`                    | `string`                | Yes      | Simulator UI server hostname              |
+| `port`                    | `number`                | Yes      | Simulator UI server port                  |
+| `protocol`                | `"ui"`                  | Yes      | WebSocket subprotocol                     |
+| `version`                 | `"0.0.1"`               | Yes      | Protocol version                          |
+| `name`                    | `string`                | No       | Display name for server selection         |
+| `secure`                  | `boolean`               | No       | Use `wss://` instead of `ws://`           |
+| `authentication.enabled`  | `boolean`               | No       | Enable authentication                     |
+| `authentication.type`     | `"protocol-basic-auth"` | No       | Authentication method                     |
+| `authentication.username` | `string`                | No       | Basic auth username                       |
+| `authentication.password` | `string`                | No       | Basic auth password                       |
+
+## Theming
+
+Set `theme` in `config.json` to a filename (without `.css`) from `src/assets/themes/`.
+
+| Theme               | Style | Source                                                           |
+| ------------------- | ----- | ---------------------------------------------------------------- |
+| `tokyo-night-storm` | Dark  | [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme) |
+| `catppuccin-latte`  | Light | [Catppuccin](https://github.com/catppuccin/catppuccin)           |
+
+Default: `tokyo-night-storm`. To add a theme, create a CSS file defining the same semantic tokens.
 
 ## Getting started