Card not dark in dark mode

[BeBel42]

Hi,

This is what I get with this code:

	<div class='mt-6'>
		<?php foreach ($children as $child) : ?>
			<div class='dark:text-red-400'>
				<x-bladewind::tag label="pending" color="red" />
				<x-bladewind::card>gg</x-bladewind::card>
				<a :href="{{  route('show.' . $child['type'], [$child['type'] => $child['id']]) }}">
					{{ $child["name"] }}
				</a>
			</div>
		<?php endforeach; ?>
	</div>

As you can see, the card is completely white
I am using bladewind v2.5.12, the latest version at the time of writing

Maybe the background color of the tag should be darker, and its text color lighter in dark mode? That would increase readability

[mkocansey]

Hello @BeBel42 have you defined your dark mode colours in your tailwind.config.js file as described here

[BeBel42]

Hello @BeBel42 have you defined your dark mode colours in your tailwind.config.js file as described here

Pretty much, yes. Here is how it looks:

import forms from "@tailwindcss/forms";
import colors from "tailwindcss/colors";

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
    ],
    darkMode: "selector",
    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,
            },
        },
    },
    plugins: [forms],
};

[mkocansey]

Code looks good.
I'll look into why the card isn't working in dark mode. Do other BladewindUI components display properly in dark mode for you though?

Regarding the tag colour in dark mode.

I normally do

<div class="inline-block dark:hidden">
    <x-bladewind::tag label="pending" color="red" />
</div>

<div class="dark:inline-block hidden">
    <x-bladewind::tag label="pending" color="red" shade="dark" />
</div>

A bit of a long approach but a workaround for now. Would probably be great to specify if one wants to use the darker shade of the colour in dark mode.

Also, can you please inspect element on one of the cards and copy its generated HTML and paste here.

[BeBel42]

Thank you for the tip for tags!

I have tried to fiddle around to get some clues, and I had this in my tailwind config:

    darkMode: "selector",

Anything marked with dark: was not working. Replacing it with the old

    darkMode: "class",

Works!

While testing I found out that the datepicker input was not fully dark.
But the card works now

<div class="bg-black my-6 p-3 text-green-400 dark:text-red-400 ">
	This is red if dark mode is on
	<x-bladewind::card>
		Hi
	</x-bladewind::card>
	<x-bladewind::datepicker  />
</div>

Gives:

With an html tag like this:

I guess that there is no need to send the html of the card, since it works as expected.
But here is the html of the datepicker input:

<input class="bw-input peer  bw_datepicker  bw-datepicker" x-on:click="showDatepicker = !showDatepicker;" x-model="datepickerValue" x-on:keydown.escape="showDatepicker = false" id="dtp-bw_datepicker" max_date="today" onblur="" tabindex="-1" type="text" name="bw_datepicker" value="" autocomplete="off" placeholder="Select a date">

[mkocansey]

Thanks for the detailed feedback. Very much appreciated.

Strange that darkMode: selector didn't work for you because that's what I use in the BladewindUI docs website.

I'm glad though that good 'ol darkMode: class worked.

I'll look into the datepicker.