Quetions about darktable.css UI

Software darktable
1

Hi, wanted to improve my personal experience with darktable’s UI, I was able to edit most of what I wanted with no problem, but i couldn’t where in the darktable.css is a section to edit the following (I’m attaching a screenshot color coding the UI areas I’m talking about):

Red: the background color for dropdown and sidebars. this is the one I’m the most interested in. the other 2 I’m ok with if there is no way to edit them.
Green: I would like to change the font for the darktable logo, or is it an. svg?
yellow: is there a way to remove, or change those icons at the end of the panels?

DeepinScreenshot_darktable
DeepinScreenshot_darktable1919×1079 454 KB

Thanks in advance guys.

2

Hi,
Sorry I can’t help with your question but… can you tell me where you found the css please?

The FAQ says it’s in ~/.config/darktable but such is not the case. :-/
(kubuntu 18.10)

3

it may also be in /usr/share/darktable.

4

Yep, it’s there. Thank you. :slight_smile:

5

When I used a Mac with Retina display I always changed this via the css. Just search in it for ‘font’ and ‘text size’ (or something similar, cant remember now exactly). One of them contains the font and size to be used for the ‘darktable’ word, the other can be used to modify the overall font size in the modules.

About the color of the drop-down I am not sure. I’ll search later when I get home what other changes I was doing in the css file and eventually post here the diff.

6

It’s really not a good idea to set the UI color to anything but pure grey. You eyes will adapt to the slight blue cast and that might affect your color perception during editing.

7

So, I just played a little with the numbers in the first part of the file and made it a ‘light grey’.

darktable%20css
darktable%20css3000×1940 610 KB

What I changed is the first 20 or so lines in the file:

@define-color bg_color #222;
@define-color plugin_bg_color #333;
@define-color fg_color #eee;
@define-color base_color #444;
@define-color text_color #eee;
@define-color selected_bg_color #666;
@define-color selected_fg_color #eee;
@define-color tooltip_bg_color #BEBEBE;
@define-color tooltip_fg_color #111;
@define-color really_dark_bg_color #595959;
@define-color darkroom_bg_color #777777;
@define-color darkroom_preview_bg_color shade(@darkroom_bg_color, .8);
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color lighttable_preview_bg_color shade(@lighttable_bg_color, .8);
@define-color brush_cursor alpha(white, .6);
@define-color brush_trace alpha(black, .5);
@define-color dark_bg_color #350000;

I am not aware that there is a manual for this, so all you have to do is change and try.

PS: don’t forget to save the original file. You can just copy it back if something goes really wrong. Also, I am sure that there is no warranty that the changes you do for this version will still be compatible with the next one :wink:

I almost forgot… the part that changes the ‘darktable’ font and size is at line 21:

font: 6pt AppleGothic;

This is what I used for the MacBook with retina display.

8

This is the whole of my darktable.css :

@import '/opt/darktable/share/darktable/darktable.css';

@define-color bg_color #777;
@define-color plugin_bg_color #666;
@define-color fg_color #fff;
@define-color base_color #fff;
@define-color text_color #fff;
@define-color selected_bg_color #555;
@define-color selected_fg_color #fff;
@define-color tooltip_bg_color #BEBEBE;
@define-color tooltip_fg_color #111;
@define-color really_dark_bg_color #444;

@define-color darkroom_bg_color #777;
@define-color darkroom_preview_bg_color shade(@darkroom_bg_color, .5);
@define-color lighttable_bg_color #212121;
@define-color lighttable_preview_bg_color #212121;

@define-color dark_bg_color #666;
@define-color border_color #666;

The first line allows to inherit from the official theme so the custom stylesheet won’t get deprecated after a new release (which is likely to happen if you copy/paste the whole file). It’s better because it only overwrites what is needed, and you don’t need to maintain it from version to version.

9

Good idea.

PS: there is plenty of 666 in your file :imp: