Skip to main content

Customization

Application branding (name, images and colors) is centralized in a single file: frontend/public/branding/theme.yaml.

1. Where to configure branding?​

Main configuration file:

frontend/public/branding/theme.yaml

In this file you can define:

  • The application name (appName)
  • Main colors (colors)
  • Branding images (images)

Example configuration:​

appName: "OchoCast"

colors:
  primary: "#1dac78"      # Primary color (buttons, links, accents)
  secondary: "#344054"    # Secondary color (text, borders)
  background: "#f9fafb"   # Background color
  accent: "#2ecc71"       # Accent color (alerts, highlights)
  error: "#dc2626"        # Error color (error messages)

images:
  logo: "::default::ochoIconFull.svg"
  default_miniature_image: "::default::exemple/image_tuile_event.png"
  add: "::default::add.svg"
  plus: "::default::plus.svg"
  search: "::default::search.svg"
  cross: "::default::cross.svg"
  user_placeholder: "::default::persona.png"

2. Typing and validation​

The YAML schema is defined in:

frontend/src/branding/types.ts

The BrandingConfig interface ensures the file properties are typed and validated in TypeScript.

3. Automatic color generation​

The branding system simplifies color management by automatically generating variants. From 4–5 base colors it produces 50+ variants for the application.

How it works:​

  • Light variants (50–400): progressively mixed with white
  • Base color (500): exact color defined in the file
  • Dark variants (600–900): progressively mixed with black

Variants are generated by generateColorVariants in:

frontend/src/utils/colorUtils.ts

Generated CSS variables:​

For each base color the system creates CSS variables:

  • --theme-color, --theme-color-50 to --theme-color-900
  • --bg-color, --bg-color-50 to --bg-color-900
  • --accent-color, --accent-color-50 to --accent-color-900
  • --error-color, --error-color-50 to --error-color-900

4. Use in components​

Hook useBranding​

Defined in:

frontend/src/hooks/useBranding.ts

It:

  • Loads theme.yaml
  • Generates variants via generateColorVariants
  • Injects CSS variables dynamically into the DOM
  • Returns the configuration for use in React components

Component ColorPreview​

Displays generated color variants. Located at:

frontend/src/components/ReworkComponents/generic/ColorPreview/ColorPreview.tsx

5. Admin panel​

The admin panel allows changing branding in real time. It is accessible at /admin (administrator rights required).

Features:​

  • Edit application name
  • Change main colors
  • Preview gradients in real time
  • Upload branding images
  • Save configuration to the server

The related file is:

frontend/src/pages/adminPanel/adminPanel.tsx
Detailed guide

For a complete guide to the admin panel with explanations of each field and feature, see the Admin Panel Guide.

6. Summary​

  • 4–5 base colors → 50+ CSS variables generated
  • Automatic gradient system (variants 50–900)
  • Admin panel for live editing
  • All branding centralized in theme.yaml
  • Modular, typed architecture with TypeScript
  • Auto-reload after saving to apply changes