Olivier’s Theme — Manuel - Légèrement sérieux, sérieusement léger

# Olivier’s Theme — Manuel (En attendant que ce thème soit disponible parmi ceux de la communauté *Obsidian*, vous pouvez télécharger une version préalable dans un *Zip* ⭢ [Olivier’s Theme.zip](http://dr-spinnler.ch/myfiles/CSS/Olivier%E2%80%99s%20Theme.zip) ) > [!info]+ Au préalable > Pour pouvoir bénéficier de toutes les nuances de ce thème, il faut commencer par installer et activer les *plugins* suivants : > * [Style settings](obsidian://show-plugin?id=obsidian-style-settings) — c’est lui qui met à disposition la panoplie des réglages possibles. > * [Contextual Typography](obsidian://show-plugin?id=obsidian-contextual-typography) — indispensable pour bénéficier de certains raffinements de l’espacement vertical des éléments de texte. > [!caution]- Avertissement > Rien qu’avec les palettes en mode “Light” et les 3 couleurs d’accentuation, on a déjà 36 combinaisons possibles. Si l’on ajoute les nombreux choix pour les fonds et les encres en lecture et en écriture, plus le choix des couleurs de “Stabilo Boss”, le tout en “Light” et en “Dark”… on a des milliers de combinaisons ! Il va sans dire qu’il est **impossible** de les tester toutes, une à une ! J’ai pris de grandes précautions pour que tout fonctionne au mieux, en particulier les choix « par défaut ». Si ***dans ces choix par défaut*** vous trouvez quelque chose qui ne fonctionne pas, vous pouvez me le signaler et je corrigerai volontiers. > Après, si vous changez la couleur des fonds et des encres, vous partez à l’aventure et c’est à vous de choisir des combinaisons qui fonctionnent et d’éviter celles qui ne fonctionnent pas. > C’est par l’intermédiaire du mécanisme d’export et d’import des “settings” que l’on va pouvoir échanger des combinaisons plaisantes et intéressantes. ⭢ Si vous êtes impatient de **voir des exemples**, c’est ⭢ [[Olivier’s Theme — Exemples|ICI]] ⭢ [[quelques harmonies intéressantes]] ### Introduction Ce que j’ai recherché, en créant ce thème : * qu’il soit agréable aux yeux… * et confortable ! * la lisibilité est de première importance, tant pour les éléments d’interface que pour les fiches ; c’est pourquoi le thème se devait d’être… * typographiquement correct ; * en particulier, les espaces verticaux ! La plupart des thèmes ne s’en préoccupent pas et ne respectent pas la typographie, ce qui nuit à la lisibilité et à la fluidité de la pensée. * J’ai également supprimé les « soulignés » des liens, qui sont une insulte au bon goût typographique et qui nuisent à la lecture. Les liens sont parfaitement visibles dans une couleur complémentaire à celle du texte. * adaptable — des goûts et des couleurs ! * de nombreux choix sont proposés qui respectent les règles de l’harmonie des couleurs ; * tout en rendant difficile de faire des choix « hideux » ou de mauvais goût — mais si vous vous appliquez, vous y arriverez tout de même… 😉 * sobre… et sophistiqué, tout en même temps ; * grande attention portée aux détails ; * simple à configurer, en dépit des nombreuses options. Une des idées de départ, c’était de mimer la typographie historique et les encres des plumes-réservoir. D’où la présence d’encre bleue (bleu nuit), de fonds « papier » et de parchemin. Notre inconscient y est habitué depuis des siècles et cela contribue au confort de lecture et d’écriture. ### Quel est l’intérêt de toutes ces possibilités ? * “Variety is the spice of life.” « L’ennui naquit un jour de l’uniformité ». * On peut avoir une ambiance colorée différente dans des coffres différents. Il y a un certain nombre de bonnes raisons pour utiliser plus qu’un seul coffre. Avec des couleurs différentes, on sait d’un coup d’œil dans lequel on est. C’est très pratique également quand on utilise la fonction “Exposé” de *MacOS*. * Ça me paraît juste logique d’avoir une fonte dédiée à la lecture et une autre dédiée à l’écriture. La psychologie cognitive confirme qu’il y a un intérêt à cela. Deux fontes différentes correspondant à deux états d’esprits (“mindsets”) différents. * L’intérêt de pouvoir régler séparément le mode « lecture » et le mode « écriture », c’est aussi d’avoir quelque chose de constant pour l’écriture, d’un coffre à l’autre, indépendamment de l’ambiance générale de la lecture. * Quand sont apparues les interfaces “dark”, j’ai commencé par être très sceptique. Ce n’était pas super-bien fait dans tous les programmes. Mais depuis, les choses se sont bien améliorées et il faut reconnaître que quand on est sur son écran, le soir, dans une pièce sans lumière ou à la lumière tamisée, il est bien agréable d’avoir un affichage doux pour les yeux. Mais il n’est pas nécessaire que ce soit de l’ennuyeux noir-gris-blanc. D’où la variété de couleurs sombres, mais quand même gaies, qui sont proposées. * Je pense qu’après des siècles où l’on a lu et écrit avec de l’encre sur du papier, cela fait du sens de mimer ce « feeling » à l’écran. Les écrans modernes, avec leur finesse d’affichage, le permettent largement, sans compromettre la lisibilité, bien au contraire. D’où quelques possibilités que je vous recommande d’explorer : * la palette « parchemin » ; * les encres de couleur, inspirée de ce qu’on trouve pour les plumes réservoir ; * les fonds « papier » pour le mode « lecture ». * Pour une petite dose de *néo retro* ou de nostalgie, je propose également la possibilité d’imiter l'affichage “vintage” des écrans cathodiques des années 70-80. Ça a son charme. ### Les principes généraux Chaque réglage a une valeur « par défaut » et il y a une hiérarchie entre les différents choix de couleur. Ainsi, on peut changer la couleur qui donne l’ambiance générale d’un coffre en ne changeant qu’**un seul** paramètre — tout est modifié dans la foulée : * les bords des panneaux ; * les panneaux eux-même, en mode « lecture » comme en mode « écriture » ; * la couleur des caractères, toujours dans les deux modes ; * la couleur des liens est coordonnée, généralement une couleur complémentaire à celle du texte ; * la couleur d’accentuation ; * la couleur du « coup de *Stabilo* » (“highlight”) ; * le tout aussi bien en mode « jour » (“light”) qu’en mode « nuit » (“dark”) ; * et tout est coordonné en respactant l’harmonie des couleurs. Pour démarrer, je recommander de presser sur le bouton « default » pour mettre tous les paramètres aux valeurs de base. > [!caution]+ Fortement recommandé : > Après cette « remise à zéro », forcer *Obsidian* à régénérer son affichage en choisissant `Force Reload` sur le menu `View`. Faute de quoi, vous risquez vous demander pourquoi tel paramètre n’est pas exactement comme vous l’attendez. Une fois qu’on a fait ce “Force Reload”, tout va fonctionner comme attendu. Il est recommandé de procéder de haut en bas, parmi les settings : * En premier lieu les *Réglages GÉNÉRAUX*. * Puis la ***Palette générale*** des *Couleurs en mode “LIGHT”*. À partir de là, il y a des couleurs coordonnées pour tous les éléments d’interface, même ceux que l’on peut customiser séparément. En particulier, une version « sombre » du thème choisi est automatiquement mise en œuvre lorsque l’ordinateur passe en mode “Dark”. Si vous souhaitez une autre palette pour la nuit, vous vous rendez sur le premier choix (*Palette générale*) dans la section ***Couleurs en mode “DARK”***. ### Utilisation Les réglages (“settings”) sont arrangés en 5 sections : | | | | :------------------------------ | :----------------------------------------------------------- | | Réglages GÉNÉRAUX | Des réglages non dépendants de la palette de couleurs et non dépendants du mode d’affichage des fiches. | | Couleurs en mode “LIGHT” | Les couleurs utilisées lorsque l’ordinateur est en mode « jour ». | | Couleurs en mode “DARK” | Les couleurs utilisées lorsque l’ordinateur est en mode «nuit». | | Mode « LECTURE / CONSULTATION » | Des réglages spécifiques au dit mode. | | Mode « ÉCRITURE / ÉDITION » | Des réglages spécifiques au dit mode. | #### Réglages généraux | | | | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Taille des caractères des panneaux latéraux. | Cela concerne : le navigateur de fichiers, le panneau des recherches, la liste des fichiers “starred”, la liste des *tags*, l’*outline* de la fiche courante, etc. Sur un grand écran, vous utiliserez volontiers une valeur généreuse, tandis que sur un portable, vous préférerez sans doute une valeur vous permettant de conserver l’espace. NB : Si vous mettez une fiche dans un panneau latéral, son apparence n’est pas affectée par ce réglage, mais par les réglages liés aux fiches elles-mêmes. De même, les extraits de fiches dans les recherches. | | Listing des fichiers dans les panneaux latéraux. | Pour compacter ou élargir verticalement les listes de fichiers dans les barres latérales. “**Serré**” permet d’afficher plus de lignes à l’écran ; mais, sur une tablette, cela complique la sélection. D’où la possibilité d’élargir le listing. | | Accroissement des titres et intertitres. | Pour distinguer visuellement la hiérarchie des *headings* entre les niveaux *H1* et *H6*, on utilise une taille croissante du *H6* au H1. Ce réglage permet de changer le facteur d’accroissement. Certaines valeurs sont inspirées de la théorie musicale. | | Kanban — Fonte | Dans les *kanbans* ^[Il y a un génial *plugin* de `mgmeyers` qui permet de créer des *kanbans*. Vous le trouvez dans la bibliothèque des *plugins* d’Obsidian.], on peut souhaiter une écriture d’apparence « écriture à la main ». | | Kanban — Taille des caractères pour les fiches. | Suivant la fonte que vous aurez choisie pour les *kanbans*, une adaptation de la taille sera indispensable — ou pour gagner de la place quand vous êtes sur un petit écran. | #### Couleurs en mode “light” | | | | ------------------------------------------------------ | ------------------------------------------------------------ | | Palette générale | C’est le lieu pour choisir la « palette principale ». À partir de là, on peut laisser les autres choix à « par défaut » et l’on aura un environnement de travail complètement dans le même ton, même en mode « nuit » et tant pour la consultation des fiches que pour les éditer. | | Couleur « Accent » | Dans le graphisme, on aime bien avoir une couleur d’accentuation, soit pour mettre des éléments en évidence, soit pour rompre la monotonie, ajouter du dynamisme. Le thème vous donne le choix entre trois variantes : **1.** (couleur) Coordonnée — en général, il s’agit d’une subtile nuance de la couleur de base. Sauf dans la palette « par défaut » qui respecte les choix originaux d’*Obsidian* en « natif ». La couleur d’accentuation est alors le « violet *Obsidian* .» **2.** et **3.** Deux couleurs complémentaires de la couleur générale. Elles sont choisies pour contraster, tout en restant en harmonie — la théorie des couleurs est respectée. **Nota Bene : ** Quand vous sélectionnez du texte, la sélection est une nuance de cette couleur d’accentuation. | | Couleur générale du texte | La valeur « Par défaut » respecte une couleur de texte coordonnée avec la palette générale. Mais rien ne vous empêche de choisir une autre couleur qui vous plaît ! Il s’agit du texte des fiches, car les éléments d’interface conservent les couleurs de la palette générale. Si vous ne choisissez pas explicitement une autre couleur pour le mode « édition », c’est cette même couleur qui s’appliquera au texte, même quand vous éditerez les fiches. | | Fond des fiches en mode « Lecture / Consultation » | On peut garder le fond lisse, d’une couleur en rapport avec la palette générale. Mais l’on peut également choisir entre 3 fonds « papier » qui donnent une apparence comme si le texte des fiches était écrit sur du papier. | | Couleur du texte en mode « Écriture / Édition » | Soit on garde « par défaut », la même couleur que celle choisie pour le texte en mode « Lecture », soit on choisit une « encre » inspirée de vraies encres de plumes-réservoirs. | | Couleur du fond de page en mode « Écriture / Édition » | L’édition du texte se fait toujours sur un fond lisse — c’est d’ailleurs un indice visuel qui vous permet de savoir d’un coup d’œil dans quel mode vous êtes. « Par défaut » garde la couleur choisie par la **Palette générale**. | | Couleur du « Stabilo ». | C’est la couleur du texte mis en évidence (“highlighted”) avec la syntaxe "\==" (paires de signes “=”). Le choix « Par défaut » laisse la palette définir une couleur coordonnée. Sinon, les autres choix sont inspirés des vrais *Stabilo Boss*. | #### Couleurs en mode “Dark” Les choix sont les mêmes que pour le mode “Light”. Une ou deux choses à savoir : * Si on choisit « Par défaut » pour la palette générale, on a une variante « sombre » de la palette de base choisie pour le mode “Light”. * Les thèmes « light » n’ont pas tous une version « dark » exacte. Certains sont associés à une palette sombre selon les correspondances suivantes : | Thème “Light” | Thème “Dark” correspondant | | ------------- | -------------------------- | | Art déco | Noir | | Beige | Brun | | Beige clair | Beige | | Paradiso | Vert olive | | Vert pistache | Vert olive | La palette “Victorian” n’a pas d’équivalent clair. Il faut la sélectionner spécifiquement. ^[Ce n’est pas un chef-d’œuvre. C'est un essai que j’ai fait en prenant pour inspiration une palette de couleurs « victoriennes » tirée d’un livre qui répertorie des centaines de palettes. La palette “Art déco” est tirée du même livre.] * Si on choisit explicitement d’autres couleurs pour le fond des fiches, ces choix sont spécifiques au mode “Dark”. Les choix faits en mode “Light” sont conservés. #### Mode « Lecture / Consultation » On règle ici trois paramètres interdépendants qui sont essentiels à la lisibilité et aux bonnes pratiques typographiques : * la taille des caractères * la longueur des lignes * l’interligne. Quelques explications et points de repère : * Selon que la *hauteur d’x* ^[La [*Hauteur d’x*](https://fr.wikipedia.org/wiki/Hauteur_d%27x) d’une fonte est la hauteur du caractère *x*. C’est cette hauteur qui donne l’impression que la fonte est plus ou moins grande, à taille générale égale. À grandeur de la fonte égale, la *Times Roman* a l’air plus petite que la *Candara*, par exemple.] de la fonte est plus ou moins grande, l’interligne doit être adapté. * Plus la ligne est longue, plus l’interligne doit être augmenté, afin que l’œil ne se perde pas en revenant à la ligne. * Des valeurs « standards » sont proposées. Vous pouvez les modifier à votre goût. Une règle typographique intéressante à connaître : pour une lisibilité optimale, la longueur d’une ligne doit être comprise entre 2 ½ et 3 ½ alphabets (les lettres “a” à “z” tapées à la suite) dans la fonte courante. Derniers réglages de cette série, le style des **Tables** ; il y en a 3 à choix : 1. « Par défaut » — les tables sont « sans fioritures », très légèrement retouchées par rapport à l’original. 1. « Améliorées » — un peu mieux stylées, en particulier l’en-tête. 1. « Avec fonds alternés » — les lignes sont mises en évidence, sur un mode alterné. #### Mode « Écriture / Édition » Vous pouvez choisir une fonte différente pour éditer les fiches. Sur votre machine, vous n’aurez pas forcément toutes celles qui sont proposées dans le menu. Cherchez et trouvez-en une que vous avez et qui vous convienne. Vous trouvez ensuite les mêmes **réglages typographiques** que pour le mode « Lecture / Consultation » : la *taille des caractères*, la *longueur de la ligne* et l’*interligne*. Une fonte différente appelle des réglages différents. Un petit conseil : pour éditer du texte, vous pouvez vous permettre une longueur de ligne un peu plus grande, jusqu’à **4** alphabets. Dernier réglage : la **Taille des caractères dans les tables**. Ça peut être pratique de choisir une taille plus petite que celle du texte, afin d’afficher plus de texte. ^[Pour plus de confort dans l’édition des tables, je recommande cependant d’utiliser [*Typora*](https://typora.io) en tant qu’éditeur externe. Il est excellent en tout et complètement irremplaçable pour les tables.] ### Du bon usage des titres | | | | | ---------------------- | ------------------: | ------------------------------------------------------------ | | Heading 1 | `#` | Le titre principal de la fiche. | | Heading 2 | `##` | À n’utiliser QUE lorsque la fiche est longue et doit être partagée en différentes parties. | | Heading 3 | `###` | Titres des sections. | | Heading 4 | `####` | Sous-sections. | | Heading 5 Heading 6 | `#####` `######` | Là où vous seriez tenté de mettre du **texte gras** pour introduire une section, il est préférable d’utiliser quelque chose de sémantiquement correct. Ces H5 et H6 peuvent aussi servir de titres pour les tables. | ### Raffinements et « gadgets » * La couleur d’accentuation colore : * la sélection de texte (double-clic, etc.) ; * les *tags*, en mode “lecture” ; * les infobulles — c’est tellement plus joyeux que le noir ! * les barres qui survolent les menus et tout ce qui est survolé, à part les liens (*links*) ; * les sélections qui sont faites avec ces barres — notamment les icônes ; * les boutons et les *dropdowns* * Un symbole apparaît en haut à gauche de la fiche en mode « Écriture / Édition » ; il est de la couleur du texte. Quand le fond et la fonte sont les mêmes dans les modes « lecture » et « écriture », cela aide à savoir dans quel mode on est. * Les images sont affichées avec une élégante bordure et un effet ombré. * Le style des niveaux 1 et 2 contribuent à rendre agréables les cartes dans le mode “Canvas”. * La classe `citation-source` pour l’auteur d’une citation. * En mode “Dark”, il y a le choix “LYT” qui correspond au thème favori de Nick Milo, zélateur de son système *Linking Your Thinking*. Je n’ai bien sûr pas cherché à reproduire totalement son thème, seulement ses couleurs — le reste est de mon cru. Si vous aimez ce thème, vous vous sentirez « à la maison ». * Pour aller encore plus loin dans l’imitation, vous pouvez installer la fonte *Google* [DM Sans](https://fonts.google.com/specimen/DM+Sans) et la choisir à deux endroits: 1. dans le panneau `Appearance > Text Font` ; 2. dans les réglages du présent thème, à cet endroit : `Mode “ÉCRITURE” > Fonte`. * Une autre idée de base, c’était d’avoir des couleurs inspirées des *post-its*, afin de pouvoir distinguer les coffres, quand on en utilise plusieurs. J'ai poussé l’idée plus loin, mais vous trouvez toujours quelques palettes inspirées des couleurs de *post-its*. * À propos de la palette “**Solarized**”. Il s’agit d’une palette très populaire parmi les programmeurs et les geeks. On la retrouve très souvent parmi les choix proposés, dans toutes sortes de logiciels, mais surtout dans les éditeurs de texte pur. Pour en savoir plus, rendez-vous sur le [site dédié](https://ethanschoonover.com/solarized) où son auteur — Ethan Shoonover — explique sa démarche. J’ai utilisé les « vraies couleurs » de la palette, mais dans un arrangement pas forcément « classique ». * Pour l’édition des fiches, on peut mettre le fond en « bleu *Wordperfect* », souvenir d’un traitement de textes vedette dans les années 80 et 90. Pour que l’effet soit complet, il est recommandé de choisir la couleur « Silver » pour le texte en mode « Écriture / Édition ». Si, en plus vous utilisez une fonte à échappement fixe (Courrier, IBM Plex Mono, iA Writer Mono, etc.), l’effet sera saisissant. * De même, si vous choisissez une fonte « fixe », un fond noir et du texte ambre ou « vert terminal », vous aurez l’impression d’utiliser un vrai moniteur “vintage”, comme vous les voyez dans les films des années 70 à 80, voire au début des années 90. * Dans les barres latérales, les noms sont verticalement compactés pour gagner de la place et en afficher plus ; pour conserver la lisibilité, ils sont séparés par une discrète ligne horizontale. * Sur un ordinateur, on peut « presser » sur les images (= cliquer et garder le doigt appuyé) pour les zoomer à la grandeur du panneau courant. * Le curseur est rouge pour être plus visible. ### Plugins #### Kanban - Le fond derrière les pistes des *kanbans* prend la structure du fond des fiches. - Les titres en tête des pistes sont plus lisibles. - On obtient un très joli effet en choisissant une fonte “script” pour les *kanbans*. &emsp; <a href="https://dr-spinnler.ch"><img src="https://dr-spinnler.ch/myfiles/logos/Olivier-Spinnler.png" class= "signature"/></a> le 12 décembre 2022 &emsp; ## Annexes Pour info, la fonte « standard » d’*Obsidian* est la fonte *Google* [*Inter*](https://capture.dropbox.com/QtWkTPEb4Y7MCW0e). Vous pouvez l’installer dans votre système — si elle ne l’est pas déjà — et la sélectionner. Cf plus haut, à propos de la fonte “DM Sans”. ---------------------------------------------- L’affichage si reconnaissable de l’historique traitement de texte ***WordPerfect*** : <a title="See page for author, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Wordperfect-5.1-dos.png"><img width="512" alt="Wordperfect-5.1-dos" src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Wordperfect-5.1-dos.png"></a> Un écran *vintage* des années 80  : <a title="Anthony J. Bentley, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG"><img width="1024" alt="Compaq Portable and Wordperfect" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Compaq_Portable_and_Wordperfect.JPG/1024px-Compaq_Portable_and_Wordperfect.JPG"></a>