Skip to content

fix(theme): restore PrimeNG v21 Aura dark theme — fixes broken UI#33

Merged
wcypierre merged 2 commits into
masterfrom
fix/add-primeng-theme
May 2, 2026
Merged

fix(theme): restore PrimeNG v21 Aura dark theme — fixes broken UI#33
wcypierre merged 2 commits into
masterfrom
fix/add-primeng-theme

Conversation

@wcypierre
Copy link
Copy Markdown
Owner

Problem

The Angular 13→21 + PrimeNG 13→21 migration removed `primeng/resources/themes/bootstrap4-dark-blue/theme.css` from `angular.json` (correctly — the path no longer exists in PrimeNG v17+), but never configured a replacement theme. This broke the UI in two ways:

  1. CSS variables undefined — `styles.scss` and `app.component.scss` use `--surface-b`, `--text-color`, `--font-family` which were defined by the old theme. Without them, the browser falls back to white background, black text, system font.
  2. PrimeNG v21 component tokens undefined — PrimeNG v21 components use `dt()` design tokens that resolve to `--p-*` CSS variables. These are only injected when `providePrimeNG({ theme: ... })` is called. Without it, all buttons, dropdowns, dialogs, and progress bars render as invisible/unstyled elements.

Fix

  • Install `@primeuix/themes` (the PrimeNG v21 theme preset package)
  • Configure `providePrimeNG` with the Aura dark preset in `AppModule`
  • Add `class="p-dark"` to `` to permanently activate dark mode
  • Add `:root` CSS variables restoring the original bootstrap4-dark-blue values (`--surface-b`, `--text-color`, `--font-family`)

wcypierre added 2 commits May 2, 2026 10:34
The Angular 13->21 migration removed primeng/resources/themes/bootstrap4-dark-blue/theme.css
(no longer exists in PrimeNG v17+) but never added a replacement. This left all CSS
variables undefined, breaking the entire UI.

- Add providePrimeNG({ theme: { preset: Aura, darkModeSelector: '.p-dark' } }) to AppModule
- Add class="p-dark" to <html> to permanently activate dark mode
- Add :root CSS variables restoring --surface-b, --text-color, --font-family
  with the original bootstrap4-dark-blue values
@wcypierre wcypierre merged commit 34cb3b0 into master May 2, 2026
4 checks passed
@wcypierre wcypierre deleted the fix/add-primeng-theme branch May 2, 2026 02:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant