⬅️ Back to Frontend Architecture Index

Theme & Styling

1️⃣ Section Purpose

This section documents how the UI look-and-feel is defined and enforced:

  • the MUI theme factory (frontend/src/theme/index.ts)
  • global CSS that sits beside MUI (frontend/src/styles/global.css)
  • density defaults and component overrides for consistent “enterprise UI”

2️⃣ Scope & Boundaries

Included: - Theme tokens (palette, typography, spacing, radius) - MUI locale packs (Material + X Data Grid) and how locale is chosen - Component defaults (dense/compact) and style overrides - Global CSS helpers (scrollbars, print, .visually-hidden)

Excluded: - Translation loading and language selection (see i18n) - Domain-specific UI behavior (see Domains)

3️⃣ High-Level Diagram

graph TD I18N[i18n language] --> Locale[Theme locale (en/de)] Locale --> Theme[buildTheme(locale, mode)] Theme --> Provider[MUI ThemeProvider] Provider --> UI[Components] UI --> CSS[global.css + CssBaseline]

Contents

⬅️ Back to Frontend Architecture Index