Skip to content

Row checkbox selection tick is invisible in Landing Page Theme section #8545

@Prakash1185

Description

@Prakash1185

Describe the bug

On the PrimeReact landing page/homepage, the DataTable in the "Themes" section has selectable rows. However, when clicking on a row's checkbox to select it, the active highlight color and the "tick" icon are not visible. The checkbox appears blank even though the row becomes selected.

Reproducer

No response

System Information

System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12450H
    Memory: 4.23 GB / 15.65 GB
  Binaries:
    Node: 22.22.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 4.10.3 - C:\nvm4w\nodejs\yarn.CMD
    npm: 11.12.0 - C:\Users\pgcet\AppData\Roaming\npm\npm.CMD
    bun: 1.3.11 - C:\Users\pgcet\AppData\Local\Microsoft\WinGet\Packages\Oven-sh.Bun_Microsoft.Winget.Source_8wekyb3d8bbwe\bun-windows-x64\bun.EXE
  Browsers:
    Chrome: 148.0.7778.179
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.8115

Steps to reproduce the behavior

  1. Go to the PrimeReact documentation homepage (/).
  2. Scroll down to the "Themes" section where the large DataTable is displayed.
  3. Click on any checkbox in the left column (or click on the "Select All" checkbox in the header).
  4. Notice that the checkbox checkmark is not clearly visible.

Expected behavior

The checkbox should be filled with the theme's primary color (--primary-color) and the check icon should be clearly visible (--primary-color-text), completely matching the theme.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions