Dark mode - styles not correctly applied for me

[gkimpson]

I'm using this in Laravel 11.x and i'm having an issue with dark mode in regards to the CSS being incorrectly styled for some reason with the datepicker component (see screenshot below) - obviously my configuration is wrong somewhere just not quite sure what yet. I just wondered is there a codepen or similar thing setup with Bladewind UI to allow me to compare my Laravel blade template code with the proper way of setting Bladewind UI up?

I am using the latest version 2.5.2 and have done the steps to update Bladewind and have run the following commands

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-public --force

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-components --force

Note - this is not a bug I am just unsure what I'm doing wrong

below is how my blade template currently looks like (Layout file) https://gist.github.com/gkimpson/eea60de582f0d738a41a714bcaeb4baa

(File that uses datepicker) https://gist.github.com/gkimpson/33012d1dc12aa44a9959f69ccd772915

[gkimpson]

This appears to be related to TailwindCSS and the app.css file that Laravel generates overriding styles - will look more into it

[gkimpson]

Ok I have appeared to semi-fix this now.. I'll test this a bit more and give more info later not sure if it will assist as it is possible

[mkocansey]

Hey @gkimpson, glad you got this working somehow. A good place to start will be your tailwind.config.js file.

BladewindUI uses the value you have defined for the theme > extend > colors > dark key. The example config below sets dark as colors.slate. Hope this helps

    theme: {
        extend: {
            colors: {
                primary: colors.blue,
                secondary: colors.slate,
                green: colors.emerald,
                dark: colors.slate,
                success: colors.emerald,
                error: colors.red,
                warning: colors.amber,
                info: colors.blue
            }
        },

[mkocansey]

Also, there is unfortunately no codepen but I'd advise to clone (or browse the source of) the BladewindUI documentation website since it always uses the latest version of the library.

[gkimpson]

Thanks for the heads-up Michael! i'll check the config now much appreciated!!!

[gkimpson]

Thanks!!! What a legend, thanks Michael I was missing the extended colors in my tailwind config file - all looking good thanks again

[mkocansey]

Awesome awesome