Interface grey-elegant bleu

[michel ruiz]

Bonsoir tout le monde
Ne voulant pas polluer le sujet précédent (Interface Dark Orange) je crée le mien.
Fortement inspiré par ce dernier mais je trouve l'orange et/ou le jaune trop envahissant.
Aussi dans la soixantaine (décidément...) et voulant rester sur le thème grey-elegant j'ai joué avec les bleus

le seul problème que j'ai rencontré est celui de la police système , que malgré la case cochée, darktable ne prend pas en compte.
Donc j'ai une modif dans le css
Autre détail, les bulles info sont en police "roboto", et là c'est au-delà de ce que j'ose faire.
Ce n'est qu'un détail, mais nicoauffray si tu passes par là et que tu as le temps......merci d'avance
Voici le .css

Code :

@import '/usr/share/darktable/themes/darktable-elegant-grey.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-grey.css");*/

@define-color bleu #00FFFF;  /* bleu */
@define-color bleu_f #03224C;  /* bleu foncé */
@define-color bleu_c #26C4EC;  /* bleu clair */


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

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

/* Modules box (plugins) */
@define-color plugin_bg_color @grey_50;
@define-color plugin_fg_color @bleu;
@define-color section_label @bleu;
@define-color plugin_label_color @bleu;

/* Modules controls (sliders and comboboxes) */
@define-color bauhaus_fg @bleu_f;
@define-color bauhaus_border shade(@plugin_bg_color, 0.5);
@define-color bauhaus_indicator_border @grey_50;
@define-color bauhaus_fill @bleu_c;
@define-color bauhaus_bg @grey_45;
@define-color bauhaus_fg_hover @grey_95;
@define-color bauhaus_fg_selected @grey_85;
@define-color bauhaus_fg_insensitive alpha(@bleu_f, 0.5);

/* GTK Buttons and tabs */
@define-color button_border @grey_60;
@define-color button_bg @grey_55;
@define-color button_fg @bleu_c;
@define-color button_checked_bg @grey_70;
@define-color button_checked_fg @grey_100;
@define-color button_hover_bg @grey_80;
@define-color button_hover_fg @grey_25;

/* text fields */
@define-color field_bg @grey_45;
@define-color field_fg @bleu;
@define-color field_active_bg @grey_55;
@define-color field_active_fg @bleu;
@define-color field_selected_bg @grey_60;
@define-color field_selected_fg @button_checked_fg;
@define-color field_hover_bg @grey_70;
@define-color field_hover_fg @bleu;

/* Tooltips and contextual helpers */
@define-color tooltip_bg_color @grey_35;
@define-color tooltip_fg_color @bleu_c;
@define-color menu_bg_color @grey_95;

/* Views */
@define-color darkroom_bg_color @grey_75;
@define-color darkroom_preview_bg_color @grey_65;
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color lighttable_preview_bg_color @darkroom_preview_bg_color;
@define-color print_bg_color @darkroom_bg_color;

/* Lighttable and film-strip */
@define-color thumbnail_font_color @grey_35;
@define-color thumbnail_bg_color @grey_70; /* area between border and outline */
@define-color thumbnail_outline_color @grey_65; /* square around image+metadata */
@define-color thumbnail_selected_font_color @bleu_c;
@define-color thumbnail_selected_bg_color @grey_80;
@define-color thumbnail_selected_outline_color @grey_65;
@define-color thumbnail_hover_font_color @bleu;
@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_40;
@define-color graph_border @grey_15;
@define-color graph_fg @grey_100;
@define-color graph_fg_active @bleu_c;
@define-color graph_grid @grey_30;
@define-color inset_histogram alpha(@grey_95, 0.50);

*,
#lib-plugin-ui,
#iop-plugin-ui,
#lib-modulelist,
#bauhaus-popup,
#modules-tabs,
#left,
#right,
combobox,
combobox *,
togglebutton,
togglebutton *,
notebook,
notebook *,
notebook tab,
notebook tab *,
table,
table *,
row,
row *,
frame,
frame *,
alignment,
entry,
entry *,
dialog,
dialog *,
colorswatch,
colorswatch *,
stack,
stack *,
scrollbar,
scrollbar *,
eventbox,
eventbox *,
scale,
scale *,
button,
button *,
treeview,
treeview *,
menu,
menu *,
separator,
eventbox,
eventbox *,
box,
box *
{
    font-family: "BordeauxMedium_Regular", "BordeauxMedium",                  /* best case scenario */
                 sans-serif;                                /* default default */
}

