Material Design 3 inspired theme for Darktable (css only)

Just stumbled over this while browsing through r/darktable and thought it to be worth sharing here

4 Likes

Looms quite nice, thanks for sharing.

Looks nice, but has some serious issues. Specifically the white background in the darkroom, which will lead to bad contrast, saturation and overall brightness in the final image. It’s obvious that the author doesn’t understand why the default DT theme looks the way it does.

1 Like

Yeah but the on/off button state is nice.

Exactly. If it was a grey theme it would be much better… Perhaps I’ll open an issue.

You can just change a few lines and put it in the css box to alter things esp color so it should be too hard to adopt/modify or add to any provided theme…

I tried to modify it on my own, but all my attempts ended up with something rather ugly.

EDIT:
I copied all colors from darktable-elegant-grey and it looks half decent. Just to edit the custom buttons and it will be pretty good.
I actually prefer the darktable-elegant-grey since it’s more compact and fits more things on the screen, but I can imagine that with a bit more tweaking it would be very usable.

1 Like

Howdy, I’m the maker of that theme, FYI my colour overrides are at the top of the file if you wanted to edit the theme itself, but I did quickly duplicate the file and did that myself in the md3-base-colours.css file, but I’ll set up a nice multiple file scheme that can can use the colours from the existing themes for more variation :slight_smile:

I’d like to continue styling more of the app otherwise but it’s very frustrating to work with the GTK inspector (probably why there aren’t that many themes as far as I could see) so I’m not sure how much more time I want to spend on this lol esp with the limited CSS subset (no :has, no display)

Welcome!

Yeah, that explains why there are almost no themes for DT out there. As I said, a bit more tweaking and it’s good to go :+1: . People with small screens might appreciate larger margins around everything, for me a compact theme works better.

Interesting theme, @ crit.

I’m wondering about the buttons at the top of each tool.

darktable as-is:
image
in order:

  • on-off
  • tool name
  • multiple instance actions
  • reset parameters
  • presets

the proposed theme:
image

It looks like the last 3 buttons have been re-ordered. I have no theoretical opinion about the order these buttons should be in, but given that users are accustomed to one order, it might cause existing users to make errors for a while.

In the sample, what is the meaning of the reset button being red or white? An indicator of whether there are any changes to reset?

I think if you lighten the background from deep black to grey, it will be easier to see the on/off button when it is off.

Am I missing something here? I thought the ISO 12646 color assessment conditions, which involves a white border, was intended to improve assessment of color, contrast etc. So I am confused by this comment. Thanks.

1 Like

Its a quick check to assess display white and middle grey…if you edit full time on white or black as your background it will skew your edit…

1 Like

Hello, thanks for the compliment :slight_smile:

I didn’t actually change the order (nor do I think i have the option to, order: doesn’t seem to be in the list of properties GTK allows), I just took the screenshot in the quick access panel, which adds those arrows to go to the separate panels.

The button being a faint red is an indicator that there’s changes to reset, that is correct. The contrast is purposely low since the hover is where it goes full red with a dark icon. It’s meant to be a hint, especially since you’re likely to see plenty of these in a panel.

As for future colour combos I’ve just pushed an update to the git that should add the full Darktable colour scheme selection, so you’ve got grey, dark, darker, and high contrast.

Also:

  • I’ve restructured the theme into more manageable css files - The changes are split up based on what they touch or optional changes, with the main theme css files hosting colour swapping only, so you can comment out the relevant import around optional features in a specific theme and keep the rest of the features, like the highlight of the reset icon);
  • I’ve removed the overall margin added to every input and instead used it more sparingly (wish I had access to gap:);
  • the scroll bar no longer janks their relevant panel around;
  • the active modal indicator is slightly thicker and expands on hover to provide a larger click area;
  • I gave the presets icon a hover colour too, the “warning” yellow seemed appropriate as it’s not an instant overwrite of your settings if you misclick, but it is something to be careful of when toggling things around;
  • i styled a few more elements that I’d missed.
4 Likes

@Crit I like your work! Thanks for sharing.

AFAIK the white border needs to be coupled together with a middle grey background, so you have the two points of reference, absolute white and the middle ground.

This is the beauty of small open-source development. You post suggestions and the problems may be fixed within hours.

The theme replaced the grey background with white. For ISO color assessment to work, there needs to be grey around the white frame. Ideally the whole room would be mid-grey, but that’s perhaps taking it a bit too far for most users here :laughing:

Here’s the manual entry on the subject: darktable 4.8 user manual - color assessment
@Crit

2 Likes

image
How can I shrink these margins next to the scrollbars? I tried changing things in scrollbar.css, but no success.

Other than that, I’m enjoying the theme, thank you! :blush:

1 Like

That would be the padding I added to #right and #left, it’s in modules.css at the top, lower it to 4px for the horizontal padding maybe.

Or you might be talking about the margin on scrollbar.vertical near the top of scrollbar.css

Also that’s a lovely pic :slight_smile:

1 Like

Thank you :+1:

EDIT:
This is the setting I was looking for, I changed it to 0 0.2em, thank you.