search

tailwindlabs / tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
233 stars 4 forks source link

Catalyst: Text inside TableCell isn't affected by the dark/light mode feature #1581

Closed FoksVHox closed 3 months ago

FoksVHox commented 3 months ago

What component (if applicable)

Describe the bug When you use media in your tailwind.config.js as the method for dark mode, you will see that everything except the text in TableCells is affected. Hence you'll have a dark mode, with black/gray text which makes it very hard to read.

To Reproduce Steps to reproduce the behaviour:

  1. Start with a blank project which already has Catalyst set up (preferably with Laravel & Inertia)
  2. Add the example table from the docs, as well as some data to display
  3. Make sure you use media as the method for dark mode in your tailwind.config.js
  4. Switch from light to dark.
  5. You should now see a dark table with black text in the cells.

Expected behaviour For the text to be affected by the dark mode.

Screenshots image

Browser/Device (if applicable)

Additional context I've found that adding style="color-scheme: dark;" fixes the text, however, the text will then appear white when you use light mode. This is used in the demo, but it isn't mentioned anywhere in the docs. Also, this isn't a viable solution when you're using the media-method instead of the selector-method.

I've used Laravel & Inertia for this, instead of Next.js. However, I do believe the same would happen on Next.js.

dokkodo101 commented 3 months ago

Wrap it around a <Text /> component. should get it fixed.

FoksVHox commented 3 months ago

Wrap it around a <Text /> component. should get it fixed.

While it solves some of the issue, it doesn't solve it 100%.

The example table doesn't wrap the text in a <Text />, but rather it just has the text as it's children.

image The above image is produced with the following code

    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Name</TableHeader>
          <TableHeader>Email</TableHeader>
          <TableHeader>Role</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.handle}>
            <TableCell className="font-medium">{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell className="text-zinc-500">{user.access}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>

And as you can see, the text with the user.name and user.email isn't gray, which it will become when you <Text />.

I do believe that it's a bug, that should be addressed.

reinink commented 3 months ago

Hey! So the reason this is happening is because the Table component doesn't have a default text color applied to it, so it's falling back to the document's default text color.

It's probably a good idea to give your app a default text color, something like this:

<body class="text-zinc-950 dark:text-white">

However, I think it's also a good idea for the Table component to have a default color, so I've gone ahead and fixed that. You can either re-download Catalyst from the Tailwind UI website to get this change, or you can update your Table.tsx with this change:

- <table className="min-w-full text-left text-sm/6">{children}</table>
+ <table className="min-w-full text-left text-sm/6 text-zinc-950 dark:text-white">{children}</table>

Hope that helps! 👍