Tailwind checkboxes are solid white in dark mode

[bengs]

Checkbox classes in the Tailwind views contain both text-indigo-500 and dark:text-white.
This causes checkboxes to display like this when checked in dark mode:
.
Solution: remove all dark:text-white classes from checkboxes:
.
Also the checkboxes are repeated a little in the code, refactoring them to a blade component might be a good thing to do, so they're utilised similarly to this:

<x-livewire-tables::inputs.checkbox wire:model="selected" wire:loading.attr.delay="disabled" value="{{ $row->{$this->getPrimaryKey()} }}"  />

Then if people want to change look of the checkboxes eg the primary *-indigo-* colour classes they only need to publish & modify classes inside inputs/checkbox.blade.php rather than components inside multiple folders liketable/td, table/th tools etc.

[lrljoe]

Good idea with refactoring into a blade, however bulk actions changes slightly in the next version, as it moves to AlpineJS approach.

I'm currently reviewing more of the blades to get more refactored, and removing some of the existing theme behaviour where the code is repeated, and using conditional classes.

Expect the custom blade for a checkbox to be in the version after this imminent release.

[lrljoe]

I've tested in the current develop stream, and the checkbox works as expected in light/dark modes for Tailwind 2 and 3:

Dark

Light

I suspect either someone else spotted this and did a PR, or I inadvertently fixed it while migrating the code over to Alpine!

[lrljoe]

If you can test using the develop branch and let me know if its still an issue or not, then that'd be handy!

[bengs]

Aha, it's still happening for me on the develop branch but your screenshot was helpful because I'd assumed the checkboxes were supposed to be indigo in both light and dark mode, but in your testing they're white. So the problem is actually with the checked colour classes not working as expected in tailwinds default system dark mode. When I inspect the CSS the dark:bg-gray-900 it is being overriden by the combination of dark:text-white and the following @tailwindcss/forms CSS:

[type="checkbox"]:checked, [type="radio"]:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

Which picks up on the dark:text-white and also makes the background colour white.
Screenshot of applied CSS:

However if you use darkMode: 'class', in your tailwind config, then it works because this CSS takes precedence:

:is(.dark .dark\:bg-gray-900) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

There is an open tailwind forms issue for it here.
Personally I think the checkboxes work well as indigo in both light and dark modes, but either way if we follow Adam Wathan's suggested fix changing the active checkbox colours to utilise checked:bg-* instead of text-* colours that works. Here's a copy of your bulk-actions.blade.php checkbox classes using checked:bg-indigo-600 and dark:checked-bg-indigo-500 etc instead of text colours and that equalises the behaviour across both dark modes for me:

<input class="rounded border-gray-300 checked:bg-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:checked:focus:bg-indigo-500 dark:checked:hover:bg-indigo-500 dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600" type="checkbox" />

End result in dark system and class mode (I'm focussed on the first checkbox here):

Light:

[bengs]

Also nice work with the Alpine checkboxes on the develop branch, they're notably more responsive to toggle.

[lrljoe]

No problem, more to come imminently in AlpineJS migrations as it really smooths the experience.

[lrljoe]

Tweaked the labels so that I've captured the enhancement request with the blade for checkboxes.

[lrljoe]

Just to update, and be realistic! In terms of refactoring checkboxes into a blade. This is on the roadmap, but not in an immediate release.

It may not even be present until 3.x, as I've recently been reviewing the blades as a whole, and migrating to a smoother experience is such a large piece of work, that it's likely to make it into 3.x instead.

I will however look closely at the form inputs, and see if I can refactor them as an interim measure

[iamgoodbytes]

Hey friends, bumped into this issue as well and saw that it was logged here. I updated to 2.14 but still have the white on white checkboxes. Is that something that will be released later?

I tried to find it in the CHANGELOG but that mentioned "Bulk Actions (alpine.js)".

Just checking. Thanks to both for picking this up!

[bengs]

@iamgoodbytes it might be a while before it's fixed but a quick fix in the meantime is to set dark mode manually by adding darkMode: 'class', to your tailwind.config.js file like this:

module.exports = {
  darkMode: 'class',
  // ...
}

And adding a dark class to your <html> element:

<html lang="en" class="dark">

More info here: https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

[iamgoodbytes]

Thanks @bengs - that does the trick!

[lrljoe]

I'll make a note to update the docs to reference dark mode, thought it was in there already to be honest.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.