Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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>Grand-écart — David Larlet</title>
  13. <meta name="description" content="À la limite de la déchirure.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Grand-écart</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/10/08/" title="Publication précédente : Parvenir">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. </p>
  61. </nav>
  62. <hr>
  63. <main>
  64. <p><em>À la limite de la déchirure.</em></p>
  65. <h2 id="post-vitam">Post vitam <a href="#post-vitam" title="Ancre vers cette partie">#</a></h2><p>(Désolé pour les latinistes, si vous avez mieux pour l’inverse d’un <em>post mortem</em>…)</p>
  66. <p>Six mois après <a href="/david/2020/05/26/">la mise en ligne</a>, le gouvernement français considère enfin <a href="https://mesconseilscovid.sante.gouv.fr/">notre travail</a> et se met à communiquer dessus. Je n’ai pas de fierté mais j’avais des frustrations et je vais tenter de les exprimer ci-dessous, probablement avec maladresse.</p>
  67. <p><em>Le service est apprécié.</em> Je ne m’en remet toujours pas mais on a plus de 90 % d’avis positifs de manière relativement constante dans le temps. Associée à cette mesure, on a les messages envoyés qui sont apaisés et aidants (presque aimants parfois !). Lorsque j’observe ce qui se passe côté TousAnti<strike>Stop</strike>Covid, je me dis qu’un tel accueil est plutôt rare. Ou que ce produit est vraiment utile.</p>
  68. <p><em>Le site est léger.</em> Au fil du temps on adapte, on enrichit, on arbitre mais on reste sur une approche économique en terme de bande passante et de ressources, surtout pour une page qui doit rester utilisable sans connexion. Sachant que le site est utilisé à plus de 80 % sur des terminaux mobiles, cela me semble être critique pour une bonne adoption.</p>
  69. <p><em>Les données sont protégées.</em> Principalement car on a fait le choix de ne pas les collecter. Tout reste dans le navigateur et peut être effacé en un clic/touch. C’est une contrainte forte et c’est aussi un moyen de <em>nous</em> protéger d’une éventuelle récupération de ces données à des fins moins vertueuses. Le modèle de menace pouvant être externe et/ou interne.</p>
  70. <p><em>Les contenus sont statiques.</em> <a href="https://effetcapital.tumblr.com/">L’effet Capital</a> est toujours là mais il est tout de même bien amoindri lorsque on sert quelques fichiers HTML/CSS/JS sans aucun travail côté serveur. Les statistiques sont collectés avec <a href="https://plausible.io/">Plausible</a> que l’on a installé chez nous et que l’on appelle avec du <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/blob/master/src/scripts/plausible.js">code compréhensible</a>.</p>
  71. <p><em>Le code est ouvert.</em> Cela permet aux citoyens de faire un audit (sécurité, respect de la vie privée, etc) et de <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/pull/478">participer</a> pour pallier nos failles/oublis. Cela permet aussi <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/issues?q=author%3Ayann-mael+">aux médecins</a> de proposer des mise en conformité à la doctrine gouvernementale directement sur les contenus qui sont en Markdown.</p>
  72. <p>Alors voilà, c’est aujourd’hui devenu un peu moins confidentiel et je m’en réjouis car c’est <em>notre</em> <a href="https://mesconseilscovid.sante.gouv.fr/">petit caillou</a> pour informer dans une situation atypique et anxiogène.</p>
  73. <h2 id="jugements">Jugements <a href="#jugements" title="Ancre vers cette partie">#</a></h2>
  74. <blockquote>
  75. <p>Le problème, estime Ruha Benjamin, c’est que <mark>les concepteurs encodent des jugements dans des systèmes techniques</mark>, mais prétendent que les résultats racistes et discriminatoires de leurs conceptions sont entièrement extérieurs au processus qu’ils mettent en place. Pour elle, nous sommes confrontés à un <em>« déni numérique »</em> alors que nous devrions considérer les choix des industries privées comme des décisions politiques.</p>
  76. <p><cite><em><a href="http://www.internetactu.net/2020/09/15/de-lautomatisation-de-la-discrimination/">De l’automatisation de la discrimination</a></em> (<a href="/david/cache/2020/ae745ef49435700cf03d51a5eac5db2d/">cache</a>)</cite></p>
  77. </blockquote>
  78. <p>Nos productions techniques sont pleines de biais <em>et</em> il suffit parfois d’une seule personne dans l’équipe pour pousser vers une écriture épicène ou considérer des minorités qui étaient complètement dans notre/mon angle mort. C’est un travail quotidien.</p>
  79. <p>Les choix exprimés <a href="#post-vitam">plus haut</a> sont-ils techniques ou politiques ? <em>Les deux.</em> D’autres personnes auraient fait d’autres choix qui auraient aboutis à un autre produit. Je crois que la question n’est pas de savoir s’il aurait été techniquement meilleur ou pas, mais de la direction qu’il invite à prendre en donnant un exemple de futur possible.</p>
  80. <h2 id="hurler">Hurler <a href="#hurler" title="Ancre vers cette partie">#</a></h2>
  81. <blockquote>
  82. <p>Nous avions un trimestre. J’ai envie de hurler parce qu’on n’a rien préparé à part de jolis discours pour dire qu’on était prêts.</p>
  83. <p>J’ai envie de hurler mais je préfère me concen­trer sur l’avenir. <mark>Nous avons encore du temps</mark>, plein de temps, trop de temps en fait parce que la situa­tion risque de durer. Ce temps il serait bien de l’uti­li­ser à autre chose que déli­miter ce qu’on inter­dit au fur et à mesure de la propa­ga­tion.</p>
  84. <p><cite><em><a href="https://n.survol.fr/n/nous-avons-encore-du-temps-trop-de-temps">Nous avons encore du temps, trop de temps</a></em> (<a href="/david/cache/2020/d9b134bfc282d16627d4b43c2f254a22/">cache</a>)</cite></p>
  85. </blockquote>
  86. <p>J’ai envie de hurler aussi lorsque je vois les décisions qui sont prises et les erreurs grossières de communication en temps de crise. Par contre, je suis moins optimiste sur le temps qu’il nous reste. J’ai l’impression que ça craque de partout et qu’il ne manque pas grand chose pour que ça déborde avec violence.</p>
  87. <p>Là où les gouvernements ont eu du mal à gérer une séquence de catastrophes, je les imagine difficilement appréhender un empilement d’évènements de manière systémique sans être — au mieux — contre-productifs. Et là où il y a un déficit de confiance et d’espoir, un vide se crée qui laisse la place à des orientations pas toujours enviables.</p>
  88. <h2 id="delire-collectif">Délire collectif <a href="#delire-collectif" title="Ancre vers cette partie">#</a></h2>
  89. <blockquote>
  90. <p>QAnon, qui était probablement une blague au départ, joue désormais un rôle important dans la campagne électorale américaine. Il met en difficulté les administrateurs des grands réseaux sociaux et il est devenu un réseau mondial à part entière, voire même une secte, comme il est de plus en plus définit.</p>
  91. <p>[…]</p>
  92. <p>Dans les études sur le conspirationnisme, les chercheurs ont inventé le néologisme <em>conspirituality</em> — conspiration + spiritualité.</p>
  93. <p><cite><em><a href="https://lundi.am/Conspiration-et-fantasmagorie-a-l-ere-de-Trump-et-du-Covid">Conspiration et fantasmagorie à l’ère de Trump et du Covid [1/2]</a></em> (<a href="/david/cache/2020/a7aeda811863501accbfc92553cb1f14/">cache</a>)</cite></p>
  94. </blockquote>
  95. <p>Je ne m’étais pas intéressé plus que ça à ce qu’il y avait derrière l’étiquette <em>QAnon</em> et d’une certaine manière — après la sidération/tristesse — il y a un côté rassurant. J’ai parfois la nécessité de me rassurer sur ma santé mentale lorsque je me dis que la situation actuelle ne peut déboucher que sur un renouveau de la Croyance (<em>conspiritualité</em> en français c’est encore mieux). Tous les éléments sont réunis et je m’attendais à un <em>leader</em> charismatique mais en fait un phénomène diffus et décentralisé pourrait être encore plus puissant.</p>
  96. <blockquote>
  97. <p>Mais il ne s’agit pas ici de la liberté d’expression ou de culte d’une minorité persécutée. Nous parlons d’une secte réelle (QAnon) qui croit en l’existence d’une secte imaginaire (la Cabale), invente des calomnies impressionnantes, déchaîne ses adeptes dans des lynchages virtuels et rêve d’extermination, bien que – pour le moment du moins – ils comptent sur un pouvoir putschiste pour la réaliser. Tout cela en vénérant un milliardaire, Donald Trump, qui est aussi l’homme politique le plus puissant de la planète.</p>
  98. <p>[…]</p>
  99. <p>Je choisis les <mark>fantasmagories du complot</mark> parce que, par rapport à l’analyse de classe de la société et à la critique de l’économie politique, ils sont moins contraignants et plus confortables.</p>
  100. <p><cite><em><a href="https://lundi.am/Conspiration-et-fantasmagorie-a-l-ere-de-Trump-et-du-Covid-3491">Conspiration et fantasmagorie à l’ère de Trump et du Covid [2/2]</a></em> (<a href="/david/cache/2020/d2f9981b67269d49060a09ce9d768831/">cache</a>)</cite></p>
  101. </blockquote>
  102. <p>Je trouve cela fascinant de pouvoir observer les mécanismes au sein de telles communautés. Les potins d’une cours de récréation à la dimension du web. Il y a un enfant de 7 ans à la maison qui nous rapporte que son ami à trouvé un diamant dans son jardin. Je crois qu’il s’agit du même schéma d’auto-persuasion collective qui est à l’œuvre… à une toute autre échelle.</p>
  103. <h2 id="pofigisme">Pofigisme <a href="#pofigisme" title="Ancre vers cette partie">#</a></h2>
  104. <blockquote>
  105. <p>En Russie, pour signifier qu’on s’en fout, on dit <q>mnie po figou</q>. Et on appelle « pofigisme » l’accueil résigné de toute chose. Les Russes se vantent d’opposer leur pofigisme intérieur aux convulsions de l’Histoire, aux soubresauts du climat, à la vilénie de leurs chefs. Le pofigisme n’emprunte ni à la résignation des stoïciens ni au détachement des bouddhistes. Il n’ambitionne pas de mener l’homme à la vertu sénéquienne ne de dispenser des mérites karmiques. Les Russes demandent simplement qu’on les laisse vider une bouteille aujourd’hui parce que demain sera pire qu’hier. Le <em>pofigisme</em> est <mark>un état de passivité intérieure corrigée par une force vitale</mark>. Le profond mépris envers toute espérance n’empêche pas le pofigiste de rafler le plus de saveur possible à la journée qui passe.</p>
  106. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  107. </blockquote>
  108. <p>J’ai encore un peu de mal à l’accepter mais on a fini par acheter une voiture. Il y a de la résignation dans cet acte et aussi l’espoir de quitter la ville. J’aurais l’occasion d’en reparler mais je voulais consigner cet achat ici pour future référence.</p>
  109. <h2 id="dettes">Dettes <a href="#dettes" title="Ancre vers cette partie">#</a></h2>
  110. <blockquote>
  111. <p>You’re probably going to die with some debt to your name. Most people do. In fact, <mark>73% of consumers had outstanding debt when they were reported as dead</mark>, according to December 2016 data provided to Credit.com by credit bureau Experian. Those consumers carried an average total balance of $61,554, including mortgage debt. Without home loans, the average balance was $12,875.</p>
  112. <p><cite><em><a href="https://www.credit.com/blog/americans-are-dying-with-an-average-of-62k-of-debt-168045/">Americans Are Dying With an Average of $62K of Debt</a></em> (<a href="/david/cache/2020/a72d2139ab4c1269363ea1744a61ee50/">cache</a>)</cite></p>
  113. </blockquote>
  114. <p>Trois états-uniens sur quatre meurent en étant toujours endettés. Au moment où je m’interroge à ce sujet, cette statistique est assez terrifiante. Tout est fait pour vivre à crédit en Amérique du Nord et il est très difficile d’y échapper, ne serait-ce que pour être crédit…ble lorsqu’on cherche à louer un logement. C’est assez contre-intuitif pour ma culture qui interprète l’endettement comme un discrédit justement. N’est-il pas suffisant de vivre avec ce que l’on a déjà « acquis » ?</p>
  115. <p><em>Probablement à rapprocher d’une culture colonisatrice et insatiable.</em></p>
  116. <h2 id="ornithophile">Ornithophile <a href="#ornithophile" title="Ancre vers cette partie">#</a></h2>
  117. <blockquote>
  118. <p>On doit le diagnostique de cet effondrement à des scientifiques aussi bien qu’à des amateurs — il y entre en effet une sorte d’amitié pour les oiseaux, quelque chose que chacun peut éprouver pour son compte. Fabienne Raphoz, qui écrit depuis longtemps, essais et poèmes, sur les oiseaux, se dit ainsi « ornithophile » : ni ornithologue, ni méthodique <em>birdwatcher</em>, mais ornithophile, mue par l’amour des oiseaux et le plaisir pris à leur existence.</p>
  119. <p>Ornithophilie : <mark>joie que les oiseaux soient là, surprise qu’ils existent et qu’ils soient tels</mark>, plaisir pris à la forme de leur présence, à la manière dont ils peuplent le ciel et ouvrent au-devant de nous un monde de lignes et de chants. Mais aussi, et surtout, vigilance quant à leur sort, et tristesse devant leur disparition.</p>
  120. <p>[…]</p>
  121. <p>Le disparition progressive du chant des oiseaux est la mesure sonore de ce qui arrive à notre environnement tout entier : de ce qui nous arrive. C’est son poème criant, son élégie, le long lamento, troué de pépiements, de l’anthropocène.</p>
  122. <p><cite><em><a href="/david/2020/12/21/#nos-cabanes">Nos cabanes</a></em>, Marielle Macé</cite></p>
  123. </blockquote>
  124. <p>Je crois qu’avec mes <a href="/david/2020/09/16/#jumelles">jumelles</a> je me retrouve beaucoup dans cette description. Je ne sais plus où je lisais, il y a quelques mois, une réflexion poétique sur des survivants de dinosaures qui nous chanteraient depuis toujours des avertissements/témoignages quant aux conséquences d’une extinction de masse. Depuis, je n’écoute plus les oiseaux de la même manière.</p>
  125. <blockquote>
  126. <p>L’écologie aujourd’hui ne saurait être seulement une affaire d’accroissement des connaissances et des maîtrises, ni même de préservation ou de réparation. Il doit y entrer quelque chose d’une <em>philia</em> : une amitié pour la vie elle-même et pour la multitude de ses phrasés, un concernement, un souci, un attachement à l’existence d’autres formes de vie et un désir de s’y relier vraiment.</p>
  127. <p><cite><em>Ibid.</em></cite></p>
  128. </blockquote>
  129. <h2 id="reflet">Reflet <a href="#reflet" title="Ancre vers cette partie">#</a></h2>
  130. <blockquote>
  131. <p>L’amour vrai ne serait-il pas d’aimer ce qui nous est irrémédiablement différent ? Non pas un mammifère ou un oiseau, qui sont encore trop proches de notre humanité, mais un insecte, une paramécie. Il y a dans l’humanisme un parfum de corporatisme reposant sur l’impératif d’aimer ce qui nous ressemble. L’homme se doit d’aimer l’homme comme le chirurgien-dentiste aime les autres chirurgiens-dentistes. Dans la clairière, j’inverse la proposition et tente d’aimer les bêtes avec une intensité proportionnelle au degré d’éloignement biologique qu’elles entretiennent avec moi. <mark>Aimer c’est reconnaître la valeur de ce qu’on ne pourra jamais connaître.</mark> Et non pas célébrer son propre reflet dans le visage d’un semblable.</p>
  132. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  133. </blockquote>
  134. <p>Je redécouvre ces extraits, recopiés il y a quelques mois, sans toujours me souvenir de la raison pour laquelle j’ai été interpellé à l’époque. Alors je ré-interprète mon propre cheminement de pensée. Je deviens mon propre reflet. En perdant la mémoire, reconnait-on la valeur de ce que l’on a déjà connu ? Pari gagnant.</p>
  135. <blockquote>
  136. <p>Le reflet offre à l’homme de contempler deux fois la splendeur. […] Les montagnes jouent à front renversé. Les reflets sont plus beaux que la réalité. L’eau féconde l’image de sa profondeur, de son mystère. La vibration à la surface situe la vision aux lisières du rêve.</p>
  137. <p><cite><em>Ibid.</em></cite></p>
  138. </blockquote>
  139. <h2 id="impatience">Impatience <a href="#impatience" title="Ancre vers cette partie">#</a></h2>
  140. <blockquote>
  141. <p><em>[En mangeant.]</em><br />
  142. J’ai hâte de savoir ce que je vais faire dans ma vie.</p>
  143. </blockquote>
  144. <p>Parfois, la prise de recul est assez vertigineuse.</p>
  145. </main>
  146. <nav>
  147. <p class="center">
  148. <a rel="prev" href="/david/2020/10/08/" title="Publication précédente : Parvenir">←</a> •
  149. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  150. </p>
  151. </nav>
  152. </article>
  153. <hr>
  154. <footer>
  155. <p>
  156. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  157. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  158. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  159. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  160. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  161. </p>
  162. <template id="theme-selector">
  163. <form>
  164. <fieldset>
  165. <legend>Thème</legend>
  166. <label>
  167. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  168. </label>
  169. <label>
  170. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  171. </label>
  172. <label>
  173. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  174. </label>
  175. </fieldset>
  176. </form>
  177. </template>
  178. </footer>
  179. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  180. <script type="text/javascript">
  181. function loadThemeForm(templateName) {
  182. const themeSelectorTemplate = document.querySelector(templateName)
  183. const form = themeSelectorTemplate.content.firstElementChild
  184. themeSelectorTemplate.replaceWith(form)
  185. form.addEventListener('change', (e) => {
  186. const chosenColorScheme = e.target.value
  187. localStorage.setItem('theme', chosenColorScheme)
  188. toggleTheme(chosenColorScheme)
  189. })
  190. const selectedTheme = localStorage.getItem('theme')
  191. if (selectedTheme && selectedTheme !== 'undefined') {
  192. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  193. }
  194. }
  195. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  196. window.addEventListener('load', () => {
  197. let hasDarkRules = false
  198. for (const styleSheet of Array.from(document.styleSheets)) {
  199. let mediaRules = []
  200. for (const cssRule of styleSheet.cssRules) {
  201. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  202. continue
  203. }
  204. // WARNING: Safari does not have/supports `conditionText`.
  205. if (cssRule.conditionText) {
  206. if (cssRule.conditionText !== prefersColorSchemeDark) {
  207. continue
  208. }
  209. } else {
  210. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  211. continue
  212. }
  213. }
  214. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  215. }
  216. // WARNING: do not try to insert a Rule to a styleSheet you are
  217. // currently iterating on, otherwise the browser will be stuck
  218. // in a infinite loop…
  219. for (const mediaRule of mediaRules) {
  220. styleSheet.insertRule(mediaRule.cssText)
  221. hasDarkRules = true
  222. }
  223. }
  224. if (hasDarkRules) {
  225. loadThemeForm('#theme-selector')
  226. }
  227. })
  228. </script>
  229. </body>
  230. </html>