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

DataTable: (unstyled + Tailwind) stripedRows styling applies in dark mode but not light mode #4406

Closed
hamish-smith opened this issue Sep 7, 2023 · 1 comment
Assignees
Labels
Component: Theme Issue or pull request is related to Theme Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@hamish-smith
Copy link

Describe the bug

I tried adding stripedRows to the DataTable sandbox code for unstyled + Tailwind passthrough on the Theming page of the component documentation.

Toggling between light mode and dark mode, there is no visual difference between rows in light mode, whereas in dark mode the rows are clearly different colours.

Reproducer

https://codesandbox.io/p/sandbox/proud-water-5c8jl2?welcome=true

PrimeVue version

3.34.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

Chrome, Firefox

Steps to reproduce the behavior

Steps to reproduce

I went to the code example for the DataTable and editing the App.vue to add stripedRows to the DataTable in the sandbox/example code.

Then I toggled between light and dark theme.

Expected behavior

Visually different rows for stripedMode in light and dark mode.

@hamish-smith hamish-smith added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 7, 2023
@tugcekucukoglu tugcekucukoglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Sep 7, 2023
@tugcekucukoglu tugcekucukoglu added this to the 3.34.1 milestone Sep 7, 2023
@tugcekucukoglu tugcekucukoglu self-assigned this Sep 7, 2023
@tugcekucukoglu tugcekucukoglu added the Component: Theme Issue or pull request is related to Theme label Sep 7, 2023
@tripex
Copy link

tripex commented Nov 16, 2023

@tugcekucukoglu guess this issue is not fixed, at least I has the same behaviour for me, just installed primevue today.
Also the tr element looks a bit funny on the classes:
bg-white text-gray-600 dark:bg-gray-900 bg-blue-100/50 text-gray-600 dark:bg-gray-950 transition duration-200 focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem] dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]

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 Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

No branches or pull requests

3 participants