A place to cache linked articles (think custom and personal wayback machine)
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.

преди 1 година
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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` element
  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>Fresque du climat, bombe à graines et autres idées… (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://blog.pelmel.org/2022/09/30/fresque-du-climat-bombe-a-graines-et-autres-idees/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Fresque du climat, bombe à graines et autres idées…</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://blog.pelmel.org/2022/09/30/fresque-du-climat-bombe-a-graines-et-autres-idees/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Ce billet pourrait aussi s’intituler : « Comment j’ai soigné mon éco-anxiété sans m’en rendre compte. »</p>
  71. <h2>Mon parcours… en anxiété</h2>
  72. <p>Dans la famille éco-anxieux, je demande le père inquiet. <sup class="endnote"><a href="#en-650-1" id="enref-650-1">1</a></sup>. Sur une moyenne entre balek totale et la panique bloquante, je me donnerai une note de 13 ou 14 sur 20. La mention assez bien qui me vaut quelques insomnies et certains moments de doute.</p>
  73. <p>C’est un peu à l’image de ma conscience écologique. L’idée que le monde avait une fin est arrivée assez tôt dans ma vie, avec 1986 comme année charnière <sup class="endnote"><a href="#en-650-2" id="enref-650-2">2</a></sup> . Elle s’est nourrie de mes lectures et visionnages d’adolescent : <a href="https://fr.wikipedia.org/wiki/L%27An_01"> L’An 01</a>, <a href="https://www.youtube.com/watch?v=n5RmEWp-Lsk&amp;ab_channel=GionoYT">L’homme qui plantait des arbres</a>, le <a href="https://reporterre.net/Tolkien-technocritique-et-heraut-d-une-ecologie-de-combat">Seigneur des Anneaux</a>, <a href="https://fr.wikipedia.org/wiki/Ravage_(roman)">Ravage</a> ou encore <a href="https://www.numerama.com/pop-culture/596870-a-quel-point-lannee-2019-ressemblait-elle-a-celle-de-blade-runner.html">Blade Runner</a> ont marqué mon imaginaire. Quelques émissions de TV sympathiquement angoissantes en ont ajouté une couche. En écrivant ce billet je repense à un passage d’anticipation sur un musée du futur où on conserverait la dernière fleur… Brrr… </p>
  74. <p>Par la suite, le jeune adulte que j’étais a fait rentrer <a href="https://www.seuil.com/ouvrage/la-convivialite-ivan-illich/9782757842119">Illich</a> dans sa bibliothèque, au milieu d’autres autrices et auteurs politiques. J’ai aussi lu scrupuleusement les articles écologistes de Charlie Hebdo critiquant le protocole de Tokyo ou encore la politique de M. La-Maison-Brule en la matière. </p>
  75. <p>Et la vie avance et, avec elle, la difficile conciliation entre les actes et les valeurs. Je me suis raccroché et, à la fois, ai maudit cette mode des petits gestes. Pour moi ce sont des gestes qui relèvent du bon sens et qui cachent de plus grandes attentes. Cela n’empêchait nullement, de ma part, un certain nombre d’écarts. Aujourd’hui, je vis nettement mieux avec ça, ayant fait des choix qui tendent à réduire ces écarts. </p>
  76. <p>Voilà pour les aspects personnels, pour la partie plus sociétale j’avais deux secrets espoirs. </p>
  77. <p>Le premier est une prise de conscience du problème quand arriveraient les premiers signes tangibles et indiscutables d’un dérèglement climatique.</p>
  78. <p> Le second, que la vitesse du changement soit suffisamment lente pour que s’opère un changement de la société. </p>
  79. <p>J’ai cité l’An 01 dans mes références, mais je pourrais aussi parler de la Belle Verte. Avant de continuer, je vous invite d’ailleurs à un petit extrait de ce chef-d’œuvre<sup class="endnote"><a href="#en-650-3" id="enref-650-3">3</a></sup> de légèreté avant de reprendre le billet. </p>
  80. <figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><p class="wp-block-embed__wrapper">
  81. <iframe src="https://www.youtube.com/embed/6ShBEsmPvhg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="La Belle Verte - le rétroviseur">VIDEO</iframe>
  82. </p></figure>
  83. <p>« TU LEUR AS DIT MERCI AUX VACHES! » Euh pardon…</p>
  84. <p>Comment dire que ces dernières années ont douché mes espoirs et fait naître ce sentiment d’anxiété évoqué plus haut. Après; il n’est pas tout à fait incapacitant. Je n’ai pas lu particulièrement <a href="https://www.vie-publique.fr/en-bref/284713-nouveau-rapport-du-giec-des-solutions-face-au-rechauffement-climatique">le rapport du GIEC</a> ou <a href="https://www.dargaud.com/bd/le-monde-sans-fin-miracle-energetique-et-derive-climatique-bda5378080">« Le monde sans fin »</a> de Jancovici et Blain. Je m’y intéresse de loin, le truc que tu sais qui existe sans en avoir creuser vraiment le détail. </p>
  85. <p>En revanche je m’implique dans diverses associations, dans des mouvements et dans un contexte politique. Mais ce n’est pas là forcément la solution promise plus haut, en clair en dépit de quelques avancées et petites réussites, je n’ai pas ressenti de véritable changements.</p>
  86. <h2>Mon parcours… en fresque</h2>
  87. <p>Après ce prologue un petit peu long, venons en à ce samedi matin où j’ai participé à ma première <a href="https://fresqueduclimat.org/">fresque du climat</a>.</p>
  88. <p>Pour ceux qui ne connaissent pas, la fresque du climat est une association et une action de sensibilisation au réchauffement climatique. A travers un jeu collaboratif, les participants vont construire une fresque résumant le processus qui se joue, des causes aux conséquences. Le jeu se base sur les rapports du GIEC, il se dérive également en fresque du numérique, des transports, etc…</p>
  89. <p>Si vous voulez y participer, rendez vous sur <a href="https://fresqueduclimat.org/">le site de l’association</a> et vous trouverez un agenda des prochaines fresques près de chez vous.</p>
  90. <p>Contrairement au reste de ma famille (et oui on est légèrement conscientisé) je n’avais pas encore eu l’occasion d’y aller en personne. L’opportunité m’a été donné d’y aller dans le cadre de mes fonctions de conseiller municipal, en compagnie d’autres élus de ma commune et de celle voisine. Dès le départ j’ai senti plusieurs axes positif se dessiner.</p>
  91. <p>Le premier étant qu’un événement de sorte à la rentrée est un bon starter pour l’année scolaire. Même si on ne chôme pas pendant l’été, j’ai appris que le rythme d’une municipalité, en tout cas de la notre, est très lié à l’année scolaire, plus que l’année calendaire. Oui ça un bon goût de kick-off si on revient dans le vocabulaire de l’organisation d’entreprises.</p>
  92. <p>Le deuxième que j’allais apprendre des choses avec d’autres personnes. Je ne savais pas encore quoi ni qui mais c’est bien là la raison d’être de ce genre d’exercice. Parler de ce qu’on connait déjà avec des gens convaincus, j’avais déjà donné et je savais que c’était un peu stérile. J’ai eu l’impression que ça n’allais pas être le cas ici.</p>
  93. <p>Ensuite concernant le déroulé de l’exercice en lui même, il s’agit, comme je l’ai dit, d’un jeu collaboratif. L’ancien agiliste ludophile que je suis n’a pas été dépaysé 😉 Le jeu en lui même est bien mené. Nous sommes entouré d’animateurs et animatrices (ou encore « fresqueurs » et « fresqueuses »). L’objectif de ce jeu est de construire une « Fresque du climat ». Mais quoi qu’est-ce donc ?</p>
  94. <p>Tout commence avec une grande feuille de papier devant nous. Ce « nous » c’est un groupe constitué de 4 à 5 personnes. Nous étions d’ailleurs 17 participants ce qui a permis de créer 4 groupes donc 4 fresques. Les animateurs vont nous distribuer, en trois, un jeu de cartes que nous allons déposer sur la grande feuille de papier pour construire notre fresque. Sur ces cartes nous allons retrouver les composantes (causes, phénomènes, conséquences) du réchauffement climatique. Ces cartes il nous est demandé de les disposer dans un ordre logique, des causes aux conséquences. Attention il y’a parfois des pièges. </p>
  95. <p>Le jeu est mené de tel manière qu’il va amener le groupe à se poser des questions sur le sens et la signification des cartes. Des explications sont fournies au dos mais nous ne pouvons les lire avant de les placer. Tout du moins au début. Les animateurs sont là pour nous guider sans nous diriger et répondre à certaines de nos interrogations. Les échanges, surtout avec des personnes que l’on a l’habitude de côtoyer se sont avérés très intéressants. Ce jeu permet de dépasser la discussion anecdotique sur le sujet, le « ha ma pauv’dame, y’a plus de saisons ». C’est aussi l’occasion de mettre des mots sur des concepts (même si j’en ai oublié une bonne partie depuis). Un autre point très intéressant c’est que chacun interprète les faits selon sa grille d’analyse, personnelle ou politique. Ce qui peut mener à diverses réflexions et prise de conscience. </p>
  96. <p>Une fois que les fresques sont construites et que le constat est fait, passe le moment de l’action. Il me semble que dans une fresque plus « classique » on discute des actions personnelles, ici nous avons évoquer des actions plus générales. Comme dans un jeu agile, on dispose les actions sur des post-its qui sont ensuite posé sur une grille avec deux axes, l’un sur la simplicité de la mise en œuvre de l’action et l’autre la conséquence de l’action du court au moyen terme.</p>
  97. <p>Au final nous nous sommes accordés sur deux tâches qui vont être le fil rouge de nos actions prochaines.</p>
  98. <h2>Mon parcours… informel</h2>
  99. <p>Après avoir bien cogité à la fois dans un registre d’apprentissage et aussi de prospection, des discussions ont émergés d’elles-mêmes après la fresque. Pour certaines elles furent la suite de quelques réflexions pendant la fresque. Ce temps de discussion, qui fait presque partie de l’exercice, a été appréciable. Je suis pas certains que ce soit très orthodoxe mais je n’ai pas encore creusé le sujet. En tout cas les trois heures théoriques ont été bien dépassée.</p>
  100. <p>Je ne dirais pas que tout est parfait et que nous avons révolutionné le monde, mais j’ai noté, chez quelques personnes, des prises de conscience sur le sujet à divers degrés. Que ce soit des simples banalités ou bien des réflexion plus profondes, chacun et chacune a pu trouver une manière de s’exprimer et le dialogue s’est enclenché. </p>
  101. <p>Il est intéressant de noter les préoccupations qui animent les partocipantes et participant à ce moment. Pour certains ce sera des questions de gâchis, pour d’autres des préoccupations autour de l’environnement, de l’eau. Sont évoqués aussi les injonctions réelles ou fantasmés. Le sujet des voitures électriques ou des bouteilles consignées sont arrivés sur la table. </p>
  102. <h2>Aparté sur les biais</h2>
  103. <p>On pourrait penser, à juste titre, que l’exercice est un peu biaisé. J’en ai conscience. Je pense que pas mal de personne assistant aux fresques sont des personnes ayant déjà une approche de la question, une conscience en place sur le changement climatique. Ce n’est pas faux en effet. Comme ici, il était proposé à un certains nombres de personnes (environ 40) de participer, cela représente déjà un certains panel intéressant. </p>
  104. <p>Et même si seulement 17 personnes sont venus leur présence a participé à cette optimisme post-fresques. J’ai pu voir réfléchir sur le sujet des personnes qui ne l’avais jamais réellement pris à cœur, mis à part sous le prisme des memes facebook ou d’actualités plus générales.</p>
  105. <p>Comment puis-je en être sur ? Outre le fait que je connaissais ces personnes, tout simplement par l’exercice lui même. L’ice-breaker (ou l’exercice qui permet de briser la glace) consiste à se mettre sur une ligne en fonction de la position de conscientisation (ou même d’éco-anxiété) dans laquelle on se sent. Est-ce que c’est un simple sentiment latent ou bien une obsession de chaque instant ? Je me suis placé pas tout à fait à un bout de la chaine. </p>
  106. <h2>Mon parcours… bombes à graines</h2>
  107. <p>Je viens donc à la deuxième partie mystérieuse de mon titre.</p>
  108. <p>En rentrant chez moi, à travers une marche méditative (mais peut-il en être autrement de la marche ?) une image m’a frappé (ouille). L’image en question est celle de la <a href="https://fr.wikipedia.org/wiki/Boulette_de_graines">bombe à graines</a>, que ce soit celle manufacturée par l’homme aussi bien que la bombe naturelle, comme celle des coquelicots.</p>
  109. <p>Pour reprendre le cheminement de pensée, il faut dire que, avant, pendant et après l’exercice, j’ai beaucoup discuté de divers sujets avec les présentes et présents. De ces discussions ont émergé des idées d’atelier, de communication à faire, de gens à contacter, etc. J’ai repensé alors à mon expérience et mon passé d’organisateur de meet-up (je n’ai pas trouvé de terme plus appropriés qui permettrait de résumer l’action) et de participant et orateur à des conférences. </p>
  110. <p>En clair dans mon esprit voilà les liens qui se sont mis en oeuvre : Si je n’avais été à une conférence et discuté avec une personne en particulier je n’aurais pas entendu d’un projet d’association, qui a conduit à créer une antenne locale de cette association, qui m’a conduit a créer des événements et me pencher sur la question des meetups, qui m’a donné une expérience dans l’organisation, qui m’a appris comment il était possible de fédérer orateurs, entreprises et participantes et participants, ce qui a conduit à m’intégrer dans un écosystème communautaire plus large. Et de ce nouveau point de départ découle une série de conséquences qui amène à un autre point d’étapes, etc…</p>
  111. <p>Pour moi la bombe à graines c’est ça, cette façon dont les actions influence d’autres actions. Je me dis que au-delà de l’influence personnel, d’autres reçoivent ces graines et vont, à leur tour, les faire germer à leur tour.</p>
  112. <p>Il est souvent facile de se décourager, de se dire que ce qu’on écrit ou fait ne vaut pas la peine, car tout à été dit ou fait, mais on n’est pas à l’abri d’une bonne surprise. Comme je l’ai dit, une simple conversation peut changer une vie à l’autre bout du monde.</p>
  113. <h2>Mon parcours… de convalescence</h2>
  114. <p>A l’issu de la fresque, avant de discuter des actions ou engagement, nous est demandé de noter un mot décrivant notre état ou sentiment à ce moment là (en gros le moment où on vient d’achever la fresque et pris conscience des enjeux).</p>
  115. <p>Pour ma part j’ai noté le mot « impatient », c’est ça. C’est un double sens. Je suis à la fois impatient de voir les actions menées et mener les actions moi même. Je suis également impatient de voir ce qui va se passer ces trois prochaines années. Oui l’urgence conditionne et implique cette éco anxiété mais cette deadline, cette borne temporelle qu’est ce qu’elle nous réserve ? Je ne sais pas mais j’ai envie de voir finalement. Peut-être que le pire comme le meilleur nous attends. J’ai bon espoir tout en me sentant informé. Bref c’est pas forcément rassurant mais il ne faut pas perdre l’espoir.</p>
  116. <p>Mais pourquoi je me sens donc moins anxieux qu’avant ? Parce que je me rends compte que je n’ai pas vraiment répondu à la question.</p>
  117. <p>Je ne dirais pas que je suis complétement serein à l’heure actuelle. Il reste des raisons d’angoisser mais j’aborde, après cette fresque, le sujet avec un peu plus d’optimisme. C’est positif de voir des personnes prendre conscience des enjeux, sans que ce soit feint ou bien que ce soit juste de façade, histoire de verdir un discours. Comme je l’ai déjà lu, ou entendu quelque part, la dérèglement climatique ce n’est pas un gros problème à résoudre mais une multitude de petits. Quand on met un peu le doigt dedans on s’en rend vite compte et on a envie de partir sur le front pour se charger de plusieurs sujets, que ce soit pour faire évoluer ses pratiques ou militer. De savoir que d’autres nous rejoignent sur le sujet c’est positif. </p>
  118. <p>Si je dois résumer ce qui m’a fait le plus de bien, ce serait d’avoir déchargé un peu mon sac et d’avoir partagé les poids qui m’oppressent parfois. Il y’aura des suites bien sur, c’est déjà prévus. Nous verrons bien si cet événement fait parti des petit pas que nous faisons pour aller vers un mieux. Comme je l’ai dit je suis vraiment impatient. </p>
  119. <div class="endnotes" id="hhendnotes-650"><h3>Notes</h3><ol><li id="en-650-1">Hommage presque direct au <a href="https://www.actuabd.com/+Le-Bonheur-inquiet-de-Lewis-Trondheim+">bonheur inquiet</a> de Lewis Trondheim <span class="endnotereverse"><a href="#enref-650-1">↩</a></span></li><li id="en-650-2">Remember Tchernobyl et la navette challenger <span class="endnotereverse"><a href="#enref-650-2">↩</a></span></li><li id="en-650-3">Oui j’exagère peut-être mais bon quoi dire d’autre? <span class="endnotereverse"><a href="#enref-650-3">↩</a></span></li></ol></div>
  120. </article>
  121. <hr>
  122. <footer>
  123. <p>
  124. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  125. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  126. </svg> Accueil</a> •
  127. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  129. </svg> Suivre</a> •
  130. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  131. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  132. </svg> Pro</a> •
  133. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  134. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  135. </svg> Email</a> •
  136. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  137. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  138. </svg> Légal</abbr>
  139. </p>
  140. <template id="theme-selector">
  141. <form>
  142. <fieldset>
  143. <legend><svg class="icon icon-brightness-contrast">
  144. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  145. </svg> Thème</legend>
  146. <label>
  147. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  148. </label>
  149. <label>
  150. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  151. </label>
  152. <label>
  153. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  154. </label>
  155. </fieldset>
  156. </form>
  157. </template>
  158. </footer>
  159. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  160. <script>
  161. function loadThemeForm(templateName) {
  162. const themeSelectorTemplate = document.querySelector(templateName)
  163. const form = themeSelectorTemplate.content.firstElementChild
  164. themeSelectorTemplate.replaceWith(form)
  165. form.addEventListener('change', (e) => {
  166. const chosenColorScheme = e.target.value
  167. localStorage.setItem('theme', chosenColorScheme)
  168. toggleTheme(chosenColorScheme)
  169. })
  170. const selectedTheme = localStorage.getItem('theme')
  171. if (selectedTheme && selectedTheme !== 'undefined') {
  172. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  173. }
  174. }
  175. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  176. window.addEventListener('load', () => {
  177. let hasDarkRules = false
  178. for (const styleSheet of Array.from(document.styleSheets)) {
  179. let mediaRules = []
  180. for (const cssRule of styleSheet.cssRules) {
  181. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  182. continue
  183. }
  184. // WARNING: Safari does not have/supports `conditionText`.
  185. if (cssRule.conditionText) {
  186. if (cssRule.conditionText !== prefersColorSchemeDark) {
  187. continue
  188. }
  189. } else {
  190. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  191. continue
  192. }
  193. }
  194. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  195. }
  196. // WARNING: do not try to insert a Rule to a styleSheet you are
  197. // currently iterating on, otherwise the browser will be stuck
  198. // in a infinite loop…
  199. for (const mediaRule of mediaRules) {
  200. styleSheet.insertRule(mediaRule.cssText)
  201. hasDarkRules = true
  202. }
  203. }
  204. if (hasDarkRules) {
  205. loadThemeForm('#theme-selector')
  206. }
  207. })
  208. </script>
  209. </body>
  210. </html>