Dark/Light Mode Issues about formkit HOT 1 OPEN

This is happening because the floating label plugin computes the background color of the closest ancestor that has a background color set when the plugin is created — in order to create the cut-out effect. I can look in to making this more seamless but it's tricky because there's no good way to "watch" for an ancestor background color change.

The plugin does register a handler called updateLabelBackgroundColor that can be used — but you'll have to call it manually and tailor it to your usecase. Here's a demo of how it works on a single node:

https://formkit.link/6aaeeceb141b09ff16b308f9ad2b1929

If you need it project-wide and you know your light/dark strategy (say a class on the html element) or if you have some global state you can watch and respond to, then you could wrap this up in a plugin that fires on every node (checking for the existence of the handler, of course).

Going to mark this as having a work-around but I agree it could be better.

from formkit.