The administrator can set the colours of the public booking page on the appearance settings page (/admin/appearance) and sees the result before saving.
Settings
Four colours: primary (buttons, selected time slots, links), page background, card background, text.
Shades for hover, focus ring, borders and disabled slots are derived in CSS (color-mix()), not stored.
The text colour on the primary colour (white or black) is computed from contrast, not set by the user.
6–8 ready-made palettes selectable with one click, plus a custom value for each colour through <input type="color">.
A warning when the text is hard to read on the card or page background (WCAG contrast below 4.5). It warns only, saving is still allowed.
"Reset to default" restores the current look (#696cff on #f5f5f9, white cards).
Fonts are out of scope.
Settings page
Controls on the left, live preview on the right; stacked on a narrow screen with the preview first.
The preview is a small sample of the public page (banner with title, a few time slots including a selected and a disabled one, a text field, the "Book" button) styled by the same public.css and the same variables as the real page, so it cannot drift from it.
Changes show in the preview immediately and are stored only by "Save".
The preview shows the customer's colours in both the light and the dark theme of the admin portal — assets/css/dark.css is not scoped, so the preview must not be restyled by it. The controls around it follow the admin theme.
Notes
public.css has to override the primary colour of the vendor template for everything the public page uses: btn-primary, btn-outline-primary and btn-check states (time slots), form-control focus, form-check-input, links, cards, the dialogs ResError / ResSaved and the captcha text.
Colours are validated on the server as #rrggbb.
Contrast computation and the choice of the text colour on primary are pure functions shared by server and client, with unit tests.
New strings go through trl() with Czech translations.
Acceptance
Colours picked in the settings appear on the public page after saving and a reload, on both desktop and mobile width.
The admin portal, the login page and the booking form in the "Create booking" dialog are not affected.
Checked in a browser with a full reload, no hydration errors.
Depends on #13.
The administrator can set the colours of the public booking page on the appearance settings page (`/admin/appearance`) and sees the result before saving.
## Settings
- Four colours: primary (buttons, selected time slots, links), page background, card background, text.
- Shades for hover, focus ring, borders and disabled slots are derived in CSS (`color-mix()`), not stored.
- The text colour on the primary colour (white or black) is computed from contrast, not set by the user.
- 6–8 ready-made palettes selectable with one click, plus a custom value for each colour through `<input type="color">`.
- A warning when the text is hard to read on the card or page background (WCAG contrast below 4.5). It warns only, saving is still allowed.
- "Reset to default" restores the current look (`#696cff` on `#f5f5f9`, white cards).
- Fonts are out of scope.
## Settings page
- Controls on the left, live preview on the right; stacked on a narrow screen with the preview first.
- The preview is a small sample of the public page (banner with title, a few time slots including a selected and a disabled one, a text field, the "Book" button) styled by the same `public.css` and the same variables as the real page, so it cannot drift from it.
- Changes show in the preview immediately and are stored only by "Save".
- The preview shows the customer's colours in both the light and the dark theme of the admin portal — `assets/css/dark.css` is not scoped, so the preview must not be restyled by it. The controls around it follow the admin theme.
## Notes
- `public.css` has to override the primary colour of the vendor template for everything the public page uses: `btn-primary`, `btn-outline-primary` and `btn-check` states (time slots), `form-control` focus, `form-check-input`, links, cards, the dialogs `ResError` / `ResSaved` and the captcha text.
- Colours are validated on the server as `#rrggbb`.
- Contrast computation and the choice of the text colour on primary are pure functions shared by server and client, with unit tests.
- New strings go through `trl()` with Czech translations.
## Acceptance
- Colours picked in the settings appear on the public page after saving and a reload, on both desktop and mobile width.
- The admin portal, the login page and the booking form in the "Create booking" dialog are not affected.
- Checked in a browser with a full reload, no hydration errors.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Depends on #13.
The administrator can set the colours of the public booking page on the appearance settings page (
/admin/appearance) and sees the result before saving.Settings
color-mix()), not stored.<input type="color">.#696cffon#f5f5f9, white cards).Settings page
public.cssand the same variables as the real page, so it cannot drift from it.assets/css/dark.cssis not scoped, so the preview must not be restyled by it. The controls around it follow the admin theme.Notes
public.csshas to override the primary colour of the vendor template for everything the public page uses:btn-primary,btn-outline-primaryandbtn-checkstates (time slots),form-controlfocus,form-check-input, links, cards, the dialogsResError/ResSavedand the captcha text.#rrggbb.trl()with Czech translations.Acceptance