Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pintof opened this issue Jan 31, 2025 · 2 comments
Labels
Component: Theme Issue or pull request is related to Theme

Comments

@pintof
Copy link

pintof commented Jan 31, 2025

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.

@pintof pintof added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 31, 2025
@melloware melloware added Component: Theme Issue or pull request is related to Theme and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 31, 2025
@melloware
Copy link
Member

You probably want to report this issue here: https://github.com/primefaces/primereact-sass-theme

@pintof
Copy link
Author

pintof commented Feb 1, 2025

Reported it where you suggested.
Link is: primefaces/primereact-sass-theme#92
So will close this request.

@pintof pintof closed this as not planned Won't fix, can't repro, duplicate, stale Feb 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Theme Issue or pull request is related to Theme
Projects
None yet
Development

No branches or pull requests

2 participants