F
Filament•3w ago
isach

Light / Dark mode blue

Using filament 3 on a custom page the light mode looks blue when the OS (iPhone/Android) screen is in dark mode If I change to dark mode in filament it looks ok The problem is when I set filament on light mode
No description
No description
10 Replies
Dennis Koch
Dennis Koch•3w ago
Only that custom page?
isach
isachOP•3w ago
Any custom Page I create get this error. Even on other projects too
Dennis Koch
Dennis Koch•3w ago
What does the page view look like?
isach
isachOP•3w ago
isach
isachOP•3w ago
thanks for you helping me out, really appreciate it
Dennis Koch
Dennis Koch•3w ago
I meant the view file.
isach
isachOP•3w ago
this is the style css of the blade

message.txt

isach
isachOP•3w ago
on another project i have a simpler view
No description
isach
isachOP•3w ago
 <x-layouts.public.base :title="'Edición de Abrej'">
    <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                        Edición de Abrej
                    </h1>
                </div>
                <div class="p-6">
                    <livewire:public.abrej.edit>
                </div>
            </div>
        </div>
    </div>
</x-layouts.public.base> 
 <x-layouts.public.base :title="'Edición de Abrej'">
    <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                        Edición de Abrej
                    </h1>
                </div>
                <div class="p-6">
                    <livewire:public.abrej.edit>
                </div>
            </div>
        </div>
    </div>
</x-layouts.public.base>
and the livewire:public.abrej.edit is 
 <div>
    <form wire:submit="update">
        {{ $this->form }}
        <div class="flex justify-end">
        </div>
    </form>

    <x-filament-actions::modals />
</div>
 <div>
    <form wire:submit="update">
        {{ $this->form }}
        <div class="flex justify-end">
        </div>
    </form>

    <x-filament-actions::modals />
</div>
just realized it was bcs i was using the script of <script src="https://cdn.tailwindcss.com"></script> solved it using <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { } } } </script>
Dennis Koch
Dennis Koch•3w ago
It’s better to use a compiled version instead of the CDN

Did you find this page helpful?