Mode sombre

La période bêta du mode sombre de PPP a commencé. Voici ce qui devrait se passer :

La première fois que vous visitez le site, PPP choisira le thème à vous montrer en fonction des paramètres de votre système d’exploitation.

Comment activer le mode sombre pour tous vos gadgets et applications

De nos jours, vous pouvez activer le mode sombre à peu près n’importe où. Utilisez ce guide pour voir exactement comment l’activer sur vos appareils et applications.

Si vous souhaitez modifier cette valeur par défaut, faites défiler jusqu’au pied de page en bas de n’importe quelle page et vous verrez un ensemble de boutons de commutation qui vous permettent de choisir clair ou sombre selon vos préférences, ou d’autoriser les paramètres de votre système d’exploitation à continuer. faire le choix pour vous. Quoi que vous choisissiez, le thème changera (si nécessaire) et ce choix sera enregistré pour vous. La prochaine fois que vous chargerez une page ou que vous partirez et reviendrez sur le site, vous verrez clair ou sombre selon ce choix.

Remarque : il s’agit d’un paramètre spécifique à l’appareil et non d’un paramètre de compte. Vous pouvez choisir le thème de votre choix pour l’appareil que vous utilisez, et ce choix doit être stocké pour vous tant que vous autorisez les cookies fonctionnels (vous devez le faire pour que les commentaires fonctionnent).

Vous avez changé d’avis sur votre choix ? Appuyez sur le bouton. Vous voulez changer juste pour regarder autour de vous ? Appuyez sur le bouton, puis appuyez à nouveau lorsque vous avez terminé.

Pourquoi n’ai-je pas fait un joli petit bouton dans l’en-tête avec un soleil et une lune ? Parce que je déteste ça, pour être honnête. Le texte est traduit, l’iconographie n’est pas et n’est pas universelle, et le sélecteur de thème à trois choix aurait nécessité une case à cocher contextuelle et tout cela est simplement plus complexe que ce qui deviendra une chose à définir et à oublier pour la plupart. utilisateurs. Ou ne le définissez jamais, étant donné que le thème du site par défaut suit le thème de votre système par défaut.

Changements mondiaux

J’ai effectué un nettoyage du code au cours de ce processus et supprimé certains anciens scripts et HTML qui n’étaient pas utilisés. Si j’ai cassé quelque chose, je ne l’ai pas trouvé, mais si vous voyez quelque chose d’étrange, faites-le-moi savoir.

Ce sont les bases, pour en savoir plus sur ce à quoi vous attendre sur chaque thème, lisez la suite.

Modifications du thème de la lumière

Il y a quelques changements relativement subtils dans le thème de la lumière que vous ne remarquerez peut-être pas vraiment. Restez ici pour les détails ou passez à la section du thème sombre.

PPP fonctionne sur un thème payant créé pour un blog Ghost que j’ai acheté lorsque j’ai commencé à créer le site. Toutes les pages et le style de page (le HTML et le CSS ainsi que le JS) sont arrivés sous forme de produit fini. Ghost permet une personnalisation étendue, et tous les thèmes sont ouverts à l’utilisateur qui peut les modifier à sa guise, et j’y ai beaucoup ajouté au fil des mois depuis sa création.

Le thème que j’ai choisi, World Times, est hautement personnalisable, et faire cette personnalisation lorsque j’ai commencé a pris beaucoup de mon temps. J’ai dû gravir une courbe d’apprentissage très rapidement – ​​et j’ai bénéficié d’une aide très appréciée – rien que pour effectuer des changements fondamentaux.

Si je savais alors ce que je sais maintenant…

Le thème est structuré de manière très simple à l’aide de variables pour les couleurs, six principales et quelques extras. Il y avait trois nuances de gris : gris moyen, gris moyen foncé, gris foncé ainsi que blanc et noir. L’idée ici est que si vous souhaitez modifier les éléments d’accent, vous pouvez modifier le blanc et le noir. Si vous souhaitez modifier les couleurs de la plupart des éléments de texte, vous pouvez modifier les trois gris.

