LeCoinDuProf, en tant qu’application Angular tire ses règles graphiques des fichiers .scss de ses components. Mais puisque certaines règles doivent être appliquées sur l’ensemble des components, c’est le fichier global.scss qui s’applique. Mais attention, LeCoinDuProf est aussi une application Ionic. Or les components Ionic héritent des règles de style de /theme/variables.scss. Il faut donc faire cohabiter tout ce petit monde pour obtenir un style graphique cohérent et propre à créer une identité visuelle.
Palette de couleurs
Disons le franchement : je n’ai aucun goût en matière de couleur. Il y a des gens qui savent harmoniser les teintes, les nuances, les subtilités. Bah pas moi. Déjà, de base, je ne les vois pas bien. En plus, je manque clairement de vocabulaire pour les décrire. Qu’à cela ne tienne : on a des outils fantastiques pour nous aider.
En suivant les conseils de Camille FRANC sur https://99designs.fr/blog/conseils-design/la-psychologie-des-couleurs-en-webdesign/, j’ai opté pour une couleur principale orange.
https://paletton.com est un outil qui permet de trouver les couleurs complémentaires les unes des autres, afin d’assurer un contraste suffisant entre les couleurs et une homogénéité des teintes. J’entre donc que ma couleur principale sera orange #ffaa00. En choisissant l’option tetrad, 3 couleurs complémentaires sont proposées mais nous n’en retiendrons que 2 : bleu #1240AB et vert #ffd300.
Nous voici équipés pour nous rendre sur le générateur de palette de Ionic https://ionicframework.com/docs/theming/color-generator. Le orange deviendra notre couleur primary, le bleu sera notre secondary et le vert tertiary. Nous ne changeons pas les autres couleurs et nous récupérons le thème à copier coller dans /src/theme/variables.scss :
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #ffaa00;
--ion-color-primary-rgb: 255, 170, 0;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #e09600;
--ion-color-primary-tint: #ffb31a;
/** secondary **/
--ion-color-secondary: #1a60ff;
--ion-color-secondary-rgb: 26, 96, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #1754e0;
--ion-color-secondary-tint: #3170ff;
/** tertiary **/
--ion-color-tertiary: #009051;
--ion-color-tertiary-rgb: 0, 144, 81;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #007f47;
--ion-color-tertiary-tint: #1a9b62;
/** success **/
--ion-color-success: #10dc60;
--ion-color-success-rgb: 16, 220, 96;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #0ec254;
--ion-color-success-tint: #28e070;
/** warning **/
--ion-color-warning: #ffce00;
--ion-color-warning-rgb: 255, 206, 0;
--ion-color-warning-contrast: #ffffff;
--ion-color-warning-contrast-rgb: 255, 255, 255;
--ion-color-warning-shade: #e0b500;
--ion-color-warning-tint: #ffd31a;
/** danger **/
--ion-color-danger: #f04141;
--ion-color-danger-rgb: 245, 61, 61;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #d33939;
--ion-color-danger-tint: #f25454;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 34, 34;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 244, 244;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
Image background
C’est vrai que la mode est au flat design et au fond de page en texture ou en couleur unie. Mais bon, c’est mon projet, donc je fais ce que je veux ;P, et j’ai décidé d’utiliser une image en fond d’écran. Pour qu’elle soit visible, il faut la déclarer en background du body dans /src/global.scss
body {
background: radial-gradient(ellipse at center, var(--ion-color-light) 0%, var(--ion-color-light-tint) 100%);
background-image: url(/assets/img/home.jpeg);
background-size: cover;
background-position: center;
}
Puisque nous voulons que cette image soit visible par transparence à travers les pages, toujours dans body dans /src/global.scss, nous ajoutons au ion-content:
ion-content {
--background: rgba(255, 255, 255, 0.95);
}
Maintenant, tous les ion-content sont opaques à 95%, mais nous voulons ajouter une exception au menu latéral gauche et le rendre moins opaque. C’est dans le .scss de son component /src/app/app.component.scss qu’il faut régler la transparence du ion-menu mais également celle du ion-content qu’il contient :
ion-menu {
--background: rgba(255, 255, 255, 0.5);
ion-content {
--background: transparent;
}
}
Ajustements
Dans l’ensemble, les styles par défaut de Ionic sont topissimes, mais ça ne nous dispense pas de les ajuster en cas de besoin.
Par exemple, pour enlever la bordure blanche autour de la liste dans le menu latéral gauche et colorer les éléments de la liste au survol de la souris, il faut ajouter à /src/app/app.component.scss
ion-list {
padding: 0;
ion-item:hover {
--background: var(--ion-color-light);
}
}
La largeur de l’application n’est pas non plus limitée de base, et sur un écran de 27 pouces, c’est clairement trop large. Donc toujours dans /src/app/app.component.scss :
ion-app {
max-width: 1400px;
margin: 0 auto;
}
Enfin, le menu bas sur mobile doit être plus dense que ce qui est défini par défaut, faute de quoi les icônes ne tiendront pas les unes à côté des autres sur un écran de 5 pouces. Donc dans /src/app/pages/tabs/tabs.page.scss nous ajoutons
ion-tab-button {
--padding-end: 0px !important;
--padding-start: 0px !important;
}
Conclusion
Je suis très loin d’être un artiste, mais avec quelques techniques simples, nous avons vu dans cet article comment personnaliser le style graphique de LeCoinDuProf pour le doter d’un design original tout en nous appuyant sur l’excellent et énorme travail fourni par l’équipe de Ionic.
Commentaires récents