Skip to content

refactor: use snapshot for RnColorSetter and RnColorPad instead of css#1633

Draft
Doublonmousse wants to merge 8 commits intoflxzt:mainfrom
Doublonmousse:css_snapshot
Draft

refactor: use snapshot for RnColorSetter and RnColorPad instead of css#1633
Doublonmousse wants to merge 8 commits intoflxzt:mainfrom
Doublonmousse:css_snapshot

Conversation

@Doublonmousse
Copy link
Copy Markdown
Collaborator

@Doublonmousse Doublonmousse commented Jan 16, 2026

Screencast_20260120_202024

Uses only snapshot to render the colorsetter (or at least reduces the amount of css and makes the color render through a snapshot call, not a css color variable)

The animation is implemented with a TimedAnimation

For the colorpad, there is still some css left because of the icon light/dark mode switch (that I don't really know how to toggle programatically here)

Note that _some_ css is left because of the icon dark/light variants switch

For now color interpolation is done linearly in rgb space (do we have to do it in another space to be better ?)
@Doublonmousse Doublonmousse changed the title refactor: use snapshot for RnColorSetter instead of css refactor: use snapshot for RnColorSetter and RnColorPad instead of css Jan 17, 2026
@flxzt
Copy link
Copy Markdown
Owner

flxzt commented Jan 30, 2026

Noticing some visual differences, particularly:

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

  • the checkerboard in light mode:
    old:
    old-light-checkerboard
    new:
    new-light-checkerboard

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;
}

This way they stay visible even with light colors on light mode
@Doublonmousse
Copy link
Copy Markdown
Collaborator Author

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)
Screencast_20260131_164142

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

image

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)

@Doublonmousse
Copy link
Copy Markdown
Collaborator Author

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 ...

@Doublonmousse Doublonmousse marked this pull request as draft January 31, 2026 18:52
@Doublonmousse
Copy link
Copy Markdown
Collaborator Author

  • 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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants