Material Design 3 inspired theme for Darktable (css only)

Software darktable
21

OK, I feel silly :face_with_open_eyes_and_hand_over_mouth:
How do I use this theme?
I tried pasting all the code in customising CSS box in the settings and placing CSS files into darktable’s themes folder.
They do appear in the selectable list, but nothing happens.

22

No need to feel silly, I did exactly the same thing and wondered why nothing changed :joy:

Your theme folder should look something like this :point_down:

image
image1582×569 47.1 KB

2 Likes
23

Many thanks!

Man, how awesome is this :fire:

1 Like
24

Thanks for sharing

25

Looks great, thanks for making this available.

Where can I increase the font size for the switches between Lightable, Darkroom etc. They look tiny on a 4K screen.

grafik

26

I downloaded this theme package to try on darktable 4.6.1, on both Linux and Windows. I should mention that I don’t use the darktable database, so whenever I open darktable I have an empty library. This may affect what I am seeing.

darktable-elegant-grey:

image
image1583×882 94.6 KB

md3-grey:

image
image1583×882 74.1 KB

Seeing it on my own display, I find that the font used in the MD3 themes is much more readable than the font in the built-in themes. I think the md3-grey is still darker than it should be for a neutral editing environment, and will probably affect edits.

On md3-grey, much of the screen content is missing in, and above and below, the image area. However, if I run the mouse pointer over the area above and below the image area, icons and tool appear (fully or partially) as the mouse pointer goes over their locations. Sometimes they stay visible, and sometimes they disappear again. The descriptive information within the image area does not appear until I click the “add to library” button.

On md3-grey, the button in the histogram for “histogram” doesn’t work. The others (waveform, etc.) do work.

I find I have to stop/start dt after switching from one of the built-in themes to one of the md3 themes. However, I don’t have to do that to switch from one built-in to another or from an md3 theme to a built-in theme. I’ve never added custom themes before, so I don’t know whether this is as expected.

EDIT: Please note that I don’t know whether the above problems are particular to the MD3 themes or the implementation of themes in dt. I can open issue(s) for either project once I know which one is responsible.

27

You’ve got the theme installed wrong, from the looks of it you’re missing the base darktable.css. Perhaps I should see if the licensing allows me to just copy its contents into my base file lol

Either way, make sure there’s a darktable.css file at the root of your /themes/ folder

28

Look for the following in md3/base.css and adjust font-size:

#top-hinter widget label,
#top-hinter combobox {
  font-size: 18px;
  font-weight: 500;
}
1 Like
29

I’m not surprised at all that I did it wrong! I was indeed missing the base darktable.css. Thanks for catching my mistake. Everything works well now.

Before copying it from /usr/share/darktable/themes to ~/.config/darktable/themes, I tried adding an import from /usr/share/darktable/themes/darktable.css, but that didn’t work.

FWIW, and I’m sure you would know this, the dt manual says:

Please note that the structure of darktable’s internal CSS changes frequently and you may need to make significant changes to your own themes when new versions of darktable are released.

I don’t know how tightly darktable.css is tied to darktable code. The answer to that might determine whether it is a good or bad thing to copy darktable.css to ~/.config/darktable/themes and risk having a theme that doesn’t play well with the next release of dt.

30

Hey peeps, for those following this thread only, I’ve just pushed another update to the theme:

  • History panel and collection filters have been styled correctly now (no more huge history panel, though I recommend not having it spanning its full height either way since i removed some of its side padding since the scroll bar has it too);
  • Added side spacing to top information blocks in left and right panel;
  • Removed side padding for buttons when they’re in a row of 2, and drop downs are set to match;
  • Made dialogs and drop downs use a darker shade of the background colour, so it’s easier to distinguish the title bar;
  • Removed module header toggles from the left panel. Sorry, would remove them from the right in lighttable too if I could;
  • Decreased scrollbar padding;
  • Adjusted spacing and styling slightly for the top bar.
6 Likes
31

Now it is indeed much better, thank you :+1:

32

How can I make the module header stand out more from the module content?

As you can see in the image below it is hard to tell where the “styles” module ends, even the “buttons” (create, edit, etc) are much more distinguishable than the module header itself.

image
image484×1051 14 KB

33

This is awesome! This should be the default theme, I think it’s definitely more legible and looks better too

1 Like
34

It got updated though, so it looks slightly different now, but it is still nicer than default. I hope it doesn’t break when DT 5.0 comes out…

35

Now is the time to test for 5.0! You don’t have to hope, you can know.

36

image
image987×405 27.9 KB

At this point this is essentially 5.0…

1 Like
37

Just installed your latest. Very nice. Thanks for all the work.

38

What version is that? the theme was made for 4.8.1, if you’re running anything later than that you’ll have graphical bugs.

If you are running 4.8.1 can you make sure you copied the exact folder structure from the github release? just having the base.css isn’t enough, well it is, if you don’t care about the modules bits, but that looks like you’re missing some of the css files.

39

The readme.md was actually updated for 5.0 so who knows…

40

There are scheduled releases 2x per year…it will be soon in December