button,
#section_label
{
    font-family: "BordeauxMedium", "BordeauxMedium",
                 sans-serif;
}

#iop-panel-label,
#lib-panel-label
{
    font-family: "BordeauxMedium Italic", "BordeauxMedium",
                 sans-serif;
}

notebook tabs,
#modules-tabs,
#blending-tabs
{
    font-family: "BordeauxMedium",
                 sans-serif;
}

[nicoauffray]

Aussi dans la soixantaine (décidément...) et voulant rester sur le thème grey-elegant j'ai joué avec les bleus

Tes bleus me semblent un peu vif selon moi par rapport à l'objectif du thème gris mais c'est ton choix. En tout cas, le bleu turquoise me semble trop marqué (mais j'en dirais autant de l'orange).

le seul problème que j'ai rencontré est celui de la police système , que malgré la case cochée, darktable ne prend pas en compte.

Ce n'est pas un problème que tu as là. darktable prend très bien en compte ce paramètre mais attention, c'est dépendant du CSS. Donc, la police système s'entend:

- pour le thème par défaut darktable.css : police et taille de police du système
- pour les thèmes élégant : taille de police du système uniquement (la police étant définie par le thème, qui reste toujours prévalent au système ; c'est le principe même du CSS ici).

Donc j'ai une modif dans le css
Autre détail, les bulles info sont en police "roboto", et là c'est au-delà de ce que j'ose faire.
Ce n'est qu'un détail, mais nicoauffray si tu passes par là et que tu as le temps......merci d'avance
Voici le .css

Du coup, si tu veux changer les polices, c'est en effet la seule chose à faire. Pour les bulles info (tooltip), c'est le tag tooltip label qu'il te faut utiliser. Voir ligne 108 du fichier darktable-elegant-darker.css.

---

Je viens d'essayer d'améliorer le contraste du thème gris par défaut afin d'améliorer sa lisibilité. Pourrais-tu essayer de tester le thème gris par défaut avec seulement ces modifications (à ajouter dans les préférences, dans le module CSS) et de les appliquer :

@define-color fg_color @grey_95;
@define-color plugin_fg_color @fg_color;
@define-color section_label @grey_85;
@define-color plugin_label_color @grey_85;
@define-color bauhaus_fg @fg_color;

Je pense que ça améliore la lisibilité (à noter toujours qu'un thème gris ne permet pas autant de contraste qu'un thème sombre, c'est physique). Qu'en penses-tu ?

[michel ruiz]

Bonsoir
@nicoauffray
Merci pour ta réponse
je viens d'essayer le thème gris par défaut avec les modif css que tu m'as donné.
Au début je n'est rien vu  
En cochant/décochant "modifier le thème via les ajustements CSS ci-dessous", on voit qu'il y a une modification.
C'est relativement subtil, mais ça améliore légèrement  le contraste (meilleure lecture), sans modifier l'équilibre général.
Difficile de savoir ou s'arrêter mais je vais regarder ou tu es intervenu

Merci pour les indications pour la police système, et pour le tooltip, je vais regarder

J'avais fait ça un peu par amusement/curiosité, je vais continuer un peu, mais vraisemblablement, je vais revenir au thème initial plus ta petite modif, pour me consacrer à mes photos et avancer dans la maîtrise de cet outil fabuleux

[nicoauffray]

Bonsoir Michel,

Merci de ton retour. C'est normal que ce soit léger. En fait, le texte est passé de grey_90 à grey_95 pour le texte principal et pour certaines parties (titres de sections, texte des modules...), de grey_80 à grey_85.

Les numéros de grey (donc gris en français), c'est le pourcentage de gris sur une bande de gris qui va du noir (00) au blanc pur (100). Donc 95, ça veut dire que tu es dans les 95% entre les 2, donc quasi blanc (à 5%). En bref, le texte est 5% plus blanc. On pourrait monter de 5% encore mais j'ai du mal à mettre du texte 100% blanc sur ce thème. C'est peut-être une erreur, il n'y a rien de rationnel dans ce choix, juste une considération personnelle esthétique (simple ressenti)

Je pense que je vais finalement demander plus de retours entre la proposition que tu viens de tester et celle avec un blanc 100% pour le texte principal, ce qui donnerait ça :

@define-color fg_color @grey_100;
@define-color plugin_fg_color @fg_color;
@define-color section_label @grey_90;
@define-color plugin_label_color @grey_90;
@define-color bauhaus_fg @fg_color;

Peux-tu tester et me dire ce que tu en penses par rapport à la proposition précédente.

[alwa]

Je pense que je vais finalement demander plus de retours entre la proposition que tu viens de tester et celle avec un blanc 100% pour le texte principal, ce qui donnerait ça :

@define-color fg_color @grey_100;
@define-color plugin_fg_color @fg_color;
@define-color section_label @grey_90;
@define-color plugin_label_color @grey_90;
@define-color bauhaus_fg @fg_color;

Peux-tu tester et me dire ce que tu en penses par rapport à la proposition précédente.

Cette proposition me plait, mais je ne suis pas nécessairement bon juge en raison d'une dyschromatopsie.

[FrançoisH]

Je pense que je vais finalement demander plus de retours entre la proposition que tu viens de tester et celle avec un blanc 100% pour le texte principal, ce qui donnerait ça :

@define-color fg_color @grey_100;
@define-color plugin_fg_color @fg_color;
@define-color section_label @grey_90;
@define-color plugin_label_color @grey_90;
@define-color bauhaus_fg @fg_color;

Peux-tu tester et me dire ce que tu en penses par rapport à la proposition précédente.

Cette proposition me plait, mais je ne suis pas nécessairement bon juge en raison d'une dyschromatopsie.

Pour moi c'est encore mieux, merci.

[michel ruiz]

Bonsoir nicoauffray

Là la différence est plus perceptible, et c'est la solution que je vais garder !
Je ne sais pas si ça modifie la perception des couleurs des images, mais ça facilite la lecture à mes yeux !
le seul détail que je verrais bien changer c'est la couleur de la police des modules désactivés dans l'historique.
Comme dans la photo ci-dessous (historique datant de la 2.6) pour "courbe de base" pour laquelle je trouve que sa "désactivation" n'est pas évidente

Mais franchement ce n'est qu'un détail,

@alwa nous allons pouvoir faire un club....

[nicoauffray]

Ravi que ça te plaise. Au vu d'autres retours que j'ai eu (sur le Github darktable notamment), ça risque de finir là-dessus la modif du thème par défaut :

@define-color fg_color @grey_95;
@define-color plugin_fg_color @fg_color;
@define-color bauhaus_fg @fg_color;

Pour la ligne désactivée "courbe de base", je ne comprends pas le problème. En quoi ça n'est pas évident ? Avec ma dernière proposition, le contraste est encore plus fort et ça se voit donc (par le gris) que c'est désactivé.

[FrançoisH]

Bonjour,

question à cent sous : où trouve t-on la liste des "variables" acceptées dans DT ? 
Ce n'est peut-être pas le terme exact, chaque langage ayant sa syntaxe et son vocabulaire, mais je parle par ex de  fg_color

[nicoauffray]

Bonjour,

question à cent sous : où trouve t-on la liste des "variables" acceptées dans DT ? 
Ce n'est peut-être pas le terme exact, chaque langage ayant sa syntaxe et son vocabulaire, mais je parle par ex de  fg_color

Dans le fichier darktable.css par défaut. Et dans les fichiers CSS des autres thèmes pour les spécificités liés à ces thèmes. Donc dans le dossier où est installé darktable . Après, pour le chemin exact, ça dépend de ton système et du mode d'installation. Sous Linux, ça va être un dossier "<dossier installation>/share/darktable/themes".