Very clear table header text (in light themes)

[weelrs8]

My OS: Ubuntu 24.04.1 LTS

maryUI version

1.35.9

daisyUI version

4.12.10

Livewire version

3.5.6

What browsers are affected?

Firefox, Chrome

What happened?

When using a light theme, the texts in the headers table are too light

Dark:

Light:

To reproduce the problem, just go to https://mary-ui.com/docs/components/table and change the theme to light.

[robsontenorio]

Maybe some browser plugin or tweak on your OS?

Here I can’t reproduce it. Anyone ?

[anfeichtinger]

For me it is the same on the docs page.

From left to right: Chrome (No plugins), Brave (Ad-Blocking), Firefox (Ad-Blocking)

Versions:

• Windows 11 Pro 23H2 Build 22631.4169
• Google Chrome 128.0.6613.138 (Official Build) (64-bit)
• Brave 1.69.168 Chromium: 128.0.6613.138 (Official Build) (64-bit)
• Firefox 128.0.3 (64-bit)

On my page for testing mary-ui I get full black on the header without setting any color.

@php
        $users = Illuminate\Support\Collection::make([
            0 => ['id' => 1, 'name' => 'Andreas Feichtinger', 'city' => ['name' => 'Kalsdorf bei Graz']],
            1 => ['id' => 2, 'name' => 'Jon Doe', 'city' => ['name' => 'Graz']],
            2 => ['id' => 3, 'name' => 'Jane Doe', 'city' => ['name' => 'Wien']],
        ]);

        $headers = [
            ['key' => 'id', 'label' => '#'],
            ['key' => 'name', 'label' => 'Nice Name'],
            ['key' => 'city.name', 'label' => 'City'],
        ];
    @endphp
    <div class="container-card col-span-full min-w-full">
        <x-header title="Table" class="col-span-full" />
        <div class="col-span-full -mt-10 space-y-6">
            <x-table :headers="$headers" :rows="$users" striped selectable wire:model.live="tableSelection" />
        </div>
    </div>

Maybe this helps to reproduce.

EDIT: On my website I work with custom themes and the 'dark' property is not set for dark themes so it will not switch between text-black dark:text-gray-200 for the header. This issue is probably also related to the initial part of my issue with colors: https://github.com/robsontenorio/mary/issues/585#issue-2476380955

[donnyxray]

In my case the light version works fine, but the dark one has a black-on-black header in the docs sample.

I should add that my browser operates in light mode. This seems to matter as there are apparently not 2, but 4 effective themes. Depending on your browser's dark/light setting, the website's dark/light setting has different results.

[weelrs8]

Maybe some browser plugin or tweak on your OS?

Here I can’t reproduce it. Anyone ?

My environment: Ubuntu 24.04.1 LTS

I did a test on Windows 10 and it looks like this:

[robsontenorio]

Are you guys able to send a PR?

The tweak is about this line

https://github.com/robsontenorio/mary/blob/f10d5dc459d68d938d3c1952d18c34751a7df8c4/src/View/Components/Table.php#L246

This is odd because it seems fine ... In someway the OS itself is interfering on that.

[anfeichtinger]

I guess the easiest fix would be to change it to text-base-content but I'm not sure if this would break some pages that are not using daisyui themes properly.

If that change is okay I can create a PR today.

[weelrs8]

apparently removing text-black solves the problem.