Juste un problème. Le gris moyen-foncé est la couleur principale du texte, et il était trop clair. Je ne pouvais même pas supporter de le regarder à petites doses. J’ai donc fait une correction rapide et sale (gris) et je l’ai rendu ainsi que le gris plus foncé beaucoup plus foncés. Le résultat était d’aggraver une faiblesse existante du thème. Le gris le plus foncé est très difficile à distinguer du noir, sauf si vous regardez de gros blocs de couleur. Quand j’ai eu fini, les éléments noirs et toutes les nuances de gris foncé étaient effectivement de la même couleur.

Le texte doit être noir. Désolé si c’est doctrinaire et contraire au concepteur Web moderne qui bouge la rondelle et qui aime ses gris pâles, mais le texte doit être noir lorsque l’arrière-plan est clair.

Au fur et à mesure que je construisais le thème sombre, il est devenu très évident qu’en rendant tout le texte noirâtre sur le thème clair, j’avais retiré une certaine valeur à l’expérience utilisateur en indiquant la page actuelle dans le menu ou en identifiant les éléments comme des liens lorsqu’ils étaient affichés. Je ne suis pas stylé en bleu. J’ai fait deux choses pour résoudre ce problème, vous le verrez maintenant sur le thème clair : j’ai rendu le texte réellement noir, entièrement sur #000000, et j’ai fait de ce qui avait été conçu pour être un gris plus foncé une teinte suffisamment claire pour être utilisée à côté. , respectez les directives d’accessibilité, ne me donnez pas de maux de tête tout en fournissant des indices visuels à l’utilisateur sur le fonctionnement des choses, afin que vous n’ayez pas non plus de maux de tête.

Cela enfreint une “règle” de conception car désormais les titres sont parfois plus légers que le texte, et… je m’en fiche. Leur signification est bien transmise par la police, l’épaisseur de la police et la taille de la police. La forme suit la fonction, et la fonction de la plupart des choix de conception liés à la typographie est de transmettre un sens, sans être joli ou conforme à ce qui est cool de nos jours.

Thème sombre

Passons maintenant aux choses amusantes.

Le thème est construit autour d’un fond sombre teinté de bleu, d’un texte pas tout à fait blanc et d’une version de la « couleur de la marque » bleue pour les couleurs d’accent et de lien. L’une des choses amusantes à propos du thème sombre était de ne pas avoir à saturer autant le bleu de la couleur du lien pour qu’il s’affiche bien et le résultat est un style plus cohérent sans sacrifier le travail principal des couleurs (transmettre un sens au utilisateur).

Maintenant pour l’honnêteté.

Chacun a ses goûts personnels. Je veux des commentaires, mais “Je pense que l’arrière-plan devrait être tel ou tel parce que j’aime mieux cette couleur”, c’est bien si vous avez besoin de le diffuser, mais je n’agis pas en conséquence. “Je ne vois pas assez bien tel ou tel” ou “Cette page est en noir sur noir, qu’avez-vous fait?” obtiendra de l’action.

Il y a certaines limitations que je ne peux pas surmonter : le champ de recherche, la fenêtre contextuelle de connexion et l’icône flottante ne me sont pas accessibles pour le moment. Il y a une demande pour les rendre personnalisables à un moment donné, mais cela pourrait ne pas se produire.

Passons maintenant au terrier technique du lapin qui s’adresse à toute personne intéressée par la façon dont cela a été réalisé. Si cela ne vous intéresse pas, passez à la section Commentaires.

Comment cela a été fait

Je ne prétends pas que c’est la meilleure, la seule ou même la dernière manière de mettre en œuvre ce thème, mais voici comment je l’ai fait. Tout d’abord une demande : veuillez ne pas me donner d’instructions sur la façon dont j’aurais dû procéder, en supposant un accès côté serveur. Je n’ai pas ça. J’ai aussi choisi, avec malice dans le cœur, d’ignorer le culte du “pur CSS”, car si vous interdisez Javascript sur votre navigateur en 2023, eh bien, ça ne fonctionnera pas correctement, c’est comme ça.

