darktable-theme

user.css

/* custom darktable theme on top of darktable-elegant-darker
   created by BeF - 05/2024
   see https://gist.github.com/bef/562f282d7157a7ef47b99dc91693fb5a
*/

/* custom colors */
@define-color checked #3ea0d7;
@define-color visible-border @grey_60;
@define-color panel_bg @grey_05;
@define-color picture_bg @grey_05;
@define-color star-color #f2d12a;

/* darktable colors */
@define-color fg_color @grey_80;
@define-color plugin_label_color @fg_color;
@define-color plugin_bg_color @grey_20;
@define-color lighttable_bg_color @bg_color;
@define-color lighttable_preview_bg_color @bg_color;
@define-color darkroom_bg_color @picture_bg;
@define-color darkroom_preview_bg_color @picture_bg;

@define-color thumbnail_bg_color @picture_bg;
@define-color thumbnail_selected_bg_color @grey_25;
@define-color thumbnail_font_color @grey_75;

@define-color timeline_bg_color transparent;
@define-color timeline_fg_color @grey_40;
@define-color timeline_text_bg_color @grey_20;
@define-color timeline_text_fg_color @grey_80;

/* font */
.dt_plugin_ui,
.dt_bauhaus,
.dt_bauhaus_popup,
*,
combobox,
combobox *,
togglebutton,
togglebutton *,
notebook,
notebook *,
notebook tab,
notebook tab *,
table,
table *,
row,
row *,
frame,
frame *,
filechooser,
filechooser *,
filechooserdialog,
filechooserdialog *,
alignment,
entry,
entry *,
textview,
textview *,
dialog,
dialog *,
colorswatch,
colorswatch *,
stack,
stack *,
scrollbar,
scrollbar *,
scale,
scale *,
button,
button *,
treeview,
treeview *,
menu,
menu *,
separator,
eventbox,
eventbox *,
box,
box *,
button,
checkbutton check,
entry,
textview,
#non-flat,
#iop-panel-label,
#lib-panel-label,
#snapshot-button entry
{ font-family: "Lato", sans-serif; }

/* header toolbar */
#header-toolbar {
  padding: 0.9em 0.28em;
  background-color: @panel_bg;
  border-radius: 0.56em 0.56em 0 0;
}
#header-toolbar .dt_module_btn
{
    margin-left: 0.35em;
    margin-right: 0.35em;
}
#filter-colors-box .dt_module_btn
{
  padding: 2px 0;
  margin: 0;
}

/* top bar + view buttons */
#view-label,
#view-dropdown
{
  font-size: 1em;
  border-radius: 0.14em;
  color: @disabled_fg_color;
}
menuitem label,
#view-dropdown,
#view-dropdown menuitem,
#top-hinter widget > #view-label
{
  padding: 0.07em 1.4em;
  margin: 0.2em 1em;
}

#top-hinter > box:nth-child(1)  {
  opacity: 0.5;
  padding: 0em;
}

/* left/right toolbar + modules */
#right, #left {
  background-color: @panel_bg;
}

#module-header {
  margin: 0.25em 0.1em 0 0.1em;
  padding: 0.6em 0.4em;
  background-color: @plugin_bg_color;
  border-radius: 0.42em 0.42em 0 0;
}
revealer .dt_plugin_ui {
  margin: 0 0.1em 0 0.1em;
  border-radius: 0 0 0.42em 0.42em;
}

#right #module-header .dt_module_btn:nth-child(1):checked,
#right #basics-header-box .dt_module_btn:nth-child(1):checked {
  background-color: @checked;
}

#basics-box-labels {
  background-color: @panel_bg;
  margin: 0.25em 0.1em 0 0.1em;
}
#basics-module-hbox {
  background-color: @plugin_bg_color;
  border-radius: 0 0 0.42em 0.42em;
  margin: 0 0 0.25em 0;
}
#basics-header-box {
  background-color: @plugin_bg_color;
}
#basics-module-hbox > box {
  padding: 0 0.7em;
}

/* modules tabs */
#modules-tabs {
  margin: 0.25em 0.1em 0.05em 0.1em;
  background-color: @panel_bg;

}
#modules-tabs .dt_module_btn {
  background-color: @button_bg;
  border-radius: 0.42em 0.42em 0 0;
  margin: 0.1em 0.1em 0 0.1em;
}
#modules-tabs .dt_module_btn:checked,
#modules-tabs .dt_module_btn:hover {
  background-color: @button_hover_bg;
}

#right .search {
  margin: 0.28em 0.1em 0em 0.1em;
}

/* thumbnails */
#thumb-back {
  border: 0.1em solid @bg_color;
}
#thumb-main:selected #thumb-back,
#thumb-main:active #thumb-back {
  border: 0.1em solid @visible-border;
}
#thumb-main:hover #thumb-back {
  background-color: inherit;
  border: 0.1em dashed @visible-border;
}

.dt_overlays_hover #thumb-main:hover .dt_thumb_btn,
.dt_overlays_hover #thumb-main:hover .dt_thumb_btn,
.dt_overlays_hover_extended #thumb-main:hover .dt_thumb_btn,
.dt_overlays_always #thumb-main:hover .dt_thumb_btn:active,
.dt_overlays_always #thumb-main:selected .dt_thumb_btn:active,
.dt_overlays_always_extended #thumb-main:hover .dt_thumb_btn:active,
.dt_overlays_always_extended #thumb-main:selected .dt_thumb_btn:active,
.dt_overlays_mixed #thumb-main:hover .dt_thumb_btn:active,
.dt_overlays_mixed #thumb-main:selected .dt_thumb_btn:active,
.dt_overlays_hover_block #thumb-image:hover .dt_thumb_btn:active,
.dt_overlays_hover #thumb-main:hover #thumb-star:active,
.dt_overlays_hover_extended #thumb-main:hover #thumb-star:active,
.dt_overlays_always #thumb-star:active,
.dt_overlays_always_extended #thumb-star:active,
.dt_overlays_mixed #thumb-star:active,
.dt_overlays_hover_block #thumb-image:hover #thumb-star:active
{
  color: @star-color;
}

.dt_overlays_hover_extended #thumb-main:hover #thumb-bottom,
.dt_overlays_mixed #thumb-main:hover #thumb-bottom,
.dt_overlays_hover #thumb-main:hover #thumb-bottom
{
  background-image: linear-gradient(rgba(30, 30, 30, 0.7) 0%, rgba(30, 30, 30, 0.7) 90%, rgba(30, 30, 30, 0) 100%);
}

.dt_overlays_hover_block #thumb-image:hover #thumb-bottom
{
  background-image: none;
  background-color: rgba(30, 30, 30, 0.8);
}