Simple users.css hack to improve module separation

Masterpiga · October 8, 2025, 7:52am

I may be wrong, but I don’t think that with the current implementation it is possible to target the header of an active module. The only way that I could think of is using the has selector to find headers where the first button is checked, but that doesn’t seem to work, e.g.:

#right #module-header:has(> button:first-child:checked)  { ... }

Maybe someone who knows better can confirm whether this is possible?

Nice, I integrated this but using a pastel green color to stay closer to the spirit of the gray themes. Here is the updated snippet with accents:

@define-color header_color shade(@plugin_bg_color, 0.7);
@define-color active_module_icon_fg #9FE2BF;
@define-color active_module_icon_fg_hover #9FE2BF;

/* Shape and border of module headers. */
#left #module-header,
#right #module-header,
#right #basics-header-box {
  background-color: @header_color;
  border-radius: 0px;
  margin: 0px; 
  padding: 4px;
}
#left #module-header {
  border-top-right-radius: 10px;
}
#right #module-header,
#right #basics-header-box {
  border-top-left-radius: 10px;
}

/* Remove the 1px light gray border between widgets in the quick settings. */
#basics-box-labels widget {
  border: 0px;
}

/* Make active modules stand out a bit more. */
#right #module-header > button:first-child:checked,
#right #basics-header-box > button:first-child:checked {
  color: @active_module_icon_fg;
}
#right #module-header > button:first-child:hover,
#right #basics-header-box > button:first-child:hover {
  background-color: black;
}

/* Special handling for "module order". */
#right > box:last-child #module-header {
 background-color: @bg_color;
 border-radius: 0px;
 margin-right: 0.9em;
}

And here it’s how it looks:

Jetze · October 8, 2025, 9:12am

Thanks again, I combined this with @todd 's color of green as I found it more visible. Always had a little trouble seeing if a module was active - my eyes aren’t too good unfortunately. Kind regards, Jetze

anon42863590 · October 8, 2025, 9:50am

Nice work all!

Love this tinkering of the UI as per others my eyes ain’t great, using #00ff3f for my popping green

I think it would be great to have a section here on the forum dedicated to UI tinkering/Custom themes via LUA etc etc?

wrjfoto · October 8, 2025, 10:19am

Small change, big effect. Many thanks.

leonidas111 · October 8, 2025, 10:54am

Thanks for sharing. It simply helps.

PD1 · October 9, 2025, 2:21pm

Thanks @priort for the idea of green icon and @Masterpiga for implementing it . It greatly helps

dnlyko · October 12, 2025, 2:42pm

Thank you. Certainly an improvement. I applied it in the ‘Ansel Project’ though.

Pascal_Obry · October 12, 2025, 4:11pm

I applied it in the ‘Ansel Project’ though.

Why bother to post here then? Given the history with Ansel I find this a bit offensive, sorry if it was not the case.

raublekick · October 12, 2025, 7:09pm

Really loving this CSS! Much easier for my eyes.

Masterpiga:

I may be wrong, but I don’t think that with the current implementation it is possible to target the header of an active module. The only way that I could think of is using the has selector to find headers where the first button is checked, but that doesn’t seem to work, e.g.:
#right #module-header:has(> button:first-child:checked)  { ... }
Maybe someone who knows better can confirm whether this is possible?

I’m no expert but doing some searching it looks like GTK may not support the .has() pseudo-class selector. css: Support for Level 4 Functional Pseudo-classes (has, where, is) (#7200) · Issues · GNOME / gtk · GitLab

It would be nice to be able to different background colors for the header in different states:

Collapsed and off
Collapsed and on
Expanded and off
Expanded and on

The little power button on the modules does this, but I can’t figure out how.

Masterpiga · October 13, 2025, 6:06am

Yes, the button itself can be styled using meta classes, but unfortunately without has the containing header cannot be selected, IIUC.

Christian-B · October 13, 2025, 8:26am

Hello,
Thank you for sharing this code.
I think it’s great. Since I work on a laptop, I also gain a little vertical space.
I just made two changes to the first few lines: I made the header a little lighter (0.85) and used a light red color (F65B3C) for the active buttons.

@define-color header_color shade(@plugin_bg_color, 0.85);
@define-color active_module_icon_fg #F65B3C;
@define-color active_module_icon_fg_hover #F65B3C;

/* Shape and border of module headers. */
#left #module-header,
#right #module-header,
#right #basics-header-box {
  background-color: @header_color;
  border-radius: 0px;
  margin: 0px; 
  padding: 4px;
}
#left #module-header {
  border-top-right-radius: 10px;
}
#right #module-header,
#right #basics-header-box {
  border-top-left-radius: 10px;
}

/* Remove the 1px light gray border between widgets in the quick settings. */
#basics-box-labels widget {
  border: 0px;
}

/* Make active modules stand out a bit more. */
#right #module-header > button:first-child:checked,
#right #basics-header-box > button:first-child:checked {
  color: @active_module_icon_fg;
}
#right #module-header > button:first-child:hover,
#right #basics-header-box > button:first-child:hover {
  background-color: black;
}

/* Special handling for "module order". */
#right > box:last-child #module-header {
 background-color: @bg_color;
 border-radius: 0px;
 margin-right: 0.9em;
}

Greetings from Luberon,
Christian

elGordo · October 13, 2025, 5:01pm

I’ve always found the off/on state a little bit difficult to differentiate. I just tried it and it solves my problem. Thanks! +1 for adding this to the theme options.

Carte_Blanche · October 16, 2025, 8:01am

Thanks a ton for this!

RawConvert · October 16, 2025, 10:33pm

Thanks @Masterpiga , nice.
I’ve never used CSS or modified DT so I’ve perhaps messed up… It’s not working for me. I pasted into general but no change. I also quit DT and re-launched in case that helped. Here’s what my prefs now look like:-

I have clicked “save css and apply”!
I’m using the Appimage, 5.3.0+450~gc554ed8046, in case that’s relevant.
It created user.css in .config/darktable as it said it would, looks ok on a quick eyeball.

raublekick · October 17, 2025, 3:10am

You’re missing at least one line from the beginning of the snippet. I think this happened to me too when I initially copied and pasted from here, not sure why it missed some lines.

RawConvert · October 17, 2025, 8:34am

Thanks, that’s fixed it, and the green is nice too. I think missing the lines is to do with the scrolling window in my browser. I should have checked more carefully though!

Masterpiga · October 18, 2025, 9:36am

As it appears that folks liked this, I followed your advice and created a PR for two new themes:

github.com/darktable-org/darktable

Adds two new themes (darktable-elegant-grey-rounded-accents and darkt…

master ← masterpiga:master

opened 09:31AM - 18 Oct 25 UTC

masterpiga

+150 -0

Adds two themes that improve module separation in the grey themes (elegant, icon…s) while respecting as much as possible the philosophy of the grey themes. The themes were initially implemented as user.css edits in [a post on Pixls.us](https://discuss.pixls.us/t/simple-users-css-hack-to-improve-module-separation/53368/1). They make headers a bit darker, add a rounded inner corner and a pastel-green accent to active module indicators: <img width="345" height="486" alt="image" src="https://github.com/user-attachments/assets/84ec19fc-a077-4ab5-8afc-4ed17d6723e2" />

archiemac · October 22, 2025, 1:47pm

Thanks, @Masterpiga. I personally find the subtle visual distinctions these alterations introduce to be very helpful. I appreciate that this may not be so for everyone; but for me they’re really useful. Many thanks for posting so that those who like the effects may use them.