Pour commencer, le thème est construit avec SASS et, comme n’importe qui le ferait s’il construisait un thème avec uniquement un mode d’éclairage, ils ont utilisé des variables SASS pour les couleurs. Cela vous permet d’insérer le nom de la variable dans n’importe quelle déclaration CSS impliquant la couleur, et vous pouvez même l’insérer directement dans une déclaration rgba ou utiliser les fonctions d’éclaircissement ou d’assombrissement. Tous ces cas d’utilisation sont apparus dans les styles de thème.

Étant donné que les variables SASS sont compilées lors du processus de construction, elles sont statiques, vous ne pouvez pas simplement déclarer un deuxième ensemble de couleurs pour elles. Et cela signifie que deux routes s’offrent à moi :

1. réécrivez tout le CSS qui impliquait des couleurs comme thème sombre – donc trouvez-le dans environ 10 documents différents, copiez-le puis insérez de nouvelles valeurs de couleur dans chaque déclaration. C’était totalement impossible puisque le CSS était écrit selon SASS, donc la seule vraie solution était de simplement faire un ensemble complètement dupliqué de déclarations CSS à charger en tant que thème sombre. Ou…
2. faire ce que j’ai fait

Ce que j’ai fait, c’est Google. J’avais commencé par la page CSS Tricks sur les modes sombres, et j’utilisais essentiellement leur JS tel quel pour ma première version.

Un guide complet du mode sombre sur le Web | Astuces CSS

Le « mode sombre » est défini comme une palette de couleurs qui utilise du texte de couleur claire et d’autres éléments de l’interface utilisateur sur un arrière-plan de couleur sombre. Mode sombre, thème sombre, mode noir, mode nuit… ils font tous référence et signifient tous la même chose : une interface majoritairement sombre plutôt qu’une interface majoritairement claire.

À partir de là, je suis parti à la recherche de la façon de gérer ce problème variable. Le thème est construit sur Bootstrap, donc toutes ces variables CSS Bootstrap inutilisées pour la couleur étaient là. J’en voulais plus ! Les variables CSS ne sont pas statiques, vous pouvez donc simplement créer deux jeux de couleurs : un pour le foncé et un pour le clair. Et j’ai commencé par cela en utilisant ce charmant article qui vous montre comment convertir l’un en l’autre…

Ajouter un mode sombre à votre site Web à l’aide de SCSS

La plupart des développeurs l’utilisent et l’apprécient depuis des années. Après la sortie d’iOS 13, il a été introduit dans…

Mais ensuite j’ai dit, attends, attends. Et toutes ces déclarations rgba ? Je ne peux pas y coller une variable CSS. Oh non! Je dois recalculer toutes ces couleurs et faire du gris foncé uniquement avec un alpha de 9 et du gris foncé avec 8 etc. etc., et puis si je change une couleur, je change onze millions de variables, et… quelqu’un avant moi a eu ce problème. La clé pour commencer bêtement et savoir comment réussir est de s’en souvenir. Quelqu’un d’autre l’a fait et a écrit un blog à ce sujet en essayant d’exploiter les synergies pour monétiser l’engagement – ​​ou simplement pour être gentil, l’un des deux.

Générer des nuances de couleur à l’aide de variables CSS

Écrire sur le grand et beau désordre qui crée des choses pour le World Wide Web.

Jim m’a tout expliqué. Une fonction SASS pour convertir les hexadécimaux en RVB, suivie d’une méthode de déclaration de la variable CSS sous forme de nombres séparés par des virgules, et voilà, j’ai été enregistré. Tout ce que j’avais à truquer, c’était l’utilisation d’éclaircir et d’assombrir.

Le processus était le suivant :

