Allow users to set individual checkbox colors via the API

[pietroppeter]

not sure if this could be doable with a plug-in, but it was harder than I expected to find an answer that tells me how to change color of the checkbox.

Apparently the key property is accent-color: https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css/58570835#58570835

[bryanbraun]

There a couple of ways we could do this:

1. Using a plugin, we can access this.displayEl and add styles via javascript (either by embedding a scoped <script> tag, or by traversing the DOM nodes for the checkboxes somehow). This step would be even easier if I ported checkboxland to be a web-component under the hood (tempting!)
2. You could just add some CSS styles to the page that reaches into checkboxland and styles the inputs.

Option 2 is what I did for the docs site to normalize the styles across browsers (it uses accent-color like you described): https://github.com/bryanbraun/checkboxland/blob/main/docs/css/cbl-normalize.css

It might be nice to make a little color plugin to do this. In the mean time, it would probably be easiest to add your own stylesheet like the one in option 2.

[pietroppeter]

Option 2 would not allow to have different checkbox with multiple colors, right? E.g. a snake example with a green snake and red "apples".

What I was curious about is to have multiple colors in the same grid.

Also, my JS skills are minimal so my interest right now is to consume the api using Nim's JS FFI :).

This regardless of the color, which I think is an interesting issue to raise anyway.

Great work by the way, loving checkboxland!

[bryanbraun]

Ohh, I see. Yeah, I've thought bit about supporting different colors on individual checkboxes ever since I saw this example my coworker made with a forked version of Checkboxland.

I doubt you would be able to do this with a plugin, since it would require altering the core API. We'd need to change the checkbox data (from a simple 0 or 1) to some sort of object with a color attribute:

// maybe something like this
{
  state: 1,
  color: "#ff0000"
}

It's doable, though it would add complexity. My bigger concern is that it could kind of takes away from the 1-bit, binary, checkboxy-ness of the library.

I think for now, I'd prefer to leave it as-is, but I'll just leave this issue open in case anyone else wants to weigh in.

[pietroppeter]

ah, yes, I did not see that example, nice!

I do agree that checkboxland is probably better off without this, but I guess it also does not hurt to have this discussion open to see that this was taken into account.

Thanks again and have a good day!