Se connecter

cherob · (Modification du message : 02-01-20, 14:29 par cherob.)

Ayant déjà utilisé utilisé une interface colorée dans la version précédente de DT, j'ai essayé de la reproduire avec la nouvelle version et je met le css à dispo de la communauté.
voici un copie d'écran:

et le CSS

@import url("/opt/darktable/share/darktable/themes/darktable.css");
@import url("/opt/darktable/share/darktable/themes/darktable-icons.css");

@define-color rouge #ff5a19; /* rouge 65 */
@define-color rouge_c #cc643d; /* rouge clair 55*/
@define-color rouge_f #610000; /* rouge foncé */

@define-color marron #dd8900; /* marron 65*/
@define-color marron_c #dfb56e; /* marron clair 55*/
@define-color marron_f #402600; /* marron foncé 18*/
@define-color marron_g #87615c ; /* marron gris */

@define-color orange #ba8b00; /* orange */
@define-color orange_c #ffd500; /* orange clair */
@define-color orange_f #8b6200; /* orange foncé */

@define-color jaune #a4a300; /* jaune */
@define-color jaune_c #dfde00; /* jaune clair*/
@define-color jaune_f #767500; /* jaune foncé*/

@define-color vert #467d45; /*vert */
@define-color vert_f #072b05; /*vert foncé*/
@define-color vert_c #5ec25a; /*vert clair*/

@define-color bleu #4867b4 ; /* bleu */
@define-color bleu_g #375567; /* bleu gris */
@define-color bleu_f #132246 ; /* bleu foncé */
@define-color bleu_c #7295ed; /* bleu clair */
@define-color bleu_gc #b0c6d9; /* bleu gris clair */

@define-color mauve #752075; /*mauve*/
@define-color mauve_c #c153be; /*mauve clair*/
@define-color mauve_f #2d042d; /*mauve foncé*/

/* General */
@define-color selected_bg_color @bleu; /* legacy stuff */
@define-color border_color @gris_1; /* border, when used */
@define-color bg_color @grey_15; /* general background */
@define-color fg_color @marron_c; /* general text */
@define-color base_color @fg_color; /* legacy stuff */
@define-color text_color @vert_c; /* same */
@define-color disabled_fg_color @grey_40; /* disabled controls */

/* Scroll bars (sliders) */
@define-color scroll_bar_inactive @grey_40;
@define-color scroll_bar_active @vert;
@define-color scroll_bar_bg @vert_f;

/* Modules box (plugins) */
@define-color plugin_bg_color @grey_20;
@define-color plugin_fg_color @grey_70;
@define-color section_label @jaune_c;
@define-color plugin_label_color @orange;

/* Modules controls (sliders and comboboxes) */
@define-color bauhaus_fg @grey_70;
@define-color bauhaus_border shade(@plugin_bg_color, 0.5);
@define-color bauhaus_indicator_border @grey_20;
@define-color bauhaus_fill @mauve_c;
@define-color bauhaus_bg @grey_35;
@define-color bauhaus_fg_hover @rouge_c;
@define-color bauhaus_fg_selected @vert_c;
@define-color bauhaus_fg_disabled @grey_70;
@define-color bauhaus_fg_insensitive alpha(@bauhaus_fg, 0.5);

/* GTK Buttons and tabs */
@define-color button_border @grey_30;
@define-color button_bg @grey_25;
@define-color button_fg @grey_65;
@define-color button_checked_bg @grey_45;
@define-color button_checked_fg @orange_c;
@define-color button_hover_bg @grey_30;
@define-color button_hover_fg @vert_c;

/* text fields */
@define-color field_bg @grey_15;
@define-color field_fg @grey_65;
@define-color field_active_bg @grey_25;
@define-color field_active_fg @mauve_c;
@define-color field_selected_bg @vert_f;
@define-color field_selected_fg @jaune_c;
@define-color field_hover_bg @grey_45;
@define-color field_hover_fg @rouge_c;

/* Tooltips and contextual helpers */
@define-color tooltip_bg_color @grey_05;
@define-color tooltip_fg_color @grey_70;
@define-color really_dark_bg_color @grey_05;

/* Views */
@define-color darkroom_bg_color @grey_45;
@define-color darkroom_preview_bg_color @vert_f;
@define-color lighttable_bg_color @grey_45;
@define-color lighttable_preview_bg_color @vert_f;
@define-color print_bg_color @grey_45;

/* Brushes */
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(black, .8);

