Skip to content

fix(theme): restore exact bootstrap4-dark-blue colour palette#35

Merged
wcypierre merged 1 commit into
masterfrom
fix/restore-bootstrap4-dark-blue-theme
May 2, 2026
Merged

fix(theme): restore exact bootstrap4-dark-blue colour palette#35
wcypierre merged 1 commit into
masterfrom
fix/restore-bootstrap4-dark-blue-theme

Conversation

@wcypierre
Copy link
Copy Markdown
Owner

Problem

The previous theme fix added PrimeNG v21's Aura dark preset, which uses zinc grays and indigo/emerald accents. This looks nothing like the original UI, which used PrimeNG v13's bootstrap4-dark-blue theme (dark navy-blue palette).

Fix

Used definePreset(Aura, { ... }) from @primeuix/themes to override every relevant token in PrimeNG v21's semantic colour system with the exact values extracted directly from primeng@13.0.3/resources/themes/bootstrap4-dark-blue/theme.css:

Original CSS variable Value Mapped to
--surface-b (page bg) #20262e colorScheme.dark.surface.900
--surface-a/e/f (cards, overlays) #2a323d colorScheme.dark.surface.800 + content.background + overlay.*
--surface-d (borders) #3f4b5b colorScheme.dark.surface.700
--text-color rgba(255,255,255,0.87) colorScheme.dark.text.color
--text-color-secondary rgba(255,255,255,0.6) colorScheme.dark.text.mutedColor
--primary-color #8dd0ff semantic.primary.300 + colorScheme.dark.primary.color
--primary-color-text #151515 colorScheme.dark.primary.contrastColor

Also updated styles.scss :root variables to match exact original values (#20262e and rgba(255,255,255,0.87) instead of the close-but-wrong estimates from the initial fix).

…21 preset

The previous fix added the Aura dark preset which uses zinc grays and
indigo/emerald accents — visually different from the original UI.

This restores the exact bootstrap4-dark-blue colour values extracted
directly from primeng@13.0.3/resources/themes/bootstrap4-dark-blue/theme.css:

  --surface-b  #20262e  (page background)
  --surface-a  #2a323d  (cards, panels, overlays)
  --surface-d  #3f4b5b  (borders)
  --text-color rgba(255,255,255,0.87)
  --primary    #8dd0ff  (light blue for dark backgrounds)

Uses definePreset(Aura, { ... }) to map these values into PrimeNG v21's
semantic token system (surface palette, text, content, formField,
overlay, list, navigation) so all PrimeNG components use the original
dark navy-blue colour scheme.
@wcypierre wcypierre merged commit 1a3103e into master May 2, 2026
4 checks passed
@wcypierre wcypierre deleted the fix/restore-bootstrap4-dark-blue-theme branch May 2, 2026 03:43
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