Table labels unreadable with dark themes

robsontenorio / mary

Laravel Blade UI Components for Livewire 3

https://mary-ui.com

Other

1.05k stars 128 forks source link

Table labels unreadable with dark themes #373

Closed bestmomo closed 6 months ago

bestmomo commented 7 months ago

maryUI version

1.26

daisyUI version

4.10.1

Livewire version

3.4

What browsers are affected?

Firefox

What happened?

Capture d'écran 2024-04-11 181805

robsontenorio commented 7 months ago

What is your OS ? This issue also happens on Chrome ?

willcastillo commented 7 months ago

I can confirm it also happens in Chrome (Version 123.0.6312.106 (Official Build) (64-bit) / Win11)

bestmomo commented 7 months ago

My OS is Windows 11, also happens on Brave, Chrome and Edge

robsontenorio commented 7 months ago

Could you guys please check this?

@willcastillo @bestmomo

Bootstrap a brand new project at http://phpsandbox.io
Then, open a terminal on (+) icon

Install mary + yarn build

 composer require robsontenorio/mary && php  artisan mary:install && yarn build

Then , refresh the page

bestmomo commented 7 months ago

Hello, I have an issue to access to http://phpsandbox.io/ : PR_CONNECT_RESET_ERROR

robsontenorio commented 7 months ago

Please , try again.

bestmomo commented 7 months ago

Still getting message PR_CONNECT_RESET_ERROR

I put it on my server and same result.

willcastillo commented 7 months ago

For what it's worth, I see my table (specifically the THEAD elem) is missing this style that is present in the first example in the mary-ui docs for table. Not sure what is causing that.

mary-ui-table-missing-style

bestmomo commented 6 months ago

I solved it temporarily in src/Views/Components/Table.php on line 182 :

<!-- <thead @class(["text-black dark:text-gray-200", "hidden" => $noHeaders])> -->
<thead @class(["hidden" => $noHeaders])>

screen1

robsontenorio commented 6 months ago

Good news! The #364 will solve it.

robsontenorio commented 6 months ago

@bestmomo @willcastillo

I got a Windows 11 machine.

Updated Chrome to latest stable 124 version.
Updated JS to latest stable (daisyui, tailwind, prefixes, postcss)
Switched Windows theme color to dark

And I can't see this issue anymore.

Could you guys confirm?

"devDependencies": {
        "autoprefixer": "^10.4.19",        
        "daisyui": "^4.10.2",
        "postcss": "^8.4.38",
        "tailwindcss": "^3.4.3",
        ....
    }

bestmomo commented 6 months ago

Hello!

That is what I do:

new fresh Laravel 11
composer require robsontenorio/mary
php artisan mary:install
Yes for Volt installation
npm install --save-dev

adding this in tailwind.config.js:

daisyui: {
    themes: ["light", "dark", "cupcake"],
},

npm run dev
In layout: <html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">

my devdependencies:

"devDependencies": {
"autoprefixer": "^10.4.19",
"axios": "^1.6.4",
"daisyui": "^4.10.2",
"laravel-vite-plugin": "^1.0",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.0"
}

Using Chrome Version 124.0.6367.61 (Build officiel) (64 bits)

Capture d’écran 2024-04-20 220814

When I load Mary website for table component all is fine:

Capture d'écran 2024-04-20 221245

robsontenorio commented 6 months ago

Ok, here is the problem. You should not do this. If you remove it , it should work fine.

<html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">

You should make use of this in case of theme switching.

https://mary-ui.com/docs/components/theme-toggle

And here is the new feature , not documented yet. https://github.com/robsontenorio/mary/pull/387

bestmomo commented 6 months ago

Ok, here is the problem. You should not do this. If you remove it , it should work fine.
<html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
You should make use of this in case of theme switching.

https://mary-ui.com/docs/components/theme-toggle

And here is the new feature , not documented yet. #387

Thank you!

AtefR commented 4 months ago

TailwindCSS by default uses prefers-color-scheme to toggle between dark and light modes.

change it to use selector strategy and this will be fixed.

https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually