Closed darcosion closed 2 years ago
Cette découverte : https://github.com/darcosion/Echosounder/issues/3#issuecomment-1100954629 a permis d'intégrer la palette de couleur à l'intégralité du CSS actuel.
Le soucis de la palette est qu'elle est désigné en terme de variable CSS sous la forme de "couleur". Il faut la transformer pour conserver des notions de "background", "front", "widget", et surtout "contraste" et d'autres terminologies de ce genre (à creuser en UI/UX).
Avant de basculer sur les thèmes, une dernière refacto est à faire : cytoscape utilise des couleurs inscrites en dur.
Il faut donc s'arranger pour que le thème employé par cytoscape soit "dynamique" et employé par tous les services. Peut-être l'occasion dans ParentCtrl
de faire un objet "thème" ?
L'issue 9ac7eedb182d2289d10b5e01c45c1db4111c58df nous fais avancer sur le sujet, on a le chargement pour la partie cytoscape, il nous reste le basculement d'un thème à l'autre, la création de plusieurs thèmes et tout sera bon.
Le commit a3b875c72b894d9c88ac873a6978d2a06b35d744 fait avancer les choses. Néanmoins beaucoup de problèmes à relever.
Pour commencer, la gestion de thème se fait au niveau recommandation selon csstricks : https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
Via des valeur html[data-theme='darkgreen'] { }
. Mon thème de base est donc le darkgreen. Les prochains seront du "redviolent", et "bluehack". A chaque transformation de thème, je dois remplacer également le RGB, c'est très fatiguant (à automatiser donc).
Un bug vraiment étrange de CSS était la non prise en compte des thèmes.
Quand j'avais ce code :
html[data-theme='darkgreen'] { ... };
html[data-theme='white'] { ... };
html[data-theme='whitehard'] { ... };
Une partie de mon affichage dans le menu de config avait des bug et impossible de switcher de thème.
Mais avec :
html[data-theme='darkgreen'] { ... }
html[data-theme='white'] { ... }
html[data-theme='whitehard'] { ... };
Donc sans les ;
, mystérieusement, cela fonctionne. Ce qui m'amène à m'interroger : A QUOI SERVENT LES ;
???
Pour finir, dans le graphNetwork
une fonction loadStyle()
a été créé et est appelé par un event à chaque changement de thème.
Ce dernier commit donne un exemple et une couleur de debug : 2a3a0b24f9ba8b3c6a2b4114614c274a90dfafa9
Pour moi, la fonctionnalité est achevée.
Actuellement, il n'y a qu'un "dark theme". Il est principalement porté par les variables CSS de couleur ici : https://github.com/darcosion/Echosounder/issues/3#issuecomment-1037173459
Il serait intéressant de mettre en place différents thèmes avec un menu à coté du titre echosounder pour proposer leurs application, qui changeraient les couleurs appliqués aux variables CSS.
Cette fonctionnalité risque par ailleurs de mener à des refactoring divers, notamment pour la partie CSS du graphe ainsi que pour la partie CSS pur où beaucoup de conversions ne fonctionnaient pas avec l'opacité et où il a été obligatoire d'effectuer de l'écriture en dur de
rgb()