Une (sombre) histoire de styles et de themes

J'aime bien utiliser des thèmes sombres pour décorer les fenêtres de mon ordinateur, ça repose les yeux, et puis c'est beau.

Mais ... cela cause parfois un léger problème en consultant certains sites internet.
En effet, mon thème «ordinateur» modifie l'aspect des champs de formulaires sur les sites pour les rendre conformes à sa charte graphique. Les thèmes sombres font généralement en sorte que ces champs apparaissent avec une couleur de fond foncée et un texte de couleur claire.

Sauf que les sites internet utilisent eux aussi des thèmes pour donner du style à leurs pages (tel machin sera bleu, tel autre rouge, etc ...) et certains de ces thèmes «web» stylent aussi les champs de formulaires.
Ceux qui le font bien spécifient 1 couleur pour le fond + 1 couleur pour le texte, avec eux pas de souci ; ceux qui le font à l'arrache ne spécifient que la couleur de fond sans vérifier comment l'affichage se comporte dans diverses situations liées aux navigateurs et aux thèmes de bureaux.

Et c'est là que survient le drame : chez moi avec le navigateur Firefox, le thème «web» est prioritaire sur le thème «ordinateur».

Exemple :

  • mon thème «ordinateur» dit : je veux un fond gris très foncé avec un texte gris clair
  • le thème «web» dit : je veux un fond gris clair

Le résultat qui s'affiche est un fond gris clair avec un texte gris clair. Question lisibilité c'est pas terrible ... le thème «web» a oublié de dire que sur un fond gris clair il faut obligatoirement un texte d'une couleur assez foncée pour être vue/lue.

Heureusement peu de sites sont dans ce cas là et, comme j'ai la chance d'avoir une bonne perception des couleurs je fais avec ou ruse avec un copié/collé depuis un éditeur de texte si j'ai un long texte à taper dans le formulaire.

Là où ça me gène vraiment c'est avec le logiciel Dolibarr dont l'accès à l'interface se fait via un navigateur internet, voyez ce que ça donne avec mes paramètres :

capture-1.png

Quand j'ai juste une facture à éditer, je fais avec en me disant qu'un jour il faudra que je prenne le temps d'aller regarder dans le code pour corriger ça.
Quand j'ai un peu plus de choses à faire, je bascule mon thème «ordinateur» sur une version claire le temps de procéder aux diverses écritures, toujours en me disant qu'un jour il faudra que je regarde comment c'est foutu dans le code pour corriger ça.

Comme ça va plus vite de changer le thème de l'ordinateur - et que me connaissant une fois le nez dans le code du thème de Dolibarr je vais vouloir lui changer toutes ses couleurs - j'ai mis ça sous la pile des trucs à faire beaucoup plus tard. J'ai fini par m'y coller ce week-end.

Me voilà donc partie à la recherche de la feuille-de-style.css parmi les fichiers du thème MD de Dolibarr.

En passant merci aux logiciels libres et open-sources, qui, si une couleur ne nous plaît pas quelque part, nous permettent, au prix de quelques apprentissages, d'aller la modifier.

Surpriiise ! la feuille de style possède une "double extension" : style.css.php

poule-couteau.png

J'aurais au moins appris qu'il est possible d'embarquer du css dans du php. Je précise que je ne cause pas du tout le php, d'où mon ignorance et ma surprise.

L'ignorance n'empêchant pas la curiosité, j'ouvre quand même le fichier pour voir à quoi ça ressemble. Je trouve assez vite la partie qui me semble être coupable d'interférences et je la commente (avec /* au début et */ à la fin du code) pour voir ce que ça va donner.

Pour info le fichier à modifier est /htdocs/theme/md/style.css.php (enfin si on utilise le thème MD, sinon il faudra adapter).

/*input, input.flat, textarea, textarea.flat, form.flat select, select, select.flat, .dataTables_length label select {
background-color: #FDFDFD;
}*/

Rafraîchir la page Dolibarr ...

capture-2.png

C'est déjà plus lisible, il y encore le champs «adresse» qui est resté clair ... le coupable est un peu plus loin, à la ligne 332, commenter ou supprimer :

    /*background-color: #FFF;*/

 

Rafraîchir la page, et hop :

capture-3.png

 

Mais ... oui il y a un mais, ce n'est quand même pas très joli à l'œil ... ma capture d'écran ne couvre qu'une petite partie de la page, sur le reste il y a encore tout plein de champs comme ça. Il vaudrait donc mieux, dans ce cas-ci , laisser les champs en clair et forcer une couleur foncée pour le texte.

J'enlève donc mes commentaires fait précédemment et ajoute un color: #212121 (du gris très foncé) à la ligne 265.

input, input.flat, textarea, textarea.flat, form.flat select, select, select.flat, .dataTables_length label select {
background-color: #FDFDFD; color: #212121;
}

 

Et voilà :

capture-4.png

La prochaine étape, rangée sous la pile des choses à faire plus tard vu que ça va être légèrement moins facile que je le pensais dû au php surprise, sera de changer toutes les couleurs pour que ça soit plus à mon goût car je n'ai pas trouvé mon bonheur sur Dolistore (l'endroit où on peut acheter des thèmes ou modules tout faits pour Dolibarr).

En attendant, voilà quand même une bonne chose de faite. 8)