/* Lighttable and film-strip */
@define-color thumbnail_font_color @grey_75;
@define-color thumbnail_bg_color @grey_40 ; /* area between border and outline */
@define-color thumbnail_outline_color @grey_50; /* square around image+metadata */
@define-color thumbnail_selected_font_color @orange_c;
@define-color thumbnail_selected_bg_color @bleu_g;
@define-color thumbnail_selected_outline_color @grey_50;
@define-color thumbnail_hover_font_color @jaune_c;
@define-color thumbnail_hover_bg_color @bleu_gc;
@define-color thumbnail_hover_outline_color @bleu_f;
@define-color filmstrip_bg_color @darkroom_bg_color;
@define-color culling_selected_border_color @grey_10;
@define-color culling_filmstrip_selected_border_color @grey_10;

/* Graphs : histogram, navigation thumbnail and some items on tone curve */
@define-color graph_bg @grey_10;
@define-color graph_border @grey_05;
@define-color graph_fg @grey_75;
@define-color graph_fg_active @grey_95;
@define-color graph_grid @grey_05;
@define-color inset_histogram alpha(@grey_65, 0.50);

/* Reset GTK defaults - Otherwise dt inherits Adwaita default theme dark */

**jpverrue** · 02-01-20, 09:28

Bonjour @cherob,
Merci pour ta contribution !
Pourrais-tu éditer ton message pour enlever le code de mise ne page qui se trouve au début ? Cela faciliterais grandement la lecture ;-)
Pourrais-tu également mettre le texte de ton fichier de thème dans une balise "code" cela allègerais également la présentation tout en rendant cette partie plus facile à lire. Merci !

La balise "code" se trouve dans l'éditeur complet accessible via le bouton "Nouvelle réponse" ; avec le bouton "<>"

philippus · 02-01-20, 11:03

Merci, je viens de tester ... et ça marche sans soucis !!

j'aime bien ce thème il est très sympa ...

nicoauffray · 02-01-20, 13:14

Oui, je rejoins jpverrue. Un post plus propre avec ces recommandations serait le bienvenu.

Pour les couleurs, attention tout de même aux effets qu'elles peuvent faire sur la manière dont l'image a traitée est perçue. Il y a plusieurs effets visuels, illusions d'optiques, faussant le traitement de l'image, déjà rien qu'avec lest interfaces sombres, alors avec des couleurs en plus. Oui, je sais Lightroom est en noir, mais en réalité bien plus par effet marketing et parce que le noir flatte l'oeil pour les images, permettant une interface plus contrastée et flatteuse mais moins juste pour un traitement réellement correct d'une image. Je vous invite à voir (ou revoir) l'article sur la 3.0 sur LInuxfr et les explications à ce sujet et la raison pour lequel le thème gris a été créé (seul moyen de réduire ces effets ; avec éventuellement des couleurs pour ceux qui le souhaitent mais qui doivent rester sobres et éviter celles flashy pour garder cet effet).

Evidemment, ce ne sont ici que des recommandations pour éviter les effets/illusions d'optique expliquées dans l'article sur la 3.0 que je vous partage. Pour le reste, ce sont bien sur vos choix/envies, avec les conséquences potentielles sur le traitement de vos images. On peut quoiqu'il arrive réussir à sortir de belles images malgré tout. Et heureusement !

**jpverrue** · 02-01-20, 18:49

À propos de Flashy, je m'explose les rétines chaque fois que j'utilise "zones de couleurs". Ce grand carré rempli de couleurs plus que flashy, rien que de le regarder quelques secondes pour placer un point sur la courbe et c'est foutu. Je dois aller prendre un café pour que mes yeux redeviennent utilisables. Alors quand il y a plusieurs points à placer/régler, je te dis pas mon état avec tout ce café. J'arrive plus à tenir ma souris !!!

nicoauffray · 02-01-20, 21:24

(02-01-20, 18:49)jpverrue a écrit : À propos de Flashy, je m'explose les rétines chaque fois que j'utilise "zones de couleurs". Ce grand carré rempli de couleurs plus que flashy, rien que de le regarder quelques secondes pour placer un point sur la courbe et c'est foutu. Je dois aller prendre un café pour que mes yeux redeviennent utilisables. Alors quand il y a plusieurs points à placer/régler, je te dis pas mon état avec tout ce café. J'arrive plus à tenir ma souris !!!

C'est vrai que ce module là est à la fois plus beau et plus (trop) flashy oui. Je ne peux rien faire avec du CSS pour ça par contre !

mimi85 · 02-01-20, 22:53

Lors de la compilation de la 2.7, j'avais déjà proposé un css coloré, il suffit de l'adapté à la 3.0, voir le fil de discussion:
https://forums.darktable.fr/showthread.php?tid=4072

Depuis j'ai repris ce css et je suis en train de l'adapté aux différents thèmes: darktable bien sûr mais aussi darktable-elegant-dark que je commence à utiliser, par contre pour darktable-elegant-grey pas évident de trouver une/des couleurs qui contrastent sans être agressives et qui conserve l'apport du gris moyen.

