A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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>Coronavirus : les premiers désaccordés. (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="#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. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.affordance.info/mon_weblog/2020/03/coronavirus-premier-cordee.html">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Coronavirus : les premiers désaccordés.</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.affordance.info/mon_weblog/2020/03/coronavirus-premier-cordee.html" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>"<em>J’essaye de me dépêtrer de ce pays infernal, plein de peureux et de courageux, plus terribles les uns que les autres.</em>" <br/>Jean Giono. Le Hussard sur le toit.</p>
  69. <h2>Les premiers (de cordée) seront les derniers. </h2>
  70. <p>Les voici donc. Les grands capitaines d'industrie au service de l'État en déshérance, lui fournissant et offrant autant de masques qu'ils ont la garantie que l'ISF ne sera pas rétabli et que leurs <em>exils</em> fiscaux seront toujours considérés comme de simples "<em>optimisations</em>".</p>
  71. <p>Ici en France, l'homme le plus riche du monde et ses 117 milliards de dollars d'actifs, notre Bernard Arnault, offrant 10 millions de masques pour une valeur de 5 millions d'euros. "<em>Nos vies valent plus que leurs profits</em>" disait le tract, ils ne manqueront jamais de nous rappeler, chaque fois qu'ils le peuvent, qu'ils tiennent nos vies par leurs profits. </p>
  72. <p>Et aux USA, Apple qui donne 10 millions masques. Là pas besoin de les fabriquer. Ils étaient déjà là. En stock. Chez Apple. Pour Apple. Apple. 116 000 employés dans le monde. 10 millions de masques. Prévoyance. Réassurance. L'entreprise État. </p>
  73. <p>Pour Facebook ce sera un peu moins de 900 000 masques qui seront offerts. Facebook. 35 000 employés dans le monde. 900 000 masques provisionnés pour faire face aux incendies en Californie. Prévoyance. Réassurance. L'entreprise État. </p>
  74. <p><strong>One mask to rule them all</strong>. Le masque est ce qui nous lie. Les masques, ceux des cendres encore chaudes des <a href="https://reporterre.net/Mega-feux-Nous-ne-vivons-pas-seulement-dans-l-Anthropocene-mais-dans-le-Pyrocene" rel="noopener" target="_blank">méga-feux du Pyrocène</a>, désormais sur le front du virus de l'anthropocène. Entropie du masque. "<em>One Mask to Rule Them All</em>". Jamais autant les hommes les plus riches de la planète, jamais autant les tentaculaires firmes oligopolistiques, jamais autant les milliardaires philanthropes n'auront été autant sur le devant. Et l'Etat en arrière, à mendier, à supplier, à demander, à attendre, à espérer, à improviser, à leurrer, à faire des téléthons du financement de l'hôpital public sur les chaînes du service public. Il y a à peine trois mois de cela, il tirait au LBD sur les infirmiers et les soignants, l'État. Il les gazait, l'État. Ils n'avaient pourtant déjà pas de masques. "<em>One Mask to Rule Them All</em>".</p>
  75. <p>Les voici donc, les patrons du Medef <a href="https://www.ouest-france.fr/sante/virus/coronavirus/coronavirus-le-president-du-medef-favorable-la-nationalisation-d-entreprises-en-grande-difficulte-6789272" rel="noopener" target="_blank">implorant la nationalisation</a> pour mieux renflouer sur fonds publics les secteurs qu'ils sont incapables de faire autre chose que précariser sur fonds privés. </p>
  76. <p>Les voici donc, les ministres de l'économie, <a href="https://twitter.com/BrunoLeMaire/status/1242364593336471552" rel="noopener" target="_blank">implorant les grands groupes à la modération sur les dividendes,</a> ministres qui hier encore osaient <a href="http://www.leparisien.fr/economie/bruno-le-maire-propose-une-prime-de-1000-euros-pour-ceux-qui-continuent-de-travailler-malgre-le-coronavirus-20-03-2020-8284209.php" rel="noopener" target="_blank">la prime de 1000 euros pour celles et ceux qui vont affronter le virus sans masque</a> là où le prix le plus bas de l'enterrement low-cost est déjà à 1500 euros. </p>
  77. <p>Les voilà donc, les premiers de cordée, à mesurer leur inutilité sociale télé-travaillée et à prier pour que ceux qu'ils ne regardaient même plus, les derniers de la cordée, soient eux bien arrimés à la paroi, solidement et résolument, pour pouvoir absorber la tension liée à la vitesse de leur chute ; de la chute des premiers. </p>
  78. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4f5a96a200d-pi"><img alt="Arton13336-72bcd" class="asset asset-image at-xid-6a00d8341c622e53ef0240a4f5a96a200d img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4f5a96a200d-500wi" title="Arton13336-72bcd"/></a></p>
  79. <p>Souvenez-vous de la "loi travail". Ils voulaient "inverser la hiérarchie des normes" et ils y sont parvenus. <strong>Voilà maintenant qu'une autre inversion commence. Celle de l'utilité sociale</strong>. Eboueurs, soignants, aides à domicile, couturiers et couturières, agriculteurs, chauffeurs de bus et de trains, et dans une moindre mesure enseignants : les voilà les premiers désaccordés. Pas une armée. Ou alors d'éclopés de misère sociale ou de mépris politique. Et parfois des deux. Pas une armée. Juste un peuple. Beaucoup de femmes. Beaucoup de pauvres. Beaucoup de "régimes spéciaux".</p>
  80. <p>Et le jour d'après la jonction des éclopés. Peut-être. </p>
  81. <p>"<a href="https://www.pourleco.com/ca-clashe/debat-des-economistes/dominique-meda-la-crise-du-covid-19-nous-oblige-reevaluer-lutilite" rel="noopener" target="_blank">Réévaluer l'utilité sociale des métiers</a>" explique patiemment la sociologue Dominique Méda.</p>
  82. <blockquote>
  83. <p>"<em>(...) il s’agit aussi d’un moment opportun pour prendre en considération l’importance sociale des différents métiers. Dans son ouvrage Bullshit Jobs, l’anthropologue américain David Graeber explique que pour savoir si un métier est essentiel ou si c'est un "boulot à la con", il faut imaginer les conséquences sociétales de sa disparition. Par ce prisme et à l’heure d’une crise sanitaire mondiale, l’enseignement est clair : aujourd’hui, les métiers essentiels sont ceux qui nous permettent de continuer à vivre : tous les personnels de santé, du médecin à l’aide-soignante, mais aussi tous les métiers dits du "care".</em></p>
  84. <p><em>Des bataillons d’aides-soignantes et d’aides à domicile – en très grande majorité des femmes - assument des tâches cruciales pour la solidarité entre les générations. Ils assurent la toilette, les repas, l’aide aux gestes essentiels de nos seniors dépendants. Faute de reconnaissance et de rémunération suffisantes, de moins en moins de personnes effectuent ces activités difficiles. Mais on peut aussi penser aux éboueurs, aux personnels des commerces alimentaires…</em></p>
  85. <p><em>Soudainement, les titulaires des métiers les mieux payés nous apparaissent bien inutiles et leur rémunération exorbitante. L’un des premiers enseignements de la crise sanitaire, en somme, c’est qu’il est urgent de réétudier la "hiérarchie" sociale des métiers, en accord avec nos valeurs et relativement à leur utilité réelle.</em>"</p>
  86. </blockquote>
  87. <h2>Crise. Accident. Catastrophe.</h2>
  88. <p>Sur France Inter <a href="https://www.franceinter.fr/emissions/l-invite-de-7h50/l-invite-de-7h50-25-mars-2020" rel="noopener" target="_blank">Boris Cyrulknik expliquait à propos de la pandémie</a> :</p>
  89. <blockquote>
  90. <p>"<em>J’entends parler de crise, mais la définition de la crise c’est qu’après, ça repart comme avant. Là, c’est une catastrophe, pas une crise : ça repartira, mais pas comme avant.</em>" </p>
  91. </blockquote>
  92. <p><strong>C'est tout l'enjeu. Savoir si nous traiterons cela comme une crise ou comme une catastrophe.</strong> Le point de vue du gouvernement, des gouvernements, est clair : il s'agit d'une crise. Juste d'une crise. Seulement d'une crise. Réparable sur le mode du vaccin c'est à dire en injectant une dose de maladie supposée immuniser pour le futur. Le meilleur exemple étant la loi d'exception dite "d'urgence sanitaire" qui permet le retour ... aux 60 heures de travail par semaine. Ça repartira. Mais pas comme avant. Peut-être en pire qu'avant. </p>
  93. <p>Comprendre ce que nous traversons. Crise ? Accident ? Catastrophe ?</p>
  94. <p><strong>La crise est anticipable</strong>. Parce qu'elle d'ordre sanitaire. Et que le soin ne peut être autre chose qu'une prévoyance. Ce qui est pointé dans cette crise c'est l'imprévoyance des responsables (politiques), une imprévoyance aujourd'hui documentée comme coupable, et demain au sortir de la crise, certainement criminelle. La crise était anticipable. Pré-visible. </p>
  95. <p><strong>Si les effets de la crise, eux, ne le sont pas ou plus difficilement</strong>, si le gouvernement nous explique qu'ils ne peuvent pas l'être, ou - ce qui revient au même - <a href="https://www.lefigaro.fr/flash-actu/le-gouvernement-a-pris-ses-responsabilites-selon-sibeth-ndiaye-20200323" rel="noopener" target="_blank">qu'ils ont parfaitement anticipé ce qui pouvait l'être</a>, c'est uniquement parce qu'ils n'ont d'autre horizon que de considérer avec cynisme que toute sortie de crise peut être l'opportunité d'un asservissement encore plus fort des forces productives. Et plus les gens auront été mis en danger, plus ils réclameront de sécurité. Et qu'il sera plus aisé d'encore restreindre leurs libertés. C'est pour l'instant ce futur là, qui est en train de s'écrire. De ces crises. </p>
  96. <p><strong>La catastrophe n'est pas anticipable</strong>. Parce qu'elle est d'ordre humanitaire. Et que l'humanité est de l'ordre de l'imprévoyance, c'est même ce qui la définit. "<em>L'imprévoyance précède l'essence</em>", <a href="https://la-philosophie.com/sartre-existence-precede-essence" rel="noopener" target="_blank">comme l'écrivait presque Jean-Paul</a>. Au moment où j'écris cet article, presqu'un tiers de l'humanité est confinée. <a href="https://www.lci.fr/international/coronavirus-covid-19-pandemie-confinement-total-en-inde-plus-de-2-6-milliards-de-personnes-confinees-dans-le-monde-2148941.html" rel="noopener" target="_blank">2,7 milliards de personnes</a>. Et les pays pauvres qui arrivent. Inde. Et les continents souvent de misère. L'Afrique. Et les systèmes de santé qui ne reposent plus que sur la capacité d'empathie de quelques milliardaires. Les USA. La catastrophe n'est pas anticipable. La seule certitude de cette catastrophe c'est qu'elle sera humanitaire.    </p>
  97. <p><strong>On peut prévoir le déclenchement de ce qui sera une catastrophe, mais rarement sa remédiation pérenne. </strong>Ainsi on "sait" que des volcans vont se réveiller, on "sait" que des failles sismiques vont s'ouvrir, on "sait" que des ouragans et catastrophes naturelles vont se produire. Mais l'on ne "sait" ni comment s'en prémunir, ni comment garantir aux populations exposées autre chose que des répétitions qui les avertissent et les conditionnent à réagir au mieux sans réellement les protéger, les immuniser ou les éloigner durablement du lieu de la catastrophe. </p>
  98. <p><strong>Et puis il y a l'accident</strong>. Celui théorisé par Virilio. L'accident global aux conséquences inscrites dans la durée. Comme celui de Tchernobyl. Comme le Krach boursier également. L'accident. Et son rapport à la "vitesse" et à "l'accélération", deux notions au coeur de la pensée de Virilio.</p>
  99. <blockquote>
  100. <p>"<em>Comme pour tout événement contemporain, il faut prendre en compte une série de synchronisations au niveau mondial. Synchronisation des coutumes, des moeurs, des façons de réagir, mais aussi des émotions. On est passés d'un communisme de classe à une mondialisation instantanée et simultanée des affects et des peurs - et non plus des opinions. (...) </em></p>
  101. </blockquote>
  102. <p>Et de poursuivre (<strong>je souligne</strong>) : </p>
  103. <blockquote>
  104. <p>"<em>(...) la terre est trop petite pour le progrès, pour la vitesse de l'Histoire. D'où les accidents à répétition. Nous vivions dans la conviction que nous avions un passé et un futur. Or le passé ne passe pas, il est devenu monstrueux, au point que nous n'y faisons plus référence. Quant au futur, il est limité par la question écologique, la fin programmée des ressources naturelles, comme le pétrole. Il reste donc le présent à habiter. Mais l'écrivain Octavio Paz disait : "L'instant est inhabitable, comme le futur." Nous sommes en train de vivre cela, y compris les banquiers. C'est ici et maintenant que cela se joue. Un nouveau relief se crée. Ce n'est pas triste la finitude, c'est la réalité. Il faut l'accepter. Ce krach nous apprend qu'il faut vivre dans sa grandeur propre, dans un monde achevé. Nous avons une obligation d'intelligence. (...) </em><em><strong>Si l'Etat ne prend pas la mesure de ce futurisme de l'instant, on pourrait au contraire voir arriver un capitalisme sans limites.</strong>"  (<a href="https://www.lemonde.fr/idees/article/2008/10/18/le-krach-actuel-represente-l-accident-integral-par-excellence_1108473_3232.html" rel="noopener" target="_blank">Entrevue dans Le Monde en 2008</a>)</em></p>
  105. </blockquote>
  106. <p>Impossible de s'arrêter de citer cet entretien donné dans <a href="https://www.lemonde.fr/idees/article/2008/10/18/le-krach-actuel-represente-l-accident-integral-par-excellence_1108473_3232.html" rel="noopener" target="_blank">Le Monde il y a plus de 12 ans</a> tant il résonne aujourd'hui. A l'époque il s'agissait du <a href="https://fr.wikipedia.org/wiki/Crise_bancaire_et_financi%C3%A8re_de_l%27automne_2008" rel="noopener" target="_blank">Krach boursier de 2008</a>. Aujourd'hui d'un virus. Mais la point commun c'est la sédentarité que notre rapport au vivant, à la nature, a rendue impossible.  </p>
  107. <blockquote>
  108. <p><em>"Ce n'est pas la peste, il n'y a pas des millions de victimes, ce n'est pas non plus le 11-Septembre. Ce n'est pas la mortalité qui compte ici, hors quelques suicides. Les victimes sont ailleurs. D'où est partie la crise actuelle ? Des subprimes, des maisons à acheter à crédit dans des conditions impossibles. Du sol. Les victimes, ce sont les centaines de milliers de personnes qui perdent leur logement. La notion de sédentarité est déjà remise en cause, avec les immigrés, déportés, réfugiés, les délocalisations d'entreprises, etc. Le phénomène va s'accentuer. Un milliard de personnes vont être contraintes de bouger de lieu de vie d'ici à 2040. Voilà les victimes. Nous sommes dans la notion du stop/eject. On arrête, et on éjecte." </em>(<a href="https://www.lemonde.fr/idees/article/2008/10/18/le-krach-actuel-represente-l-accident-integral-par-excellence_1108473_3232.html" rel="noopener" target="_blank">Entrevue dans Le Monde en 2008</a>)</p>
  109. </blockquote>
  110. <p><strong>On arrête, et on éjecte.</strong> Le coronavirus pose fondamentalement ces deux questions : qui décide d'arrêter ? Qui seront les éjecté(e)s ? </p>
  111. <p>L'accident donc. Qui tient <em>à la fois</em> de la crise (les signes de l'emballement sont tangibles et observables) et de la <em>catastrophe</em> (le moment de la sortie de route est toujours imprévisible). </p>
  112. <p>Virilio qui était avant tout urbaniste. Penseur de la vitesse, de l'accident, mais surtout de l'urbain. De la ville. </p>
  113. <blockquote>
  114. <p><em>"Nous sommes une humanité tellement malade confinée dans les villes. Wuhan est une ville complètement confinée, complètement ivre de pollution. Les poumons sont tous affaiblis, donc les virus qui s'attaquent aux poumons sont à la fête."</em></p>
  115. </blockquote>
  116. <p>C'est ici <a href="https://www.franceinter.fr/societe/nous-sommes-une-humanite-tellement-malade-le-coup-de-gueule-de-coline-serreau" rel="noopener" target="_blank">Coline Serreau qui parle. Sur France Inter</a>. La métaphore de la ville comme poumon (économique, industriel ...) mais comme poumon malade. Affaibli. La métaphore fonctionne plutôt bien. Très bien même. Le reconnaître. Reconnaître que la pollution diminue de manière inédite en ces temps confinés. Et qu'à côté de ceux qui vont mourir de ne plus pouvoir respirer, d'autres vont vivre de pouvoir enfin respirer. </p>
  117. <p>Comme l'écrivait Giono dans Le Hussard sur le toit : "<em>Le choléra fini, il restera les miroirs à affronter.</em>"</p>
  118. <p>Il écrivait également dans le même : "<em>L'homme est aussi un microbe têtu.</em>"</p>
  119. <p>Voici pour preuve. Vous ne confinerez pas notre colère. <a href="https://www.liberation.fr/debats/2020/03/24/j-ai-la-rage_1782912" rel="noopener" target="_blank">Ni notre rage</a>.</p>
  120. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a51a41cc200b-pi"><img alt="Capture d’écran 2020-03-25 à 13.49.22" class="asset asset-image at-xid-6a00d8341c622e53ef0240a51a41cc200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a51a41cc200b-500wi" title="Capture d’écran 2020-03-25 à 13.49.22"/></a>Prise de vue déconfinée depuis un post Facebook de David Dufresne. <br/><a href="http://www.davduf.net/carnet-d-un-confine-coronavirus-2020-jour9" rel="noopener" target="_blank">Ne ratez pas son journal de confinement</a>.</p>
  121. </main>
  122. </article>
  123. <hr>
  124. <footer>
  125. <p>
  126. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  127. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  128. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  129. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  130. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  131. </p>
  132. <template id="theme-selector">
  133. <form>
  134. <fieldset>
  135. <legend>Thème</legend>
  136. <label>
  137. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  138. </label>
  139. <label>
  140. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  141. </label>
  142. <label>
  143. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  144. </label>
  145. </fieldset>
  146. </form>
  147. </template>
  148. </footer>
  149. <script type="text/javascript">
  150. function loadThemeForm(templateName) {
  151. const themeSelectorTemplate = document.querySelector(templateName)
  152. const form = themeSelectorTemplate.content.firstElementChild
  153. themeSelectorTemplate.replaceWith(form)
  154. form.addEventListener('change', (e) => {
  155. const chosenColorScheme = e.target.value
  156. localStorage.setItem('theme', chosenColorScheme)
  157. toggleTheme(chosenColorScheme)
  158. })
  159. const selectedTheme = localStorage.getItem('theme')
  160. if (selectedTheme && selectedTheme !== 'undefined') {
  161. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  162. }
  163. }
  164. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  165. window.addEventListener('load', () => {
  166. let hasDarkRules = false
  167. for (const styleSheet of Array.from(document.styleSheets)) {
  168. let mediaRules = []
  169. for (const cssRule of styleSheet.cssRules) {
  170. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  171. continue
  172. }
  173. // WARNING: Safari does not have/supports `conditionText`.
  174. if (cssRule.conditionText) {
  175. if (cssRule.conditionText !== prefersColorSchemeDark) {
  176. continue
  177. }
  178. } else {
  179. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  180. continue
  181. }
  182. }
  183. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  184. }
  185. // WARNING: do not try to insert a Rule to a styleSheet you are
  186. // currently iterating on, otherwise the browser will be stuck
  187. // in a infinite loop…
  188. for (const mediaRule of mediaRules) {
  189. styleSheet.insertRule(mediaRule.cssText)
  190. hasDarkRules = true
  191. }
  192. }
  193. if (hasDarkRules) {
  194. loadThemeForm('#theme-selector')
  195. }
  196. })
  197. </script>
  198. </body>
  199. </html>