Skip to content

Toast: 'secondary' & 'contrast' severity prop values don't render properly in dark themes #92

Description

@pintof

Describe the bug

For the 'severity' prop, if value is set to 'secondary' or 'contrast', the Toast component will not properly render in dark themes. (it renders with a transparent background instead of blurred background)

Render in light theme:
Image

Render in dark theme:
Image

Reproducer

https://stackblitz.com/edit/11istbbg?file=src%2Fmain.jsx

System Information

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 1.89 GB / 7.92 GB
  Binaries:
    Node: 23.6.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 11.0.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (128.0.2739.42)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    primereact: ^10.9.1 => 10.9.1
    react: ^19.0.0 => 19.0.0

Steps to reproduce the behavior

  1. Open accompanied stackblitz link
  2. Click 'Secondary' or 'Contrast' button in UI
  3. Observe Toast component then rendered with transparent background instead of blurred

Note: if you comment out line 8 of Main.jsx on stackblitz, Toast component will render in a light theme instead (if you wish to observe usual render)

Expected behavior

When using dark themes, 'contrast' & 'secondary' values of the 'severity' prop for the Toast component should render with a blurred background (just as it does in light themes) instead of a transparent background.

As is observed from screenshots, text in Toast is unreadable if background is transparent.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions