Custom Page dark mode problem
I create a custom livewire page but darkmode not work correctly?
first input is from $this->form
second input is from flowbit
12 Replies
How have you created the custom page. Did you apply the darkmode classes/
yes
i use this block
https://flowbite.com/blocks/marketing/contact/
tailwind
const colors = require('tailwindcss/colors')
module.exports = {
content: [
'./resources//*.blade.php',
'./vendor/filament//*.blade.php',
],
darkMode: 'media',
theme: {
extend: {
colors: {
danger: colors.rose,
primary: colors.yellow,
success: colors.green,
warning: colors.yellow,
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
this design
<section class="bg-white dark:bg-gray-900">
<div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">Contact Us</h2>
<p class="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let us know.</p>
<form wire:submit.prevent="submit" class="space-y-8">
{{ $this->form }}
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
<input type="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="[email protected]" required>
</div>
<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Send message</button>
</form>
</div>
</section>
Why have you added inputs outside of the form?
Have you enabled dark mode in the filament config?
Why have you added inputs outside of the form?
for test
Have you enabled dark mode in the filament config?
yes i have enabled it
@danharrin ?
darkMode: class should be used
and please do not tag people as per the #✅┊rules
Sorry I didn't read the rules
not work, I followed this doc
https://filamentphp.com/docs/2.x/forms/installation
Filament
Installation - Form Builder - Filament
The elegant TALL stack form builder for Laravel artisans.
what doesnt work
dark mode
did you set dark mode to true in the forms config?
thanks