A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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>Il n'y aura pas de retour à la normale (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.terrestres.org/2020/03/24/il-ny-aura-pas-de-retour-a-la-normale/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Il n'y aura pas de retour à la normale</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.terrestres.org/2020/03/24/il-ny-aura-pas-de-retour-a-la-normale/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p class="td-post-sub-title">Nos vies reprendront-elles leur cours après le confinement ? S'appuyant sur les modélisations de la pandémie du rapport de l'Imperial College, Gideon Lichfield estime que nos vies confinées et contrôlées ne sont pas prêtes de disparaître. Le bouleversement sanitaire et sécuritaire de nos sociétés sera massif.</p>
  69. <p><span class="rt-reading-time"><span class="rt-label rt-prefix">Temps de lecture : </span> <span class="rt-time">9</span> <span class="rt-label rt-postfix">minutes</span></span>
  70. <p><strong>Nos vies reprendront-elles leur cours habituel après le confinement ? Rien n’est moins sûr. Le vote précipité à l’Assemblée nationale, le 21 mars, d’une « loi d’urgence » donnant au gouvernement le droit de légiférer par ordonnances pour restreindre les libertés publiques et pour modifier le droit du travail en imposant aux salariés une semaine de congé et la prise de RTT pendant la durée du confinement pose question. Le souvenir de l’état urgence terroriste ne doit pas être perdu. Décrété après les attentats de 2015 et présenté comme provisoire, il n’a en fait jamais été aboli. L’essentiel de ses dispositions, passées dans le droit commun en novembre 2017, sont devenues notre nouvelle normalité. En ira-t-il de même pour les expériences qu’autorise l’état d’urgence sanitaire ? </strong></p></p>
  71. <p><strong>Dans cet article, Gideon Lichfield s’appuie sur les modélisations de l’évolution de la pandémie réalisées par l’équipe des épidémiologistes de l’Imperial College de Londres, paru le 16 mars, et reprises par le Comité scientifique qui conseille Macron. Le pronostic qu’en tire l’auteur est clair : l’épidémie ne disparaîtra pas au bout de 2 ou de 6 mois. Nos vies confinées et contrôlées non plus. Nous entrons dans le temps du délitement : il faut nous préparer à un cycle long alternant périodes de privation de libertés, lors des résurgences du virus, et moments d’assouplissement de ces restrictions en périodes de décrue. Lichfield pronostique que le nouvel impératif de sécurité sanitaire va doucement envahir nos vies et les conduire vers plus de surveillance, de contrôle social et surtout d’inégalités. </strong></p>
  72. <p><strong>Sans adhérer à toutes les conclusions de cette analyse prospective, il a semblé intéressant et important à la rédaction de <em>Terrestres </em>de verser cette pièce au débat sur le bouleversement en cours.</strong></p>
  73. <hr class="wp-block-separator"/>
  74. <p class="has-small-font-size"><span>Traduit de l’anglais (Etats-Unis) par Maxime Chédin</span></p>
  75. <p class="has-drop-cap">Pour stopper le coronavirus, il va nous falloir changer radicalement presque tout ce que nous faisons : notre façon de travailler, de faire du sport, de voir les gens, de faire les courses, d’assurer notre santé, d’éduquer nos enfants, de prendre soin des membres de notre famille.</p>
  76. <p>On aimerait tous que les choses reviennent rapidement à la normale. Mais ce que la plupart d’entre nous n’ont probablement pas encore compris – ça ne tardera pas – c’est qu’il n’y aura en fait pas de retour à la normale après quelques semaines ou quelques mois. Un certain nombre de choses ne redeviendront jamais <em>normales</em>.</p>
  77. <p>Il est maintenant largement admis (même en Grande-Bretagne) que l’objectif de chaque pays doit être d’« aplatir la courbe » de l’épidémie de Coronavirus. Autrement dit, imposer une distanciation sociale pour ralentir la propagation du virus et faire en sorte que le nombre de personnes malades en même temps ne provoque pas l’effondrement du système de santé, comme cela risque d’arriver en Italie en ce moment. Cela signifie que la pandémie doit être « étalée », à un niveau d’intensité faible, jusqu’à ce qu’un nombre suffisant de personnes aient eu le Covid-19, pour que la majeure partie de la population soit immunisée (en supposant que l’immunité dure des années, ce que nous ne savons pas), ou pour qu’un vaccin puisse être diffusé.</p>
  78. <p>Combien de temps cela prendrait-il, et jusqu’où les restrictions des interactions sociales doivent-elles aller ? Hier [16 mars, ndt], le président Donald Trump, annonçant de nouvelles interdictions, telles que la limitation à 10 personnes des rassemblements, a déclaré qu’« avec plusieurs semaines d’actions ciblées, nous pourrons reprendre le contrôle et inverser rapidement la courbe ». En Chine, le confinement qui dure depuis six semaines commence à s’atténuer, à présent que les nouveaux cas de contamination se font rares.</p>
  79. <p>Mais ça ne s’arrêtera pas là. Tant que quelqu’un dans le monde sera porteur du virus, les poussées épidémiques peuvent se reproduire et continueront de se produire si des contrôles stricts ne sont pas instaurés pour les contenir. Dans un <a href="https://www.imperial.ac.uk/media/imperial-college/medicine/sph/ide/gida-fellowships/Imperial-College-COVID19-NPI-modelling-16-03-2020.pdf">rapport</a> publié hier [16 mars], une équipe de chercheurs de l’<em>Imperial College</em> de Londres a proposé un moyen d’y parvenir : instaurer des mesures de distanciation sociale plus fortes chaque fois que les admissions dans les unités de soins intensifs (USI) commencent à monter en flèche, et les assouplir lorsque le nombre d’admissions retombe. Voici à quoi cela ressemblerait :</p>
  80. <div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-1024x723.png" alt="" class="wp-image-5628" srcset="https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-1024x723.png 1024w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-300x212.png 300w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-768x542.png 768w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-100x70.png 100w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-200x140.png 200w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-696x491.png 696w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-1068x754.png 1068w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1-595x420.png 595w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-1.png 1436w" sizes="(max-width: 1024px) 100vw, 1024px"/></figure></div>
  81. <p>La ligne orange correspond aux admissions en soins intensifs [ICU, <em>Intensive Care Units. NDT</em>]. Chaque fois qu’elles dépassent un certain seuil – par exemple 100 nouveaux cas par semaine – le pays fermerait toutes les écoles et la plupart des universités et adopterait une politique de distanciation sociale. En dessous de 50, ces mesures seraient levées, mais les personnes présentant des symptômes ou dont des membres de la famille présentent des symptômes seraient confinées chez elles.</p>
  82. <p>Qu’entend-on par « distanciation sociale » ? Les chercheurs la définissent ainsi : « Tous les ménages réduisent de 75% les contacts en dehors du foyer, de l’école ou du lieu de travail ». Cela ne veut pas dire que vous pouvez sortir avec vos amis une fois par semaine au lieu de quatre fois. Cela signifie que chacun fait tout ce qu’il peut pour minimiser les contacts sociaux et que, dans l’ensemble, le nombre de contacts diminue de 75%.</p>
  83. <p>Si on suit ce modèle, concluent les chercheurs, la distanciation sociale et les fermetures d’écoles devraient être en vigueur environ deux tiers du temps – deux mois de confinement alternant en moyenne avec un mois de reprise – jusqu’à ce qu’un vaccin soit disponible, ce qui prendrait au moins 18 mois (<a href="https://www.technologyreview.com/s/615331/a-coronavirus-vaccine-will-take-at-least-18-monthsif-it-works-at-all/">si tant est qu’il fonctionne</a>). Ils notent que les résultats sont « qualitativement similaires pour les États-Unis ».</p>
  84. <p><em>Dix-huit mois ?!</em> Il doit sûrement y avoir d’autres solutions, direz-vous. Pourquoi ne pas simplement augmenter le nombre de lits en soins intensifs et traiter plus de personnes en même temps, par exemple ?</p>
  85. <p>Eh bien, dans le modèle proposé, cela ne résout pas le problème. Sans l’instauration d’une distanciation sociale de l’ensemble de la population, les chercheurs ont constaté que même la meilleure stratégie d’atténuation, de temporisation (<em>mitigation</em>) – c’est-à-dire l’isolement ou la mise en quarantaine des malades, des personnes âgées et de celles qui ont été exposées, ainsi que la fermeture des écoles – produirait encore une augmentation du nombre de personnes gravement malades <em>huit fois supérieure</em> à ce que le système américain ou britannique peut supporter. (C’est la courbe bleue la plus basse du graphique ci-dessous ; la ligne rouge plate représente le nombre actuel de lits disponibles en réanimation ou soins intensifs). Même en réquisitionnant l’industrie pour qu’elle produise en série des respirateurs artificiels et tous les autres équipements nécessaires, il manquera encore beaucoup d’infirmières et de médecins pour prendre soin de tout le monde.</p>
  86. <div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-1024x611.png" alt="" class="wp-image-5630" srcset="https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-1024x611.png 1024w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-300x179.png 300w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-768x458.png 768w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-1536x917.png 1536w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-696x415.png 696w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-1068x637.png 1068w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2-704x420.png 704w, https://www.terrestres.org/wp-content/uploads/2020/03/Graph-2.png 1538w" sizes="(max-width: 1024px) 100vw, 1024px"/></figure></div>
  87. <p>Pourquoi alors ne pas imposer un confinement drastique pour une période longue mais unique, de cinq mois environ ? Ça ne marche pas : dès que les interdictions sont levées, la pandémie éclate à nouveau, mais cette fois-ci, c’est l’hiver, la pire période pour les systèmes de santé surchargés.</p>
  88. <p>Pourquoi ne pas se diriger alors vers une résolution plus brutale, à savoir relever considérablement le seuil du nombre d’admissions en soins intensifs à partir duquel on enclenche les mesures de confinement ou de distanciation sociale fortes, en acceptant que beaucoup plus de patients meurent ? Il s’avère que cela ne fait guère de différence. Même dans le scénario le moins restrictif de l’<em>Imperial College</em>, nous sommes enfermés plus de la moitié du temps.</p>
  89. <p>En fait, il ne s’agit pas d’une perturbation temporaire. C’est le début d’un mode de vie qui sera complètement différent.</p>
  90. <h2><strong>Vivre dans un état de pandémie</strong></h2>
  91. <p>À court terme, cette situation nouvelle sera extrêmement préjudiciable aux entreprises et activités qui dépendent de la réunion de personnes en grand nombre : restaurants, cafés, bars, boîtes de nuit, salles de sport, hôtels, théâtres, cinémas, galeries d’art, centres commerciaux, foires artisanales, musées, musiciens et autres artistes, salles de sport et équipes sportives, lieux et producteurs de conférences, compagnies de croisière, compagnies aériennes, transports publics, écoles privées, garderies d’enfants. Sans parler du stress des parents obligés de scolariser leurs enfants à la maison, les personnes qui essaient de s’occuper de parents âgés sans les exposer au virus, et toute personne qui n’a pas d’économies ou d’épargne pour faire face à la baisse de ses revenus.</p>
  92. <p>Certaines activités pourront bien sûr en partie s’adapter : les salles de fitness pourraient vendre du matériel à domicile et des sessions de formation en ligne, par exemple. Nous assisterons à une explosion de nouveaux services dans ce que l’on a déjà appelé « l’économie close » (<em>shut-in economy</em>). On peut aussi espérer que certaines habitudes se mettent à changer : moins de voyages polluants, des chaînes d’approvisionnement plus locales, plus de marche, plus de vélo. </p>
  93. <p>Mais en réalité, le bouleversement sera, pour de très nombreuses entreprises et formes de subsistance, impossible à absorber. Le mode de vie confiné n’est tout simplement pas viable sur de si longues périodes. </p>
  94. <p>Comment pourrons-nous donc vivre dans ce nouveau monde ? On peut espérer qu’une partie de la réponse consistera à développer de meilleurs systèmes de santé, avec un système d’intervention sanitaire capable d’agir rapidement pour identifier et contenir les épidémies avant qu’elles ne commencent à se propager, et d’augmenter très rapidement la production d’équipements médicaux, de kits de test et de médicaments quand nécessaire. Il sera trop tard pour arrêter le Covid-19, mais ces mesures aideront à faire face aux futures pandémies. </p>
  95. <p>À court terme, nous bricolerons peut-être des compromis inconfortables qui nous permettront de conserver un semblant de vie sociale. Peut-être que les cinémas retireront la moitié de leurs sièges, que les réunions se tiendront dans des salles plus grandes avec des chaises espacées, et que les salles de sport exigeront que vous réserviez des séances d’entraînement à l’avance pour éviter toute fréquentation trop importante. </p>
  96. <p>Mais en fin de compte, je prédis autre chose. C’est que nous allons rétablir notre capacité de socialiser, mais en toute « sécurité », c’est-à-dire en développant des moyens plus sophistiqués pour identifier les personnes qui sont <em>à risque</em>, et celles qui ne le sont pas, et en discriminant – légalement – celles qui le sont.</p>
  97. <p>Nous pouvons en voir les signes avant-coureurs dans les mesures que certains pays prennent aujourd’hui. Israël commence à utiliser <a href="https://www.nytimes.com/2020/03/16/world/middleeast/israel-coronavirus-cellphone-tracking.html">les données de localisation des téléphones portables</a> avec lesquelles ses services de renseignement traquent les terroristes pour retrouver les personnes qui ont été en contact avec des porteurs connus du virus. Singapour procède à une recherche exhaustive des <a href="https://www.technologyreview.com/s/615353/singapore-is-the-model-for-how-to-handle-the-coronavirus/">contacts</a> et publie des données détaillées sur chaque cas connu, exceptée pour l’instant l’identification des personnes par leur nom.</p>
  98. <p>Nous ne savons pas exactement à quoi ressemble cet avenir proche, bien sûr. Mais on peut imaginer un monde dans lequel, pour prendre un avion, il faudra être inscrit à un service qui trace vos déplacements via votre téléphone. Sans savoir où vous êtes allé, la compagnie aérienne recevrait une alerte si vous étiez à proximité de personnes infectées connues ou de points chauds de la maladie. Les mêmes exigences s’appliqueraient à l’entrée des grandes salles de spectacles, des bâtiments gouvernementaux ou des centres de transport public. Il y aurait des scanners de température partout, et votre entreprise pourrait exiger que vous portiez un moniteur qui surveille votre température ou d’autres signaux sanitaires du même type. Si les boîtes de nuit demandent déjà une preuve de majorité, elles pourraient à l’avenir exiger des preuves d’immunité virale – une carte d’identité ou une sorte de vérification numérique via votre téléphone, montrant que vous avez déjà récupéré ou été vacciné contre les dernières souches de virus.</p>
  99. <p>Et nous nous adapterons à ces mesures. Nous les accepterons, comme nous avons accepté les contrôles de sécurité de plus en plus stricts dans les aéroports après les attaques terroristes. La surveillance intrusive de nos vies sera considérée comme un prix acceptable à payer pour jouir en sécurité de la liberté d’être avec d’autres personnes (saines).</p>
  100. <p>Mais comme toujours, le coût réel de cette surveillance sera supporté par les plus pauvres et les plus fragiles. Les personnes qui ont moins accès aux soins de santé ou qui vivent dans des zones plus exposées aux maladies seront désormais aussi plus fréquemment exclues des lieux et des possibilités ouverts aux autres. Les travailleurs de l’industrie du spectacle – des chauffeurs aux plombiers en passant par les professeurs de yoga indépendants – verront leur emploi devenir plus précaire encore. Les immigrés, les réfugiés, les sans-papiers et les anciens détenus seront confrontés à un autre obstacle pour s’intégrer dans la société.</p>
  101. <p>En outre, à moins que ne s’imposent des règles démocratiques strictes sur la manière dont le risque de maladie ou de contagion d’une personne est évalué, les gouvernements ou les entreprises pourraient choisir des critères très divers : vous pourriez être considéré à haut risque si vous gagnez moins de 50 000 dollars par an, si vous faites partie d’une famille de plus de six personnes et si vous vivez dans certaines régions du pays, par exemple. Cela crée des possibilités de biais algorithmiques et de discrimination cachée, comme cela s’est produit l’année dernière avec un algorithme utilisé par des assurances de santé américaines, et qui s’est avéré <a href="https://www.technologyreview.com/f/614626/a-biased-medical-algorithm-favored-white-people-for-healthcare-programs/">favoriser – par inadvertance – les Blancs.</a></p>
  102. <p>Le monde a changé à de nombreuses reprises. Il change à nouveau. Nous devrons tous nous adapter à une nouvelle façon de vivre, de travailler et de nouer des relations. Mais comme en tout changement, certains auront plus à perdre que d’autres, et ce sont ceux qui ont déjà beaucoup trop perdu. Le mieux que nous puissions espérer, c’est que la profondeur de cette crise forcera enfin les pays – les États-Unis en particulier – à corriger les inégalités sociales béantes qui expliquent l’immense vulnérabilité de larges pans de leur population.</p>
  103. <p class="has-small-font-size"><strong>Gideon Lichfield</strong>, « <a href="https://www.technologyreview.com/s/615370/coronavirus-pandemic-social-distancing-18-months/?truid=09628e5751032d94e96002088cb0f3cd&amp;utm_source=the_download&amp;utm_medium=email&amp;utm_campaign=the_download.unpaid.engagement&amp;utm_content=03-18-2020">We’re not going back to normal</a> », <em>MIT Technological Review</em>, 17 mars 2020.</p>
  104. </main>
  105. </article>
  106. <hr>
  107. <footer>
  108. <p>
  109. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  110. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  111. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  112. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  113. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  114. </p>
  115. <template id="theme-selector">
  116. <form>
  117. <fieldset>
  118. <legend>Thème</legend>
  119. <label>
  120. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  121. </label>
  122. <label>
  123. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  124. </label>
  125. <label>
  126. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  127. </label>
  128. </fieldset>
  129. </form>
  130. </template>
  131. </footer>
  132. <script type="text/javascript">
  133. function loadThemeForm(templateName) {
  134. const themeSelectorTemplate = document.querySelector(templateName)
  135. const form = themeSelectorTemplate.content.firstElementChild
  136. themeSelectorTemplate.replaceWith(form)
  137. form.addEventListener('change', (e) => {
  138. const chosenColorScheme = e.target.value
  139. localStorage.setItem('theme', chosenColorScheme)
  140. toggleTheme(chosenColorScheme)
  141. })
  142. const selectedTheme = localStorage.getItem('theme')
  143. if (selectedTheme && selectedTheme !== 'undefined') {
  144. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  145. }
  146. }
  147. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  148. window.addEventListener('load', () => {
  149. let hasDarkRules = false
  150. for (const styleSheet of Array.from(document.styleSheets)) {
  151. let mediaRules = []
  152. for (const cssRule of styleSheet.cssRules) {
  153. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  154. continue
  155. }
  156. // WARNING: Safari does not have/supports `conditionText`.
  157. if (cssRule.conditionText) {
  158. if (cssRule.conditionText !== prefersColorSchemeDark) {
  159. continue
  160. }
  161. } else {
  162. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  163. continue
  164. }
  165. }
  166. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  167. }
  168. // WARNING: do not try to insert a Rule to a styleSheet you are
  169. // currently iterating on, otherwise the browser will be stuck
  170. // in a infinite loop…
  171. for (const mediaRule of mediaRules) {
  172. styleSheet.insertRule(mediaRule.cssText)
  173. hasDarkRules = true
  174. }
  175. }
  176. if (hasDarkRules) {
  177. loadThemeForm('#theme-selector')
  178. }
  179. })
  180. </script>
  181. </body>
  182. </html>