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

Table footer component has inverted colors for light and dark themes #1332

Closed
stefa168 opened this issue Oct 18, 2024 · 2 comments · Fixed by #1419
Closed

Table footer component has inverted colors for light and dark themes #1332

stefa168 opened this issue Oct 18, 2024 · 2 comments · Fixed by #1419
Assignees
Labels
status: accepted This issue has been accepted and assigned to someone for implementation.

Comments

@stefa168
Copy link
Contributor

Describe the bug

I have recently encountered an issue where the Table Footer sub-component renders with the background color inverted. This means that if I were to use the light mode, then it would have appeared with the dark background and vice-versa.

I have solved the issue myself by modifying the classes used by the sub-component, and I'm opening this issue to ask for permission to send a PR (as indicated in CONTRIBUTING.md).

Reproduction

To reproduce the issue, just create a simple table, including a footer.

Here's a minimal reproduction: https://stackblitz.com/edit/github-xeufjn?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 6.8 Linux Mint 22 (Wilma)
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 51.19 GB / 62.70 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.8.0 - ~/.local/share/nvm/v22.8.0/bin/node
    npm: 10.8.3 - ~/.local/share/nvm/v22.8.0/bin/npm
  Browsers:
    Chromium: 129.0.6668.100
  npmPackages:
    @sveltejs/kit: ^2.6.3 => 2.7.0 
    bits-ui: ^0.21.16 => 0.21.16 
    formsnap: ^1.0.1 => 1.0.1 
    lucide-svelte: ^0.439.0 => 0.439.0 
    mode-watcher: ^0.4.1 => 0.4.1 
    svelte: ^5.0.0-next.262 => 5.0.0-next.262 
    svelte-radix: ^1.1.1 => 1.1.1 
    svelte-sonner: ^0.3.28 => 0.3.28 
    sveltekit-superforms: ^2.19.0 => 2.19.1

Severity

annoyance

@huntabyte
Copy link
Owner

Go for it!

@huntabyte huntabyte added the status: accepted This issue has been accepted and assigned to someone for implementation. label Oct 18, 2024
@jaysin586
Copy link

The issue stems from the wrong classes being applied to the tfoot ex:

<tfoot class={cn("bg-primary text-primary-foreground font-medium", className)} {...$$restProps}>

differs from the main: https://github.com/shadcn-ui/ui/blob/d0eece06d443be54f8a55c31a3c0bc3715fc30d4/apps/www/registry/default/ui/table.tsx#L46

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: accepted This issue has been accepted and assigned to someone for implementation.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants