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.

index.html 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  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>Postface : Construire sur les ruines du système : vers une technologie libératrice ? (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://antemonde.org/textes/postface-batir-aussi/">
  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>Postface : Construire sur les ruines du système : vers une technologie libératrice ?</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://antemonde.org/textes/postface-batir-aussi/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>À l’automne 2011, les éditions Tahin party envisagent une réédition de
  71. l’article « Vers une technologie libératrice », écrit par Murray
  72. Bookchin en 1965 et publié une première fois dans son recueil <em>Pour une
  73. société écologique</em>. Pour compléter ce texte avec des réflexions plus
  74. actuelles, nous nous penchons à quelques-unEs sur cet imaginaire qui
  75. décrit une société autogestionnaire, écologique et postcapitaliste, et
  76. sommes particulièrement touchéEs par l’enthousiasme de l’auteur pour les
  77. questions techniques. Un enthousiasme à détailler les solutions
  78. matérielles déployées par ses Communes, pour produire les nombreuses
  79. choses dont chacunE a besoin. Un enthousiasme pour décrire l’imbrication
  80. de la production agricole et artistique, du travail et de la vie, depuis
  81. la mise en place de petites usines métallurgiques… jusqu’aux
  82. microcentrales nucléaires.</p>
  83. <hr class="transition">
  84. <p>SidéréEs par ce dernier aspect, conscientEs que depuis les années 60, la
  85. radiation a bien coulé sous les ponts, et même attaqué quelques piles de
  86. béton, nous éprouvons cependant le besoin de suivre la piste tracée par
  87. Bookchin et de creuser notre rapport à la technique, aux sciences, aux
  88. technologies. Depuis des années, nous participons à des luttes contre
  89. les technologies de pointe, du nucléaire aux nanotechnologies, de la
  90. société de contrôle à la bio/pétrochimie agricole. Alors que les idées
  91. de la décroissance se développent et que les mouvements d’occupation
  92. contre les grands projets inutiles fleurissent (ZAD de
  93. Notre-Dame-des-Landes, jardins des Lentillères, lutte des No TAV…), de
  94. nombreuses positions politiques s’entremêlent et attisent nos
  95. désaccords.</p>
  96. <hr class="transition">
  97. <p>Nous sommes hostiles à la sacralisation de la Nature, particulièrement
  98. répandue au sein des mouvements critiques du capitalisme industriel. Ce
  99. phénomène valorise les notions d’authenticité, d’harmonie
  100. humainEs/nature, de binarité entre les processus dits « naturels »
  101. (forcément bons) et ceux « artificiels » (et donc corrompus). Cette
  102. approche sous-entend qu’il existerait une nature humaine originelle,
  103. aliénée par la technique et le capitalisme, que l’on pourrait retrouver
  104. en brisant nos chaînes… Au contraire, nous considérons qu’il n’y a pas
  105. de forme pure ou authentique d’être humainE mais que nous sommes les
  106. fruits d’une continuelle construction sociale, imbriquant les
  107. contraintes de nos environnements, de nos histoires et de nos luttes,
  108. toujours conditionnéEs par nos imaginations subjectives et collectives.
  109. Nous rejetons l’idée d’une division Nature/Culture qui dicte ce qui est
  110. normal ou anormal en s’appuyant sur un argument d’autorité qui interdit
  111. toute subversion de l’ordre établi, le fameux « c’est la nature qui veut
  112. ça ».</p>
  113. <hr class="transition">
  114. <p>Un second écueil de nos mouvements anti-industriels est pour nous le
  115. catastrophisme. Avec l’introduction forcée et exponentielle des
  116. technologies de pointe dans nos quotidiens, avec le rythme forcené
  117. auquel cela transforme nos comportements, avec la menace de l’hiver
  118. nucléaire et la généralisation des cancers… difficile de nier l’urgence
  119. à changer de cap. Pourtant, cela ne justifie pas d’en faire le seul et
  120. unique front. Cette idée de lutte absolument prioritaire constitue à nos
  121. yeux une actualisation de l’anticapitalisme (devenu anticapitalisme
  122. industriel), qui néglige une nouvelle fois les questions de domination
  123. et de discrimination : luttes contre les frontières, les nationalismes,
  124. contre les violences sexistes, racistes, homophobes et toutes les formes
  125. d’isolement social.</p>
  126. <p>Celles-ci sont considérées comme minoritaires et secondaires (<em>on verra
  127. ça après la révolution !</em>), non-politiques (<em>ce sont des questions
  128. purement sociétales, à la mode, tout à fait compatibles avec le
  129. capitalisme</em>), contre-révolutionnaires (<em>ça nous divise et nous empêche
  130. de lutter contre l’Ennemi !</em>)… voire tout simplement impensées.</p>
  131. <p>Nous restons convaincuEs au contraire que nos mouvements seraient plus
  132. intelligents, plus en prise avec la réalité protéiforme, s’ils
  133. considéraient ces oppressions croisées, sans les résumer à un système
  134. monolithique.</p>
  135. <p>Bref, les luttes anti-indus nous tiennent vraiment à cœur mais ce
  136. rapport à la Nature et à la Lutte Prioritaire nous semblent participer
  137. d’une pensée rétrograde, sacrifiant l’émancipation des personnes pour
  138. encenser un fantasme d’harmonie collective, le plus souvent dans sa
  139. forme rurale et familiale…</p>
  140. <p>Alors, comment critiquer le capitalisme industriel sans être
  141. réactionnaire (cette posture du <em>c’était mieux avant</em>) ? Comment
  142. articuler nos analyses du monde pour penser dans un même mouvement
  143. l’anéantissement des logiques capitalistes et des dominations croisées ?
  144. Comment, en tant que transféministes (TransPédésGouines et
  145. matérialistes), s’emparer des critiques anti-industrielles ?</p>
  146. <h2 id="lœuf-et-la-poule">L’œuf et la poule</h2>
  147. <p>Nous avons bien assimilé que lutter contre une technologie mortifère
  148. sans s’attaquer à <em>tout son monde</em> n’a aucun sens. Il ne suffira jamais
  149. de se concentrer sur une technologie précise (OGM, biométrie, puçage des
  150. animaux, ou tant d’autres), ni de seulement pointer les nuisances
  151. sanitaires et de pollutions directes, car nous serions alors condamnéEs
  152. à reproduire ces critiques à chaque nouveau surgissement technologique,
  153. sans jamais infléchir les logiques de fond. Il s’agit bien de penser la
  154. « société industrielle » dans son ensemble, de comprendre les
  155. trajectoires technologiques qui servent ses polices, ses militaires et
  156. ses industriels sur la durée.</p>
  157. <p>Nous considérons qu’aucun outil n’est neutre et que la question n’est
  158. donc pas de savoir s’il peut être utilisé à bon ou à mauvais escient.
  159. Nous préférons considérer qu’il est toujours porteur, quelles que soient
  160. les intentions, de ces logiques <em>techniciennes</em>, soumises aux diktats du
  161. Progrès et de la Vitesse qui façonnent largement notre monde.</p>
  162. <hr class="transition">
  163. <p>C’est aussi ce qui nous touche dans le texte de Bookchin : il ne célèbre
  164. pas les technologies en tant que telles. Elles sont pensées dans un
  165. monde précis et cela change tout. Nous y voyons la possibilité de
  166. réinventer des usages, au service de tous les aspects de la vie et de la
  167. mort, du personnel et du collectif, du local et de la plus large
  168. échelle, du matériel et de l’imaginaire.</p>
  169. <hr class="transition">
  170. <p>À partir de là, impossible de réfléchir notre rapport à la technique et
  171. aux technologies sans penser <em>le monde qui va avec</em>. Cette réflexion
  172. nous plonge dans un mouvement d’aller-retour permanent, entre la façon
  173. dont les techniques sont conditionnées par le monde qui les produit et,
  174. inversement, comment elles structurent le monde dans lequel elles se
  175. déploient. L’un ne préexiste pas spécialement à l’autre : société et
  176. développement technique nous semblent interdépendants.</p>
  177. <h2 id="ce-quon-garde">Ce qu’on garde</h2>
  178. <p>Nous sommes à la recherche de futurs désirables, mais notre réalité est
  179. verrouillée sous cette chape de plomb capitalisto-techno-mondialisée :
  180. tout est déjà lancé, on n’y peut rien, ça va trop vite…</p>
  181. <p>La première impulsion de Bookchin, dans son article « Vers une
  182. technologie libératrice », est de partager une énergie, une passion de
  183. la bidouille, des chantiers et des métiers manuels en général. C’est la
  184. recherche théorique et l’invention du concret : expérimenter, rencontrer
  185. de sérieux problèmes de résistance et d’équilibre et trouver des
  186. solutions pour que ça tienne. Cette manière de faire de la théorie
  187. politique en se frottant à la matérialité du quotidien, de nos besoins
  188. intimes et contradictoires, nous parle énormément.</p>
  189. <hr class="transition">
  190. <p>Bookchin nous présente également un monde révolutionné, débarrassé du
  191. carcan capitaliste. Nous avions, nous aussi, besoin de faire rupture, de
  192. penser une révolution suffisamment puissante pour construire autrement.
  193. Pourtant quelque chose nous manquait dans le texte de Bookchin. L’idée
  194. d’imaginer, non pas une utopie parachutée, hors-sol, mais un monde dans
  195. lequel nous souhaiterions vivre bientôt, par exemple dans dix ans, en
  196. prenant en compte ce qu’il est aujourd’hui. Composer avec l’existant
  197. nous a semblé indispensable, partir des ruines et avancer à partir de
  198. là. D’où le titre et le texte en introduction de ce livre, inspirés par
  199. l’anarchiste Buenaventura Durruti :</p>
  200. <blockquote>
  201. <p>Nous n’avons pas peur des ruines. Nous sommes capables de bâtir
  202. aussi. C’est nous qui avons construit les palais et les villes
  203. d’Espagne, d’Amérique et de partout. Nous, les travailleurs, nous
  204. pouvons bâtir des villes pour les remplacer. Et nous les construirons
  205. bien mieux ; aussi nous n’avons pas peur des ruines. Nous allons
  206. recevoir le monde en héritage. La bourgeoisie peut bien faire sauter
  207. et démolir son monde à elle avant de quitter la scène de l’Histoire.
  208. Nous portons un monde nouveau dans nos cœurs.</p>
  209. </blockquote>
  210. <p>Il nous a semblé absurde de penser d’autres mondes en faisant
  211. abstraction de ce que nous avons entre les mains ici et maintenant.
  212. Penser la révolution à partir des espoirs nés en Tunisie et en Égypte en
  213. 2011, pour voir ensuite où nous en serions en 2021.</p>
  214. <p>Nos ateliers d’écriture réguliers ont été l’occasion d’échapper par
  215. à-coups aux urgences militantes. Prendre le temps de penser des formes
  216. de révolutions victorieuses nous a nourriEs au-delà de toute attente.
  217. Depuis, une curiosité frénétique s’est emparée de nous. Nous bâtissons
  218. régulièrement des châteaux de cartes étourdissants et pleins de points
  219. d’interrogation. Nous avons posé les règles d’un jeu captivant et
  220. formidable. Se donner ainsi de l’air, s’autoriser ces espaces, nous a
  221. permis de poursuivre les luttes auxquelles nous participons et d’y
  222. amener une nouvelle vigueur.</p>
  223. <hr class="transition">
  224. <p>Notre première tentative d’écriture en 2011 donna lieu à ce genre de
  225. proposition :</p>
  226. <blockquote>
  227. <p>Au supermarché de l’utopie, nous avons feuilleté le catalogue des
  228. possibles. Nous avons fait notre marché imaginaire, comme lorsque
  229. nous étions petitEs, quand nous compulsions le catalogue de jouets en
  230. notant, page après page, ceux que nous convoitions.</p>
  231. <p>Nous avons retenu, en tout premier lieu, la laverie automatique au
  232. coin de la rue, l’énergie électrique pour la lumière et le mixeur à
  233. soupe, ainsi que le téléphone filaire à tous les étages. Il nous
  234. fallait donc de quoi fabriquer des câbles conducteurs et des
  235. kilomètres de tube pour acheminer l’eau potable. Mais comment
  236. envisager l’extraction du cuivre et de l’aluminium quand elle
  237. signifiait colonisation des terres, travail de forçat dans les mines
  238. et pollutions massives ? Nous avons réfléchi un moment aux
  239. possibilités de recyclage à l’infini de ces métaux et nous avons,
  240. pour cette fois, un peu étouffé notre rancœur et choisi de composer
  241. avec l’existant : les capitalistes ont extrait, en à peine un siècle,
  242. 95 % du cuivre jamais exploité par l’humanité, de quoi recycler
  243. jusqu’à la fin des temps nos conduites, paratonnerres, chaudrons… et
  244. tambours de machine à laver.</p>
  245. <p>Nous avons ensuite retenu les clous, les vis, les tôles et les
  246. gouttières, les charnières de porte et les cadres de vélo. Des scies,
  247. des marteaux, de quoi forger, de quoi tronçonner, de quoi charrier,
  248. fendre, visser, creuser, porter. Il nous fallait donc un tracteur, ou
  249. du moins un gros moteur sur lequel adapter une scierie et une
  250. fendeuse à bois, une broyeuse à fruits, une foreuse et des pelles. Là
  251. encore, abandonnons l’extraction du zinc, du fer et du charbon et
  252. concentrons-nous sur la refonte des matériaux déjà produits.</p>
  253. <p>Fabriquer du papier, du charbon de bois, de la chaux ou du ciment,
  254. mouler des briques et des tuiles, tisser le chanvre, le lin… Nous
  255. n’avions vraiment pas envie de faire de l’élevage, alors par quoi
  256. remplacer la laine et le cuir ? Comment fabriquer des vêtements
  257. synthétiques sans la pétrochimie ?…</p>
  258. <p>Nous avons quand même mis une option sur la possibilité du voyage
  259. rapide, ce qui posait des questions conséquentes quant à l’entretien
  260. des routes, des voies ferroviaires, des cales de bateau ou des
  261. avions. Des questions d’adaptation des moteurs à des carburants aussi
  262. variés que l’alcool de patate, l’huile de colza ou de tournesol, le
  263. méthane ou le schiste. Des questions sur l’usinage des moteurs, sur
  264. le fuselage des engins, sur la provenance du caoutchouc et la
  265. fabrication de plastiques.</p>
  266. </blockquote>
  267. <h2 id="des-avalanches-de-questions">Des avalanches de questions</h2>
  268. <p>Détricoter, tirer des fils et ouvrir des possibles, se donner de la
  269. force en imaginant concrètement les bouleversements à notre portée, avec
  270. ce qui résisterait. Notre parti pris est d’imaginer un monde où les
  271. choses ne seraient pas si simples, où elles nous blesseraient et nous
  272. accableraient comme on l’éprouve déjà si souvent… mais où nous serions
  273. suffisamment ensemble <em>pour que ça tienne</em> : en d’autres termes,
  274. imaginer une révolution qui durerait toujours dix ou vingt ans plus
  275. tard, inventive, contradictoire et belle, à la fois modeste et
  276. ambitieuse.</p>
  277. <hr class="transition">
  278. <p>Les questions en ont appelé d’autres, chaque hypothèse nous confrontant
  279. à de nouveaux problèmes. Non seulement les choix techniques en
  280. entraînaient d’autres, mais les personnages iels-mêmes se trouvaient
  281. embarquéEs dans l’avalanche des doutes, des négociations et des
  282. compromis. Souvent, nous nous sommes demandé ce qui avait pu changer, si
  283. radicalement. Et tout aussi souvent, nous avons cherché les fantômes qui
  284. figeaient les réflexes des unEs et des autres : dans ce monde en
  285. perpétuelle ébullition, qu’est-ce qui perdurerait, malgré nous, de cet
  286. Antémonde ?… Après sept années d’ateliers d’écriture collectifs pour
  287. façonner un univers entier, nous avons aujourd’hui la sensation d’y être
  288. tout juste entréEs et d’y entrevoir mille inconnues.</p>
  289. <hr class="transition">
  290. <p>Notre travail ne s’est pas uniquement nourri de nos questions mais aussi
  291. de nos désaccords. Nos polémiques, nos imaginaires en conflit, nous ont
  292. donné l’inspiration d’une réalité tout en mouvements et en divergences.
  293. Des vies pleines de contradictions et de contrariétés, où chacunE se
  294. verrait contraintE à dépasser ses limites et à en formaliser d’autres.
  295. Notre passion pour les pratiques autogestionnaires et anti-autoritaires,
  296. notre volonté de fabriquer des consensus et de penser les rapports de
  297. force, nous ont pousséEs à imaginer des mondes où chacunE pourrait
  298. trouver des prises vers l’émancipation.</p>
  299. <p>La fiction nous a permis d’ouvrir quelques fenêtres sur des existences
  300. collectives, vastes et complexes, mais sans ériger de programme, en
  301. projetant seulement des fragments nourris de notre passion pour la
  302. bidouille.</p>
  303. <hr class="transition">
  304. <p>Cette expérience à plusieurs mains n’est qu’une esquisse, quelques
  305. épisodes. Nous espérons que notre enthousiasme sera contagieux et que
  306. d’autres voudront tirer des fils, pour que ça continue à tenir.</p>
  307. <div class="signature">
  308. <p>mars 2018</p>
  309. <p>les ateliers de l’Antémonde</p>
  310. </article>
  311. <hr>
  312. <footer>
  313. <p>
  314. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  315. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  316. </svg> Accueil</a> •
  317. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  318. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  319. </svg> Suivre</a> •
  320. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  321. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  322. </svg> Pro</a> •
  323. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  324. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  325. </svg> Email</a> •
  326. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  327. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  328. </svg> Légal</abbr>
  329. </p>
  330. <template id="theme-selector">
  331. <form>
  332. <fieldset>
  333. <legend><svg class="icon icon-brightness-contrast">
  334. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  335. </svg> Thème</legend>
  336. <label>
  337. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  338. </label>
  339. <label>
  340. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  341. </label>
  342. <label>
  343. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  344. </label>
  345. </fieldset>
  346. </form>
  347. </template>
  348. </footer>
  349. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  350. <script>
  351. function loadThemeForm(templateName) {
  352. const themeSelectorTemplate = document.querySelector(templateName)
  353. const form = themeSelectorTemplate.content.firstElementChild
  354. themeSelectorTemplate.replaceWith(form)
  355. form.addEventListener('change', (e) => {
  356. const chosenColorScheme = e.target.value
  357. localStorage.setItem('theme', chosenColorScheme)
  358. toggleTheme(chosenColorScheme)
  359. })
  360. const selectedTheme = localStorage.getItem('theme')
  361. if (selectedTheme && selectedTheme !== 'undefined') {
  362. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  363. }
  364. }
  365. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  366. window.addEventListener('load', () => {
  367. let hasDarkRules = false
  368. for (const styleSheet of Array.from(document.styleSheets)) {
  369. let mediaRules = []
  370. for (const cssRule of styleSheet.cssRules) {
  371. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  372. continue
  373. }
  374. // WARNING: Safari does not have/supports `conditionText`.
  375. if (cssRule.conditionText) {
  376. if (cssRule.conditionText !== prefersColorSchemeDark) {
  377. continue
  378. }
  379. } else {
  380. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  381. continue
  382. }
  383. }
  384. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  385. }
  386. // WARNING: do not try to insert a Rule to a styleSheet you are
  387. // currently iterating on, otherwise the browser will be stuck
  388. // in a infinite loop…
  389. for (const mediaRule of mediaRules) {
  390. styleSheet.insertRule(mediaRule.cssText)
  391. hasDarkRules = true
  392. }
  393. }
  394. if (hasDarkRules) {
  395. loadThemeForm('#theme-selector')
  396. }
  397. })
  398. </script>
  399. </body>
  400. </html>