Just playing about with MaryUI and have came across and issue with the pagination. In dark mode it works the pages are in the correct colours etc but when switching to light mode everything else changes but the pagination links stay in dark mode. As far as I am aware I have done nothing that could or would cause issues. (Just followed what was in the bootcamp) Has anyone came across this issue before? I am new to Tailwind etc and just finding my feet so unsure where to even start to look.
So doing some more messing/ digging about it seems that it is following my devices dark mode only and not following the override toggle I have setup that works with every other element on the page. So that the new question why is this happening?
So in short it works for your MaryUI components, but not for the native Tailwind pagination component, or are you creating your own custom pagination?
@RemiM From what i can see is that it using the Laravel default setup.
Further digging I seems that the issue is due to a conflict with prefers-color-scheme. When you override it with a theme toggle the MaryUI components update but the Laravel Pagination doesn't and will ignore everything else.
I was checking if there were any known bugs related to a Laravel setup but couldn't find anything.
While searching online, I came across a blog post on DaisyUI about installing Mary UI: Laravel blade components made with daisyUI. I found the tailwind.config.js section particularly interesting:
export default {
content: [
// You will probably also need those lines
"./resources/**/**/*.{js,blade.php}",
"./app/View/Components/**/**/*.php",
"./app/Livewire/**/**/*.php",
// Add mary
"./vendor/robsontenorio/mary/src/View/Components/**/*.php",
],
// Add daisyUI
plugins: [require("daisyui")],
}
Could it be that something is missing in your content array?
Another useful reference from the official documentation:
Renaming components – This could be helpful if you need to rename Mary UI components with a custom prefix to prevent duplicate component names.
Jestream and Breeze integration UI glitches – It mentions that if you encounter UI glitches, you should try removing the @tailwindcss/forms plugin.
@RemiM Thats exactly how I have my tailwind.config.js file. Its one of the install points.
I don't think its anything to do with conflicting component names as I have nothing else installed. Its plain vanilla Laravel.
@CallumBee While a conflict with prefers-color-scheme is possible, I suspect the pagination is being completely ignored by MaryUI.
You might want to double-check your implementation against the documentation.
Please or to participate in this conversation.