pour darktable-elegant-dark voici ma contribution:

Code :
@import '/usr/share/darktable/themes/darktable-elegant-dark.css';

/*

    This file is part of darktable,

    copyright (c) 2019 Aurélien Pierre

    darktable is free software: you can redistribute it and/or modify

    it under the terms of the GNU General Public License as published by

    the Free Software Foundation, either version 3 of the License, or

    (at your option) any later version.

    darktable is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License

    along with darktable.  If not, see <http://www.gnu.org/licenses/>.

*/

/*@import url("darktable-elegant-darker.css");*/

/* This has been tested with GTK 3.24 on Gnome */

@define-color yellow_05 #ffff00;

@define-color yellow_10 #DD9944;

@define-color yellow_15 #ffcc66;

/* General */

@define-color selected_bg_color @grey_50; /* legacy stuff */

@define-color border_color @grey_25; /* border, when used */

@define-color bg_color @grey_30; /* general background */

@define-color fg_color @yellow_10; /* general text */

@define-color base_color @fg_color; /* legacy stuff */

@define-color text_color @yellow_10; /* same */

@define-color disabled_fg_color @grey_55; /* disabled controls */

/* Scroll bars (sliders) */

@define-color scroll_bar_inactive @grey_55;

@define-color scroll_bar_active @grey_65;

@define-color scroll_bar_bg @grey_25;

/* Modules box (plugins) */

@define-color plugin_bg_color @grey_35;

@define-color plugin_fg_color @yellow_10;

@define-color section_label @yellow_10;

@define-color plugin_label_color @yellow_10;

/* Modules controls (sliders and comboboxes) */

@define-color bauhaus_fg @yellow_15;

@define-color bauhaus_border shade(@plugin_bg_color, 0.5);

@define-color bauhaus_indicator_border @grey_35;

@define-color bauhaus_fill @yellow_05;

@define-color bauhaus_bg @grey_30;

@define-color bauhaus_fg_hover @grey_100;

@define-color bauhaus_fg_selected @grey_95;

@define-color bauhaus_fg_insensitive alpha(@yellow_15, 0.5);

/* GTK Buttons and tabs */

@define-color button_border @grey_45;

@define-color button_bg @grey_40;

@define-color button_fg @yellow_05;

@define-color button_checked_bg @grey_60;

@define-color button_checked_fg @grey_100;

@define-color button_hover_bg @grey_65;

@define-color button_hover_fg @grey_30;

/* text fields */

@define-color field_bg @grey_30;

@define-color field_fg @yellow_10;

@define-color field_active_bg @grey_40;

@define-color field_active_fg @yellow_10;

@define-color field_selected_bg @grey_50;

@define-color field_selected_fg @grey_100;

@define-color field_hover_bg @grey_60;

@define-color field_hover_fg @yellow_10;

/* Tooltips and contextual helpers */

@define-color tooltip_bg_color @grey_20;

@define-color tooltip_fg_color @yellow_05;

@define-color menu_bg_color @grey_20;

/* Views */

@define-color darkroom_bg_color @grey_60;

@define-color darkroom_preview_bg_color @grey_50;

@define-color lighttable_bg_color @grey_60;

@define-color lighttable_preview_bg_color @grey_50;

@define-color print_bg_color @grey_60;

/* Lighttable and film-strip */

@define-color thumbnail_font_color @grey_65;

@define-color thumbnail_bg_color @grey_55; /* area between border and outline */

@define-color thumbnail_outline_color @grey_65; /* square around image+metadata */

@define-color thumbnail_selected_font_color @yellow_05;

@define-color thumbnail_selected_bg_color @grey_40;

@define-color thumbnail_selected_outline_color @grey_65;

@define-color thumbnail_hover_font_color @yellow_10;

@define-color thumbnail_hover_bg_color @grey_95;

@define-color thumbnail_hover_outline_color @grey_65;

@define-color filmstrip_bg_color @darkroom_bg_color;

/* Graphs : histogram, navigation thumbnail and some items on tone curve */

@define-color graph_bg @grey_25;

@define-color graph_border @grey_20;

@define-color graph_fg @yellow_10;

@define-color graph_fg_active @yellow_05;

@define-color graph_grid @grey_20;

@define-color inset_histogram alpha(@grey_80, 0.50);

menu,

menuitem arrow

{

  background-color: @menu_bg_color;

}

Perso la couleur permet une meilleure visualisation de l'écriture pour mes yeux, sans difficulté.

Se connecter
Utilisateur :
Mot de passe :	Mot de passe oublié ?
	Se rappeler