Styling darktable using CSS

The ability to customize the looks of Darktable has been present for some time now.

Over the default style (elegant-grey or icons-grey), I want to achieve following things.

  • Rejected photos slides could be rendered using different background color, perhaps diagonal lines? I want to cull a series of photos down to one or two images and want to see the rejections as well as the potential candidates at once. Now the rejection information has to be discovered by mouse-hover.
  • Perhaps hide the new “copy & import” button just to avoid accidentally using it. (It looks like a great feature but I have my own file management system in place.)

Making these styles have two separate problems: figuring out the correct selectors, and discovering available styling mechanisms. I have some trouble with both of these problems.

I am being lazy by asking about these here, not researching things fully beforehand. But I think perhaps there’s altruistic value in my query, spreading information and whatnot.

I think the slide styling example could become the meat of a nice blog post to enlighten people about this niche feature.

The CSS for darktable is quite well commented. I would take a look at darktable.css to start with and then play around with making tweaks in preferences > general.

As the first step,

I can adjust the bg with this trivial rule:

#thumb_back  {
 background-color: #abc;
}

Now if I want to match only rejected thumbs, according to the documented CSS I should be watching #thumb_reject:active. It’s a sibling to #thumb_back so a quick search on CSS selectors lead me to an incorrect try:

#thumb_reject:active ~ #thumb_back {
 background-color: #abc;
}

Web standards move so quickly so I am not exactly assuming that GTK CSS selectors syntax matches that of what browsers support, and MDN or W3S document. So I don’t know what is possible or if my syntax is wrong.

Edit:

Apparently per the specs, E ~ F matches elements F that is immediately preceded by an E. Confusing wording heh.

Gtk Inspector is also a very useful tool for identifying elements in the darktable UI.

2 Likes

Click on star icon in top right of lighttable view and see different overlays options. You have different overlays and some that allow to show such icon by hovering and other that allow to show such icon permanently.

1 Like

didn’t know this nice tool yet :+1:

The button at the top-left is the most useful. Click it and then click an element to go to the CSS for that element