Noticing some visual differences, particularly:

• the borders seem to be set to gray with some transparency. For comparison
  old:
  
  new:
  

• the checkerboard in light mode:
  old:
  
  new:
  

Seems like you were able to re-implement everything in the snapshot function after all.
I think the css can be further reduced to the bare minimum setting the widget's size.

I don't see a difference when replacing the css with, or am I missing something?

.colorpad {
    min-width: 32px;
    min-height: 32px;
    padding: 0px;
    margin: 0px;
}


.colorsetter {
    min-width: 32px;
    min-height: 32px;
    padding: 0px;
    margin: 0px;
}

I don't see a difference when replacing the css with, or am I missing something?

There still needs to be some css for the icon to switch between light/dark mode (otherwise they stay in light mode and invisible with white being selected)

Maybe there's still a little too much still there ? (I want the brightness change on hover/click to be there, transitions to register ...)

I've just tried to add some borders on the colorsetter for light mode (otherwise they aren't separated from the rest) though not necessarily happy with the results

And yes the checkboard pattern does not hold in light mode (not sure how to get this information from the snapshot function though to adapt things depending on the light/dark mode)

I can do a

            let checkboard_color = {
                match adw::StyleManager::default().color_scheme() {

to dispatch color depending on the light/dark mode but that won't update immediately, only on the next redraw ...

• I've fixed the dark/light checkboard pattern (with the widget redrawing when the color scheme changes between dark/light mode)
• WidgetExt::color seems to be able to replace the (deprecated) lookup_color("window_fg_color") call (though I've only changed it for the colorsetter/colorpad and not everywhere)