I took a day to try dig into GTK Inspector - a tool that seems only available on Linux. No worries! I gave Linux an install, DT, gtk3 tools, and tried to get Darktable working with it.
No luck getting GTK Inspector to launch with DT . I feel a bit lost here, is there a better way to āinspect elementā and see what DT widgets, text elements etc get what UI styling from where?
Are devs typically using sheer knowledge of the source code to make edits? Apologies if this is a hella dumb question.
Thanks! I think Iāve gotten GTK Inspector running my side as well. Will take some time to see if I can hack any UI together myself. The icons seem to be pulled from libgtk but no clue how to get to that exactly.
Working further on design, Iāve had an idea that might seem objectionable but I think makes sense. Obviously the UI is monochrome always, but maybe in the module chooser we can color code them as such:
Since I find the giant list of text names UI below quite hard to work through. Now one can memorize roughly what category they are after, along with icons for further quick recognition. Feels a bit friendlier.
Looking at your recent post I suspect you are referring to the ādarktable-elegant-darkā theme again. For very good reason the default theme is ādarktable-elegant-greyā as @Donatzsky has already mentioned. I think you should choose this theme as a base for your design decisions.
As you say yourself, the UI is always monochrome. This design decision also has a well-founded background. Therefore, I canāt really get along with color anywhere in the UI.
This idea of absolutely no color in the UI seems to be a bit dogmatic. Even Capture One, Da Vinci Resolve, etc, will make light use of color where it makes sense, and Iām sure they have done their internal tests on the psycho visual effects on their users.
Using the images you showed of the splash screen as a guide, I was able to make adjustments to darktable.css
However, there were some things I was unable to change, such as the size of the logo, the font, and a few other settings.
I placed this snippet of code from darktable.css in the configuration window. In my case, it looks like this because I am using a custom template. I hope to release an update for the theme I use soon, where you can see some of the new changes.
/* splash screen */
#splashscreen
{
background-color: @grey_20;
border: 0px solid transparent;
border-radius: 25px;
}
#splashscreen-header
{
padding: 0;
margin: 0;
}
/* make the (nonexistent) title text very small to avoid an obvious bar at top */
#splashscreen-header label
{
font-size: 1%;
padding: 0;
margin: 0;
}
/* style the darktable logo */
#splashscreen-logo
{
}
/* position the darktable version number next to the logo */
#splashscreen-version
{
margin-top: -35pt;
margin-right: -110pt;
font-size: 15pt;
}
/* style the darktable program name */
#splashscreen-program
{
font-size: 48pt;
font-family: Inter, sans-serif;
margin: 2pt;
}
/* style the darktable program description "Photography workflow..." */
#splashscreen-description
{
color: @grey_60;
font-size: 14pt;
font-family: Inter, sans-serif;
padding: 1em;
margin: 1em;
}
/* style the "get ready..." message */
#splashscreen-prepare
{
font-size: 12pt;
font-family: Inter, sans-serif;
margin-top: -5pt;
margin-left: -150pt;
}
/* style the separating bar - without a style, it won't appear or take space! */
#splashscreen-separator
{
border: 0px;
margin-top: 1pt;
margin-bottom: 3pt;
}
/* style the progress message */
#splashscreen-progress
{
border-radius: 15px;
background-color: alpha(@grey_10, 0.8);
min-width: 1em;
min-height: 4em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 8em;
margin-right: 8em;
}
/* style the time remaining */
#splashscreen-remaining
{
color: yellow;
font-size: 150%;
}
Of course, I do not know if this is what @rudantu meant, but reading his post I suppose (on the base of what I assume it states) that the āmodule layouts managerā could benefit from a hint of colour usage revolving around the idea of colour coding modules based around their behaviour.
In such case when you get to edit your preferred modules instead of the huge drop-down menĆ¹ they are regrouped based on colour coding just in that mode where you make you adjust your preferences.
Itās a basic indication of module behaviour to make the selection more intuitive.
As his other screenshot demonstrates, this is the list you are getting, which is currently showing all modules in alphabetical order.
I donāt know about others, but I find it pretty useful, especially if paired with the icons.
Thank you so much for the feedback, critique and support! Iām motivated by course correction so I will see where I can continue to improve. Its inspiring to see what users like @difrkaguilar can put together with that CSS! I definitely have some coding and learning to do.
Some updates from the Penpot workspace:
Lighttable view now has a mockup Plus a ton of design sloppiness has been reworked to speed up eventual dev work . Everything is now much cleaner and consistently built.
It doesnāt look like much. But, Penpot is one of the first apps to implement design tokens - a system that lets one rig variables to design properties like colors, sizes, etc, but beyond just regular degular presets, one can then create sets of dynamically linked tokens to create multiple themes! No need to have six artboards just to show six colorways. Muuuuch cleaner files.
Rest assured, Darktableās middle gray theme is priority - and that I continue to appreciate your feedback!
I donāt really know what exactly would work better - some borders, different background? Maybe some items are already in place but I simply donāt know how to change them.
My hope is that the different states would be easier identifiable at a glance but I donāt really know how to achieve that.
@rudantu I have updated the theme following some of your advice and design suggestions. This is an idea of how the theme can change the user interface. There are many limitations and things I cannot do in CSS, but I am trying to do my best.
Excellent work @rudantu ! Iām very interested to see where this project goes.
Just one minor point: I feel that this āstackā of buttons in the actions module is a bit messy. I think it could do with some alignment into neat columns.
I noticed the colour labels have quite different levels of perceived lightness. Recently I made a palette based on ādarktable ucsā color space that presents each hue at the same level of perceived saturation and lightness. Using the mid level ālightness 50ā from those palettes, here is how it would look on the grey and dark backgrounds for the primaries and secondaries:
I put it here for consideration in your re-design. If interested, the hex values for those colours can be found in the dt ucs max chroma.txt found at the given link.
EDIT: Another possibility is to use the same colours as used in the darktable logo.
A benefit of this token system (quite a new design tool, but a basic CSS concept) is that we can rapidly prototype themes without introducing artboard version control issues. Below is one artboard, one design, but we can rapidly swap the tokens to see new ideas.
I have some eyesight problems and it would be useful to me if was possible to have colour differences between icons or their backgrounds. Having an additional way to distinguish between similar words or icons would help me out.
To keep things transparent, I may need to pause this project for a bit and come back with a fresh mind. You can always visit the full workspace and leave comments, or DM me for editor rights.
In the meantime
Iād love to hear more thoughts on UI/UX ā what apps do you love to use (layout, aesthetics, animation, intuitiveness) that we could reference? Are there experiences or areas in Darktable you struggle with? Eg. the settings for keyboard shortcuts, visual confusions, etc?
For example, Blender has interesting sliders where the value is inside the slider:
Of course a project like this does start to ask scary questions of scope and ambition. However, if the UI icon replacement task alone requires undoing some hardcoded Cairo work, I think lets do all the blue sky thinking at once.
Now, I am naive perhaps, but in a comprehensive spring cleaning project like this, there may be unexpected quality-of-life improvements one can make along the way. So letās dream big!
So, whats the plan?
Logos & Iconography: largely complete! The updated logo, app icons and branding are ready to roll out to wherever they appear. But ideally when everything else is ready.
Website: This would require quite an overhaul, new CSS and some copy pasting of content. Iād love to rig up dark/light modes, good responsiveness, etc. Would a lightweight CMS like Kirby be useful? I can look into building some of this when I return.
The Manual: Just some new CSS to match the site really.
App GUI: I think more design cooking is required. I really wanna Tantacrul this part. parts of the GUI are nice, but we need to actually do some dev and user testing. This will require more work from myself, learning the codebase, and help from collaborators I think. A bit scared and intimidated TBH.
Once all the above is done (hopefully impressing the team enough to convince a yes) we can discuss possibly when and how to integrate into the project. Could be years away, might never happen, but this is the tentative plan.
Launch content: Iām quite skilled at animation and video production, so maybe a short trailer celebrating the new assets, showing the glow-up, user contributed photos, and Darktableās features. Secondly, possibly convince creators like Faizal Westcott to give DT a spin and see what they think!
. I feel a bit lost here, is there a better way to āinspect elementā and see what DT widgets, text elements etc get what UI styling from where?
Plus a ton of design sloppiness has been reworked to speed up eventual dev work 
. Everything is now much cleaner and consistently built.
