making darkroom filmstrip selections more clear

[anoderay]

the problem

In darkrooms filmstrip the states hover, opened and selected are very hard to differentiate because they share the same visual styling. Because of this it is impossible to see wheter the opened image is currently selected. In combination with darkroom filmstrip having the quirk of selecting the currently open image in combination with a clicked image this may lead to in unintentionally acting upon the open image.

See also issue #22277 and the discussion in PR #22285.

possible solutions

I created various mockups and would like to invite discussing how the selection.

current state

solid white/black line

/* solid white line */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{ border: 2px solid white;}

/* solid black line */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{border: 2px solid black;}

👍 Simple, somewhat in keeping with darktable's design language
👎 hard to see on dark/bright images, not necessarily compatible with the different themes

solid gold line

/* solid gold line */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{border: 2px solid gold;}

👍 not too obtrusive, visible on darker and brighter images compatible with brighter and darker themes
👎 conceptually interferes with the marking of grouped images and not 100% in line with the UIs visual language

dashed or dotted white/black lines

/* dashed white */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{border: 2px dashed white;}

/* dashed black */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{border: 2px dashed black;}

/* dotted white */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{border: 3px dotted white;}

👍 fairly visible
👎 visually very busy, bright/dark issues like the solid black/white lines

partial line at the bottom

/* 9 partial lower edge */
#thumbtable-filmstrip #thumb-main:selected #thumb-image{
  border-width: 0 0 4px 0;
  border-style: solid;
  border-image: linear-gradient(to right,
      transparent 33%, gold 33%, gold 66%, transparent 66%) 0 0 4 0 / 0 0 4px 0;
}

👍 I find the concept interesting
👎 but it is too bulky

white line + shadow

👍 simple, visible on bright and dark images
👎 darktables UI doesn't use shading in other places, probably requires more changes then css - at least I didn't get the css shadows to render.

white line + corner marking + shadow

lower right

upper right

(gimp mockups)

👍 very visible, works with brighter and darker images and themes
👍 when adding numbers functional benefit, would especially also make it clear that the active image is (almost) always selected
❓ requires more thought - maybe the number should only be displayed when the thumbnails are sized for "more details"
👎 as far as I know not possible with css theming, requires more code changes.

final thoughts

I am currently using the solid gold line and it works well for me. Together with the corner markings that one would be my favourite. It would be easy to implement and is nicely visible. I am not much of an image-grouper though and cannot judge how annoying it is in combination with image-groupings.

@wpferguson @hats-np @lefth

[hats-np]

For me I prefer either the yellow line (perhaps based on the user accent color?) and the "white line + corner marking + shadow", particularly the numbered upper right, I think it looks pretty good.

[anoderay]

perhaps based on the user accent color?

I thought about that, too. But that would mean the default would be white, which is not very visible with bright images.

[lefth]

I like the look of the folded corner with numbers, but I don't think we really benefit from numbers. What about radio button-like indicator in place of the number? This is how my phone's gallery does it:

And this is how Opera does it on Android:

[hats-np]

Of all those I still prefer the folded corner. The radio checkmarks thing while it is ubiquitous on mobile UI, would look bad on darktable I think.

…

On Tue, Sep 22, 2026, at 3:31 PM, Dan Zwell wrote: *lefth* left a comment (darktable-org/darktable#22361) <#22361 (comment)> I like the look of the folded corner with numbers, but I don't think we really benefit from numbers. What about radio button-like indicator in place of the number? This is how my phone's gallery does it: Image: Image (view on web) <https://github.com/user-attachments/assets/9b1f5f19-2c7e-4081-87e9-c2a68eb4eb43> And this is how Opera does it on Android: Image: Image (view on web) <https://github.com/user-attachments/assets/eb9338d0-627e-40cc-bf2e-7964247b55ec> — Reply to this email directly, view it on GitHub <#22361?email_source=notifications&email_token=A5XNTZOZHGUE6OKXCMM7QKD5QKELVA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKNZXHAZTMNJZGQ42M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLDGN5XXIZLSL5RWY2LDNM#issuecomment-5778365949>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5XNTZKWQGQHH4SK4MDL3VL5QKELVAVCNFSNUABDKJSXA33TNF2G64TZHMZTOOJRHAZTKO2JONZXKZJ3GU2TGNZUGE3DKMZQUF3AE>. Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/A5XNTZLP24HV7CQW3AGP3235QKELVA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKNZXHAZTMNJZGQ42M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJKTGN5XXIZLSL5UW64Y> and Android <https://github.com/notifications/mobile/android/A5XNTZNWHXJPEBFHVQ2LVXL5QKELVA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKNZXHAZTMNJZGQ42M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLTGN5XXIZLSL5QW4ZDSN5UWI>. Download it today! You are receiving this because you were mentioned.Message ID: ***@***.***>

[TurboGit]

Nice, I like the dashed border with the white corner. But the white corner is also used for the local copies. Something to be checked.

[anoderay]

Nice, I like the dashed border with the white corner. But the white corner is also used for the local copies. Something to be checked.

I didn't know about that little corner for local copies, good to know.

Though that local-copy-corner interferes with icons in the filmstirp as it is anyway (see above), which doesn't look great. I wonder whether it would make sense to mark local copies with an icon similar to the keywords and adjustments icons seen in the screenshot above.

[wpferguson]

Why not just turn off the white overlay of the opened image when it's not selected? You still have the arrow to identify the opened image.

[wpferguson]

If you change line 2110 of darktable.css to

.dt_act_on_hover #thumb-main:selected #thumb-back,

the filmstrip will show the correct selection when the mouse is hovered over the filmstrip. When the mouse isn't over the filmstrip the overlay is active which makes the active image appear selected.

[anoderay]

@wpferguson the css you provided in the other issue doesnt change anything for me.

I got what you described to working with:

#thumbtable-filmstrip #thumb-main:active:not(:hover):not(:selected) #thumb-back
{
  background-color: @darkroom_bg_color;
  border-color: @bg_color;
  border-top-color: @border_color;
}

I used it while editing on about 50 Images.
When working with the mouse in the filmstrip it definitely helps discerning between active and selected. In practice i find it somewhat disorienting though as the active image is only very subtly marked with its triangle marking. And the fact that the active image gets highlighted when hovering over the canvas might be confusing for some, too.