1. reformuler toutes les couleurs du thème clair en tant que variables CSS en utilisant la méthode ci-dessus
2. parcourir tout le CSS et changer des choses comme color: $white à color: rgb(var(--white)); où la variable –white a été définie sur 255 255 255
3. assurez-vous que je n’avais rien cassé
4. créez des versions sombres de ces mêmes variables en utilisant la même conversion d’une valeur hexadécimale en nombres (je l’ai fait pour que mon éditeur de code me montre la couleur à côté de la valeur hexadécimale, et je n’ai pas besoin de me rappeler ce que signifient les nombres.)
5. commence à jouer avec les couleurs

Cela semble compliqué, mais le résultat est une très courte section de nouveau CSS et très, très peu de déclarations CSS spécifiques au thème sombre. La majeure partie du montage consistait en une opération de recherche et de remplacement. Une fois ce travail terminé, il ne restait plus qu’à changer un code hexadécimal en un seul endroit et à décider si cela me plaisait ou non.

C’est à ce moment-là que j’ai sauvegardé et réorganisé le thème clair. Et puis j’ai nettoyé la base de code pour me débarrasser des éléments qui avaient été remplacés par des fonctionnalités plus récentes.

Et puis j’ai repensé la façon dont un utilisateur ferait les choses, j’ai lu un peu plus et j’ai opté pour un choix à trois boutons et j’ai utilisé un exemple en ligne comme point de départ. Et oui, tout cela signifie que l’ajout d’un autre thème si cela semble être une bonne idée à l’avenir représente une quantité de travail insignifiante (au-delà de la conception réelle).

Une fois que j’étais plutôt satisfait de l’apparence du thème sombre, j’ai dû m’attaquer aux commentaires.

J’ai peur.

Pour des raisons principalement liées au fait de ne pas dépenser d’argent si je n’y suis pas obligé, je n’ai pas de version de développement en direct du site. Je n’en ai qu’un local, ce qui veut dire que je n’ai pas pu tester complètement l’implémentation du mode sombre sur les commentaires. Je pense que je sais à quoi ça va ressembler, mais je n’en suis pas sûr.

Quelques modifications très mineures ont été apportées aux commentaires sur le thème clair, des choses si subtiles que vous ne pourrez peut-être pas voir de différence.

S’il doit y avoir un problème sérieux, ce sera dans les commentaires en mode sombre. Je vais d’abord me concentrer sur cela et ignorer presque tout le reste.

Nous verrons où cela mène !

Des articles

Certains éléments spéciaux dans les articles ne s’affichent pas correctement dans ma version de développement en raison de certaines différences entre les versions hébergées et auto-hébergées du site. Des correctifs peuvent donc être nécessaires pour ces éléments. Nous les traiterons au fur et à mesure que nous les trouverons.

Outre les limitations mentionnées ci-dessus concernant les éléments que je ne peux pas styliser, les intégrations dans les articles ne prennent pas en charge le mode sombre. Les intégrations Twitter, par exemple, doivent être demandées en mode sombre à leur API, donc la prise en charge du mode sombre doit se faire côté serveur par le client. Quoi qu’il en soit, l’API de Twitter fonctionne à peine, il est donc très peu probable qu’elle prenne en charge plusieurs modes intégrés de manière utilisable.

Retour

Veuillez essayer de conserver vos questions, commentaires ou autres dans cet article. Je ne vois peut-être pas quelque chose que vous collez simplement dans le FTB ou autre.

S’il est cassé, dites-le-moi ! Si vous n’êtes pas sûr, demandez. Essayez, s’il vous plaît, s’il vous plaît, essayez de signaler les problèmes avec suffisamment d’informations pour que je puisse faire quelque chose avec – incluez les paramètres de votre système d’exploitation et le choix que vous faites sur le sélecteur de thème du site. De plus, si vous voyez régulièrement le redoutable « flash de thème incorrect », je veux également en savoir plus.

to www.pensionplanpuppets.com

---

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931

---