Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Livres — David Larlet</title>
  13. <meta name="description" content="Une page regroupant les livres éclairants de 2020.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Livres</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/12/18/" title="Publication précédente : Arrakice">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. </p>
  61. </nav>
  62. <hr>
  63. <main>
  64. <p><em>Une page regroupant les livres éclairants de 2020.</em></p>
  65. <h2 id="esprit-zen-esprit-neuf">Esprit zen, esprit neuf <a href="#esprit-zen-esprit-neuf" title="Ancre vers cette partie">#</a></h2>
  66. <blockquote>
  67. <p>Shunryu Suzuki, de la lignée du Zen Soto, était un descendant spirituel direct du grand Dogen. En 1958, à cinquante-trois ans, maître zen déjà profondément respecté au Japon, Suzuki-roshi vint aux États-Unis et s’installa à San Francisco. Ceux qui voulaient se joindre à sa pratique firent éclore sous sa direction le groupe de méditation dit Zen Center qui a essaimé en sept centres, y compris le Zen Mountain Center, premier monastère zen hors d’Asie. Il était sans conteste l’un des plus influents maîtres zen de nos jours. Ce livre est né d’entretiens familiers, en Californie.</p>
  68. <p><cite><em><a href="https://fr.wikipedia.org/wiki/Esprit_zen,_esprit_neuf">Esprit zen, esprit neuf</a></em>, Shunryu Suzuki</cite></p>
  69. </blockquote>
  70. <p>Une introduction au bouddhisme, avec des choses qui me grattent, d’autres qui me (ré)confortent, certaines qui me donnent envie d’essayer des choses. C’est déjà pas mal.</p>
  71. <h2 id="a-cote-de-nous-le-deluge">À côté de nous le déluge <a href="#a-cote-de-nous-le-deluge" title="Ancre vers cette partie">#</a></h2>
  72. <blockquote>
  73. <p>Révélateur du fait que ce n’est pas d’abord un manque de savoir qui soutient la société d’externalisation au jour le jour, mais bien un « ne-pas-<em>vouloir</em>-savoir » généralisé, un refus de savoir, composé d’un mélange indéfini de confort et de malaise, d’insouciance et de surcharge, d’indifférence et de crainte. Et ce, autant à petite qu’à (particulièrement) grande échelle. Nous ne voulons pas entendre parler du coût de la grande vie que nous menons : de ce qui doit être sacrifié pour nous, des endroits où on y travaille, de l’identité de ceux qui paient à la fin. Mais surtout, nous ne voulons pas vraiment connaître les principes profonds à l’œuvre, nous ne voulons pas remettre le système en question.</p>
  74. <p><cite><em>À côté de nous le déluge</em>, Stephan Lessenich</cite></p>
  75. </blockquote>
  76. <p>Ce livre décrit avec précision et sources à l’appui la société d’externalisation dans laquelle je vis. Attention, si vous n’êtes pas prêt·e cela peut être assez violent de premier abord, mais probablement moins que cette violence systémique si vous en avez déjà conscience.</p>
  77. <h2 id="la-cosmologie-du-futur">La cosmologie du futur <a href="#la-cosmologie-du-futur" title="Ancre vers cette partie">#</a></h2>
  78. <blockquote>
  79. <p>— S’il fait un temps pareil dimanche, on ne va pas pouvoir aller voter, hein…<br />
  80. — Le « vote »… j’ai lu des trucs à ce sujet… je crois me souvenir que c’est un rite au cours duquel est désigné un chef de guerre… Y aurait-il une expédition guerrière en préparation ?<br />
  81. — Ah ça, c’est sûr, avec ce soleil ça va pas être possible !<br />
  82. — Il y aurait donc une forme de contradiction entre le choix d’un chef de guerre et la présence du soleil ? Peut-être la redite de la rivalité entre Apollon et Athéna…<br />
  83. — À moins que le soleil ne soit simplement une divinité pacificatrice, qui occuperait le rôle, ici laissé vacant, que les chefs jouent dans de nombreuses autres cultures…<br />
  84. — Ça va plutôt être pêche au gardon pour tout le monde, obligé !<br />
  85. — Quoi ?! Le soleil réclamerait des offrandes sacrificielles de poissons ?!</p>
  86. <p><cite><em>La cosmologie du futur</em>, Alessandro Pignocchi</cite></p>
  87. </blockquote>
  88. <p><a href="https://fr.wikipedia.org/wiki/Fabcaro">Fabcaro</a> m’avait permis de prendre conscience de mon attrait pour l’absurde avec ce chef-d’œuvre qu’est <a href="https://fr.wikipedia.org/wiki/Za%C3%AF_za%C3%AF_za%C3%AF_za%C3%AF">Zaï zaï zaï zaï</a>. Ici je suis resté un peu sur ma faim, ou peut-être ma fin. L’épilogue rompant avec le narratif.</p>
  89. <p>Pincez-moi, je suis en train de décrier un angle politique. Absurdité quand tu nous tiens…</p>
  90. <p>Pour un aperçu du style sur l’actualité, vous pouvez consulter Relance <a href="http://puntish.blogspot.com/2020/03/relance.html">1</a>, <a href="http://puntish.blogspot.com/2020/04/la-suite-relance-2.html">2</a> et <a href="https://puntish.blogspot.com/2020/04/suite-relance-iii.html">3</a>.</p>
  91. <p>Le <a href="https://fr.calameo.com/read/00600804492e80ba6d005">Petit traité d’écologie sauvage</a> et <a href="https://en.calameo.com/read/005979625dad957c34e3f">La recomposition des mondes</a> semblent être en accès libre.</p>
  92. <h2 id="pouvoir-de-detruire-pouvoir-de-creer">Pouvoir de détruire, pouvoir de créer <a href="#pouvoir-de-detruire-pouvoir-de-creer" title="Ancre vers cette partie">#</a></h2>
  93. <blockquote>
  94. <p>Les textes réunis ici, majeurs dans l’œuvre de Bookchin, exposent son écologie sociale, dans sa théorie comme dans sa pratique « municipaliste libertaire », qui passe par la démocratie directe et la reprise en main de nos conditions d’existence. Ils déploient aussi toutes les implications éthiques et même esthétiques de ce projet politique, depuis la respiritualisation du travail jusqu’à l’établissement d’une nouvelle sensibilité et d’une nouvelle façon de vivre, un apprentissage continuel de la vertu et de la décence pour résister à la corruption sociale, morale et psychologique exercée par le marché et son égoïsme débridé.</p>
  95. <p><cite><em>Pouvoir de détruire, pouvoir de créer</em>, Murray Bookchin</cite></p>
  96. </blockquote>
  97. <p>Les <a href="/david/stream/2018/10/15/">réflexions</a> de cette personne <a href="/david/stream/2018/10/01/">m’intéressaient</a> alors je me suis dit qu’une compilation serait une bonne introduction. Il y a effectivement des textes qui après 50 ans n’ont pas pris un ride.</p>
  98. <p>C’est peut-être ce qui est le plus déstabilisant d’ailleurs.</p>
  99. <h2 id="la-nature-est-un-champ-de-bataille">La nature est un champ de bataille <a href="#la-nature-est-un-champ-de-bataille" title="Ancre vers cette partie">#</a></h2>
  100. <blockquote>
  101. <p>Face à la catastrophe écologique annoncée, les bonnes âmes appellent l’humanité à « dépasser ses divisions » pour s’unir dans un « pacte écologique ». Cet essai s’attaque à cette idée reçue. Il n’y aura pas de consensus environnemental. Loin d’effacer les antagonismes existants, la crise écologique se greffe au contraire à eux pour les porter à incandescence. Soit la localisation des décharges toxiques aux États-Unis : si vous voulez savoir où un stock de déchets donné a le plus de chances d’être enfoui, demandez-vous où vivent les Noirs, les Hispaniques, les Amérindiens et autres minorités raciales. Interrogez-vous par la même occasion sur le lieu où se trouvent les quartiers pauvres…</p>
  102. <p><cite><em><a href="https://www.editions-zones.fr/lyber?la-nature-est-un-champ-de-bataille">La nature est un champ de bataille</a></em> (<a href="/david/cache/2020/a72c83494fc6636cde5b73bd2b064958/">cache</a>), Razmig Keucheyan</cite></p>
  103. </blockquote>
  104. <p>Ce livre comporte trois parties très distinctes et c’est la première qui m’a le plus ouvert les yeux, notamment sur cette notion de « racisme environnemental ».</p>
  105. <p><em>Merci à <a href="http://shl.huld.re/~f6k/">f6k</a> de m’avoir pointé le texte intégralement disponible en ligne. La copie d’extraits papier est fastidieuse, merci aussi aux <a href="https://www.editionsladecouverte.fr/catalogue/index-La_nature_est_un_champ_de_bataille-9782355220586.html">éditions La Découverte</a> !</em></p>
  106. <h2 id="ecotopia">Écotopia <a href="#ecotopia" title="Ancre vers cette partie">#</a></h2>
  107. <blockquote>
  108. <p>Presque toutes les rues de San Francisco sont plongées dans l’obscurité pendant la nuit — des mesures d’économie d’énergie ont manifestement supprimé l’éclairage nocturne. J’ignore pourquoi cela n’entraine pas la vague de criminalité qu’en pareilles circonstances on constaterait bien sûr chez nous. Quand j’ai demandé à des habitants de la capitale s’ils se sentaient en sécurité la nuit, ils m’ont répondu sans hésiter que oui — ils affirment y voir assez bien, puis ils détournent la conversation vers des détails ridicules : les phares des vélos trouant les ténèbres n’évoquent-ils pas des lucioles virevoltantes ? N’est-il pas plaisant de voir les étoiles même en ville ? Heureusement qu’ils n’ont pas de voiture, après tout : sinon, le nombre des accidents nocturnes serait effarant.</p>
  109. <p><cite><em>Écotopia</em>, Ernest Callenbach</cite></p>
  110. </blockquote>
  111. <p>Cet ouvrage écrit en 1975 nous offre une utopie qui fait du bien. Sans surprise, certains examples sont un peu datés et paradoxalement d’autres sont encore tout à fait d’actualité ce qui rend ce récit toujours pertinent, si ce n’est plus !</p>
  112. <p>Note : si vous lisez la traduction française effectuée par Brice Matthieussent, <strong>ne lisez surtout pas la préface !</strong> Cela vous divulgâcherait de manière significative une bonne partie du livre. Incompréhensible…</p>
  113. <h2 id="dans-les-forets-de-siberie">Dans les forêts de Sibérie <a href="#dans-les-forets-de-siberie" title="Ancre vers cette partie">#</a></h2>
  114. <blockquote>
  115. <p>La lumière lui taille des traits de fantassin héroïque. Le temps a sur la peau le pouvoir de l’eau sur la terre. Il creuse en s’écoulant.</p>
  116. <p>[…]</p>
  117. <p>Pendant cinq années, j’ai rêvé de cette vie. Aujourd’hui, je la goûte comme un accomplissement ordinaire. Nos rêves se réalisent mais ne sont que des bulles de savon explosant dans l’inéluctable.</p>
  118. <p>[…]</p>
  119. <p>J’archive les heures qui passent. Tenir un journal féconde l’existence. Le rendez-vous quotidien devant la page blanche du journal contraint à prêter meilleure attention aux événements de la journée — à mieux écouter, à penser plus fort, à regarder plus intensément. Il serait désobligeant de n’avoir rien à inscrire sur sa page de calepin. Il en va de la rédaction quotidienne comme d’un dîner avec sa fiancé. Pour savoir qui lui confier, le soir, le mieux est d’y réfléchir pendant la journée.</p>
  120. <p>[…]</p>
  121. <p>La pêche, ultime clause du pacte signé avec le temps. Si l’on revient bredouille, c’est le temps qui a tiré sa prise. J’accepte de rester des heures immobile. Et s’il n’y a rien, tant pis. Je n’en voudrai pas aux heures d’avoir trompé mon désir. Elles ne sont pas nombreuses, les activités, réduites à une vague espérance. Pour moi, qui ne crois plus aux Messies, il n’y a que les poissons dont j’espère la venue.</p>
  122. <p>[…]</p>
  123. <p>Les heures défilent lentement par la fenêtre. Je m’ennuie un peu. Cette journée est un robinet mal fermé, chaque heure en goutte. L’ennui est un compagnon passé de mode. On s’y fait, pourtant. Avec lui, le temps a un goût d’huile de foie de morue. Soudain, le goût se dissipe et l’on ne s’ennuie plus. Le temps redevient cette procession invisible et légère qui fraie son chemin à travers l’être.</p>
  124. <p>[…]</p>
  125. <p>Et je fixe ce point très précis où les étincelles du brasier, propulsées vers le ciel, pâlissent et brillent d’un dernier éclat avant de se confondre aux étoiles. J’ai du mal à me convaincre de gagner ma tente, je suis comme un gosse qui ne veut pas couper la télévision. De mon duvet, j’entends crépiter le bois. Rien ne vaut la solitude. Pour être parfaitement heureux, il me manque quelqu’un a qui l’expliquer.</p>
  126. <p><cite><em>Dans les forêts de Sibérie</em>, Sylvain Tesson</cite></p>
  127. </blockquote>
  128. <p>Ce livre est presque trop bien écrit pour réussir à entrer dedans, sans compter la romanticisation de l’isolement. C’est la première fois que cela m’arrive et c’est troublant. Peut-être que cela se produit lorsqu’on reste dans une cabane trop longtemps… à garder en mémoire.</p>
  129. <p>Ou alors c’est de la jalousie déplacée. C’est beau.</p>
  130. <h2 id="avoir-ou-etre">Avoir ou être <a href="#avoir-ou-etre" title="Ancre vers cette partie">#</a></h2>
  131. <blockquote>
  132. <p>Dans le mode avoir, il n’existe aucune relation vivante entre moi et ce que j’ai ; « ça » et « moi » sont devenus des objets, et j’ai <em>ça</em> parce que j’ai le pouvoir de le rendre mien. Mais il existe aussi une relation inverse : <em>ça possède moi</em>, parce que le sentiment de mon identité, c’est-à-dire de ma santé d’esprit, repose sur le fait que j’ai <em>ça</em> (et le plus de choses possible). Le mode avoir d’existence n’est pas établi par un processus vivant, productif entre le sujet et l’objet ; il « chosifie » à la fois l’objet et le sujet. C’est une relation morte, et non pas vivante.</p>
  133. <p><cite><em>Avoir ou être</em>, Erich Fromm</cite></p>
  134. </blockquote>
  135. <p>Le sous-titre du livre d’Erich Fromm me faisait un peu peur : « Un choix dont dépend l’avenir de l’homme » mais c’est finalement lisible sans trop déprimer. Enfin presque.</p>
  136. <h2 id="comment-je-suis-devenue-anarchiste">Comment je suis devenue anarchiste <a href="#comment-je-suis-devenue-anarchiste" title="Ancre vers cette partie">#</a></h2>
  137. <blockquote>
  138. <p>Si ce mot est devenu aussi sulfureux, c’est parce que le système auquel ce courant de pensée s’oppose a tenté de le museler en le diabolisant. Dans l’inconscient de la plupart d’entre nous, ce mot, anarchie, est devenu symbole de chaos, d’attentats, ou tout du moins d’un désordre absolu. Or, c’est tout le contraire !</p>
  139. <p><cite><em>Comment je suis devenue anarchiste</em>, Isabelle Attard</cite></p>
  140. </blockquote>
  141. <p>Un témoignage comme une invitation d’Isabelle Attard à se revendiquer anarchiste. J’ai <a href="/david/2020/09/16/#anarchiste">accepté</a> :-).</p>
  142. <h2 id="nos-cabanes">Nos cabanes <a href="#nos-cabanes" title="Ancre vers cette partie">#</a></h2>
  143. <blockquote>
  144. <p>Or c’est bien pour ça que l’on fait des cabanes : pour prendre soin de ce qui mérite que l’on y tienne, que l’on s’y tienne, et dire ce que l’on a besoin de protéger pour préserver notre amour de la vie.</p>
  145. <p><cite><em>Nos cabanes</em>, Marielle Macé</cite></p>
  146. </blockquote>
  147. <p>Un style plein d’énergie, peut-être un peu trop parfois pour mon mode de lecture. Je le vois comme un paquet de graines qui est semé <a href="https://fr.wiktionary.org/wiki/Annexe:Liste_d%E2%80%99expressions_marseillaises_en_fran%C3%A7ais#rabailler">à la rasbaille</a>. Rattrape qui pourra. J’ai réuni quelques jolies graines, on verra bien ce qui poussera.</p>
  148. <h2 id="plutot-couler-en-beaute-que-flotter-sans-grace">Plutôt couler en beauté que flotter sans grâce <a href="#plutot-couler-en-beaute-que-flotter-sans-grace" title="Ancre vers cette partie">#</a></h2>
  149. <blockquote>
  150. <p>S’il n’existe plus de géographie du refuge hors l’exil, et que l’on veut continuer à vivre en société, parce que chacun n’a pas la possibilité de s’échapper en mer ou vers les sommets, alors il faut trouver ailleurs, en soi, la manière de s’extraire de la <em>Machine</em> et de faire corps avec le monde vivant contre le <em>Monstre</em>.</p>
  151. <p><cite><em>Plutôt couler en beauté que flotter sans grâce</em>, Corinne Morel Darleux</cite></p>
  152. </blockquote>
  153. <p>Livre de Corinne Morel Darleux en cours de lecture. Ça fait partie des petits livres que je déguste.</p>
  154. <h2 id="dune">Dune <a href="#dune" title="Ancre vers cette partie">#</a></h2>
  155. <blockquote>
  156. <p>Quand la loi et le devoir ne font qu’un sous la religion, nul n’est plus vraiment conscient. Alors, on est toujours un peu moins qu’un individu.</p>
  157. <p><cite><em>Extrait de Muad’Dib Les Quatre-vingt-dix-neuf Merveilles de l’Univers</em>, par la Princesse Irulan (Dune)</cite></p>
  158. </blockquote>
  159. <p>Frank Herbert pose la question du choix que l’on fait de mettre au monde et d’entraîner un <em>Kwisatz Haderach</em>. #EnTouteModestie</p>
  160. <p>Puis du poids qui lui incombe de s’imaginer un monde dans lequel il a lui-même des choix à faire qui lui semblent plus ou moins inéluctables compte-tenu de son héritage.</p>
  161. <hr />
  162. <p><em>Ce que je retiens surtout de toutes ces lectures, c’est que ça n’est pas la taille qui compte. J’ai lu beaucoup de petits livres (merci <a href="https://oncletom.io/">Thomas</a> !) qui renfermaient de véritables pépites. Cela me motive pour écrire quelque chose d’un peu plus consistant un jour, sans pour autant avoir la pression de la taille.</em></p>
  163. </main>
  164. <nav>
  165. <p class="center">
  166. <a rel="prev" href="/david/2020/12/18/" title="Publication précédente : Arrakice">←</a> •
  167. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  168. </p>
  169. </nav>
  170. </article>
  171. <hr>
  172. <footer>
  173. <p>
  174. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  175. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  176. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  177. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  178. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  179. </p>
  180. <template id="theme-selector">
  181. <form>
  182. <fieldset>
  183. <legend>Thème</legend>
  184. <label>
  185. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  186. </label>
  187. <label>
  188. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  189. </label>
  190. <label>
  191. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  192. </label>
  193. </fieldset>
  194. </form>
  195. </template>
  196. </footer>
  197. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  198. <script type="text/javascript">
  199. function loadThemeForm(templateName) {
  200. const themeSelectorTemplate = document.querySelector(templateName)
  201. const form = themeSelectorTemplate.content.firstElementChild
  202. themeSelectorTemplate.replaceWith(form)
  203. form.addEventListener('change', (e) => {
  204. const chosenColorScheme = e.target.value
  205. localStorage.setItem('theme', chosenColorScheme)
  206. toggleTheme(chosenColorScheme)
  207. })
  208. const selectedTheme = localStorage.getItem('theme')
  209. if (selectedTheme && selectedTheme !== 'undefined') {
  210. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  211. }
  212. }
  213. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  214. window.addEventListener('load', () => {
  215. let hasDarkRules = false
  216. for (const styleSheet of Array.from(document.styleSheets)) {
  217. let mediaRules = []
  218. for (const cssRule of styleSheet.cssRules) {
  219. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  220. continue
  221. }
  222. // WARNING: Safari does not have/supports `conditionText`.
  223. if (cssRule.conditionText) {
  224. if (cssRule.conditionText !== prefersColorSchemeDark) {
  225. continue
  226. }
  227. } else {
  228. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  229. continue
  230. }
  231. }
  232. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  233. }
  234. // WARNING: do not try to insert a Rule to a styleSheet you are
  235. // currently iterating on, otherwise the browser will be stuck
  236. // in a infinite loop…
  237. for (const mediaRule of mediaRules) {
  238. styleSheet.insertRule(mediaRule.cssText)
  239. hasDarkRules = true
  240. }
  241. }
  242. if (hasDarkRules) {
  243. loadThemeForm('#theme-selector')
  244. }
  245. })
  246. </script>
  247. </body>
  248. </html>