Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

pirms 2 gadiem
pirms 2 gadiem
pirms 2 gadiem
pirms 2 gadiem
pirms 2 gadiem
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  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>Esclavage — David Larlet</title>
  13. <meta name="description" content="Beaucoup de citations de cet ouvrage (Homo Domesticus / Against the grain) qui est remarquable. J’en retiens principalement trois choses :">
  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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Esclavage</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/09/03/" title="Publication précédente : Bifurquer">← Précédent</a> •
  60. <nobr>
  61. <a href="/david/" title="Aller à l’accueil"
  62. ><svg class="icon icon-home">
  63. <use
  64. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  65. ></use>
  66. </svg>
  67. Accueil</a
  68. >
  69. </nobr>
  70. <nobr>
  71. <a href="/david/recherche/" title="Aller à la page de recherche"
  72. ><svg class="icon icon-search">
  73. <use
  74. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
  75. ></use>
  76. </svg>
  77. Recherche</a
  78. >
  79. </nobr>
  80. • <a rel="next" href="/david/2022/11/12/" title="Publication suivante : Mastodon">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <p>Beaucoup de citations de cet ouvrage (<em>Homo Domesticus</em> / <em>Against the grain</em>) qui est remarquable. J’en retiens principalement trois&nbsp;choses&nbsp;:</p>
  85. <ol>
  86. <li>L’écriture est nécessaire à l’État pour consigner l’impôt et celui-ci doit être prélevé sur une quantité visible et saisonnière (blé vs. pomme de terre par&nbsp;exemple).</li>
  87. <li>L’esclavage est nécessaire à la production de nourriture pour les membres de l’État (peut-être à étendre à une forme de nourriture de la pensée avec la construction des téléphones indispensables en&nbsp;Asie&#8239;?).</li>
  88. <li>Une épidémie est la pire chose qui puisse arriver à un État car elle conduit à une perte de population + une décentralisation pour fuir la&nbsp;maladie.</li>
  89. </ol>
  90. <p>La suite après les&nbsp;extraits&nbsp;:</p>
  91. <blockquote>
  92. <p>Dès qu’une entité politique embrasse ne serait-ce que quelques milliers de sujets, une certaine forme de notation et de documentation allant au-delà de la simple mémoire et de la tradition orale devient nécessaire. <mark>Ce lien fondamental entre administration étatique et écriture</mark> est d’autant plus plausible qu’il semble bien qu’en Mésopotamie, l’écriture ait été essentiellement utilisée à des fins de comptabilité pendant plus de cinq siècles avant de commencer à refléter les gloires civilisationnelles auxquelles on l’associe généralement&nbsp;: littérature, mythologies, panégyriques, listes et généalogies royales, chroniques et textes&nbsp;religieux.</p>
  93. <p><cite><em>Homo Domesticus</em>, James C. Scott</cite></p>
  94. </blockquote>
  95. <blockquote>
  96. <p>De même que la plupart des consommateurs occidentaux ne feront jamais <mark>l’expérience directe des conditions de reproduction des fondements matériels de leur existence,</mark> les Athéniens n’avaient guère conscience que près de la moitié de la population servile travaillait dans les carrières, les mines, les forêts et sur les galères et était de ce fait largement&nbsp;invisible.</p>
  97. <p><cite><em>Ibid.</em></cite></p>
  98. </blockquote>
  99. <blockquote>
  100. <p>Tant qu’il existe d’autres options de subsistance, comme l’a montré Ester Boserup dans un ouvrage classique, «&nbsp;il est impossible d’empêcher les membres des classes subalternes de trouver d’autres moyens de subsistance, à moins qu’ils ne soient réduits individuellement en esclavage. Lorsque la population devient si dense que la terre peut être contrôlée, il devient inutile de maintenir les classes subalternes dans la servitude&#8239;; <mark>il suffit de priver la population laborieuse du droit d’être des cultivateurs indépendants</mark>&nbsp;» —&nbsp;ou bien de pratiquer librement la chasse, la cueillette, l’agriculture sur brûlis ou&nbsp;l’élevage.</p>
  101. <p><cite><em>Ibid.</em></cite></p>
  102. </blockquote>
  103. <blockquote>
  104. <p>Nous savons que l’État n’a pas inventé l’esclavage et la servitude&nbsp;: ceux-ci sont observables dans un nombre considérable de sociétés pré-étatiques. Mais ce que l’État a certainement inventé ce sont des sociétés de grande taille reposant systématiquement sur le travail forcé et une main-d’œuvre asservie. Même lorsque la proportion d’esclaves y était bien inférieure à celle d’Athènes, de Sparte, de Rome ou de l’Empire néo-assyrien, le rôle de la main-d’œuvre captive et de l’esclavage était tellement vital et stratégique pour la préservation du pouvoir de ces États que l’on imagine mal qu’ils aient pu subsister longtemps en leur&nbsp;absence.</p>
  105. <p><mark>Pourquoi ne pas prendre au sérieux, en tant qu’hypothèse fructueuse, l’idée d’Aristote selon laquelle un esclave est un outil de travail</mark> et, en tant que tel, peut être assimilé à un animal domestique, à l’instar d’un boeuf, par exemple&#8239;? Après tout, Aristote savait de quoi il parlait. Pourquoi ne pas analyser l’existence de l’esclavage, des prisonniers de guerre soumis aux travaux agricoles, des hilotes, etc., comme le reflet d’un projet étatique visant à domestiquer par la force toute une classe de serviteurs humains de la même manière que nos ancêtres néolithiques avaient domestiqué les ovins et les&nbsp;bovins&#8239;?</p>
  106. <p><cite><em>Ibid.</em></cite></p>
  107. </blockquote>
  108. <blockquote>
  109. <p>Prenons la question de la reproduction. Au cour même de la domestication, il y a l’affirmation du contrôle humain sur la reproduction des plantes ou des animaux, ce qui implique leur confinement et un souci de sélection et de gestion du taux de reproduction. Au cours des guerres visant la capture de prisonniers, la préférence marquée pour les femmes en âge de procréer reflète un intérêt au moins aussi important envers leurs services reproductifs qu’envers leur force de travail. Au vu des défis épidémiologiques auxquels étaient confrontés les premiers centres étatiques, il serait instructif de connaître — même si c’est hélas impossible à vérifier — l’importance de la reproduction des femmes esclaves pour leur stabilité et leur croissance démographiques. <mark>La domestication des femmes non esclaves dans les Etats céréaliers antiques peut également être considérée selon cette perspective.</mark> La combinaison de la propriété foncière, de la famille patriarcale, de la division du travail au sein de la <em>domus</em> et de l’intérêt supérieur de l’État à maximiser sa population avait comme effet de domestiquer la reproduction des femmes en&nbsp;général.</p>
  110. <p><cite><em>Ibid.</em></cite></p>
  111. </blockquote>
  112. <blockquote>
  113. <p>Pourquoi déplorer l’«&nbsp;effondrement&nbsp;» dès lors que la situation décrite par ce terme ne reflète le plus souvent que la décomposition d’un État complexe, fragile et généralement oppressif en de plus petits fragments décentralisés de taille inférieure&#8239;? Une raison fort simple et pas nécessairement superficielle de cette perception négative, c’est que la disparition d’un État prive les chercheurs et spécialistes chargés de documenter les civilisations antiques du matériau brut dont ils ont besoin. […] <mark>Il me semble que nous devrions nous efforcer de «&nbsp;normaliser&nbsp;» l’idée d’effondrement et d’y voir l’amorce d’une reformulation périodique et peut-être même salutaire de l’ordre&nbsp;politique.</mark></p>
  114. <p>[…]</p>
  115. <p>Et surtout, le bien-être d’une population ne doit jamais être confondu avec la puissance d’un centre étatique ou palatial. Il n’était pas rare que les sujets des premiers États abandonnent l’agriculture et les centres urbains afin d’échapper aux impôts, à la conscription, aux épidémies et à l’oppression. Sous un certain angle, on peut considérer qu’ils ont ainsi régressé vers des formes de subsistance plus rudimentaires, telles que la cueillette ou le pastoralisme. Mais sous un autre angle, que je crois plus pertinent, on peut se féliciter qu’ils aient ainsi échappé au paiement d’un tribut en main-d’œuvre et en céréales, survécu à une épidémie, échangé une servitude oppressive contre un surcroît de liberté et de mobilité physique, voire évité la mort au combat. En pareilles circonstances, l’abandon de l’État pouvait être vécu comme une&nbsp;émancipation.</p>
  116. <p><cite><em>Ibid.</em></cite></p>
  117. </blockquote>
  118. <p>Cela fait longtemps que je m’interroge sur notre capacité à accepter cet esclavage moderne que les générations futures ne pourront comprendre, de la même manière qu’il est difficile d’accepter que le commerce triangulaire ait pu être&nbsp;possible.</p>
  119. <p>Si on le prend comme condition de l’État, alors il devient peut-être plus compréhensible et il faut se réjouir d’un effondrement joyeux qui consisterait à sortir de cette nécessité en allant vers une décentralisation et une forme d’auto-suffisance ne reposant pas sur le travail des&nbsp;autres.</p>
  120. <p>Les personnes anxieuses de la situation actuelle sont majoritairement les 10&#8239;% qui exploitent tou·tes les autres pour améliorer/conserver leur confort et confirmer l’assise de leur pouvoir plus ou moins volontairement. J’en fais partie et probablement que toi aussi&nbsp;lecteur·ice.</p>
  121. <p>On ne cherche pas à sauver l’espèce humaine, encore moins la planète mais la reproduction sociale qui assure la supériorité de notre (con)descendance. Il est difficile de <a href="/david/2022/08/24/" title="Silence">rester silencieux</a> sans devenir esclave de ses pensées. En les libérant, j’emprisonne les autres. Comment s’en&nbsp;sortir&#8239;?</p>
  122. <h2 id="liberations">Libérations <a href="#liberations" title="Ancre vers cette partie">#</a></h2>
  123. <blockquote>
  124. <p>💯 On a parfois tendance à penser qu’un diagnostic, par exemple “TDAH” ou “dépression” est une entité naturelle discrète (ce n’est jamais le cas, la comorbidité est la règle et pas l’exception), qui contiendrait une sorte de vérité essentielle et&nbsp;immuable.</p>
  125. <p>En réalité, on pourrait comparer un diagnostic à une constellation. Depuis l’endroit où l’on se trouve, on remarque que des étoiles semblent proches les unes des autres, comme des symptômes qui se présenteraient souvent ensemble. On décide d’appeler la forme qu’elles prennent “la Grande Ourse”, ou “la schizophrénie”. En réalité, selon un point de vue différent, on pourrait créer d’autres formes à partir de chacune de ces étoiles, et donner d’autres noms à ces&nbsp;formes-là.</p>
  126. <p><mark>La constellation permet de décrire un coin du ciel depuis notre point de vue, subjectif dans le temps et dans l’espace.</mark> Ça permet de se repérer, de synthétiser des informations et de les transmettre à d’autres, mais ça ne dit pas grande chose de l’expérience vécue par celles et ceux qui explorent ces espaces&nbsp;interstellaires.</p>
  127. <p><cite><em><a href="https://cailloux.substack.com/p/103-words-words-words">cailloux n°103&nbsp;: words, words, words</a></em>&nbsp;(<a href="/david/cache/2022/bbca3c5e1bb2364d21c39db0f25ce7c7/">cache</a>)</cite></p>
  128. </blockquote>
  129. <blockquote>
  130. <p>🧡 Où l’on redécouvre que le blog qui ne raconte rien, à l’ancienne, n’est pas&nbsp;mort&#8239;!</p>
  131. <p><cite><em><a href="https://nota-bene.org/J-ai-pris-le-large">J’ai pris le large</a></em>&nbsp;(<a href="/david/cache/2022/c45fd3d630e91da74f901ab4bbeebb73/">cache</a>)</cite></p>
  132. </blockquote>
  133. <blockquote lang="en">
  134. <p>👷 After 4&nbsp;hours of work to re-compile my app and 44&nbsp;hours waiting in the review queue, WorldAnimals is now updated to a new version. I am safe for at least another three years before getting automatically flagged for removal. Unless, that is, Apple decides there is a new threshold for “outdated” and change their policy once&nbsp;again.</p>
  135. <p><cite><em><a href="https://vivqu.com/blog/2022/09/25/outdated-apps/">Outdated vs. Complete</a></em>&nbsp;(<a href="/david/cache/2022/e3a00561b3b07a5b4c1e207eb59eaa3f/">cache</a>)</cite></p>
  136. </blockquote>
  137. <blockquote>
  138. <p>😔 Car de la même manière que la bourgeoisie s’est détournée de la malbouffe, elle apprend aujourd’hui à préserver ses enfants des écrans après les avoir utilisés pendant vingt ans comme marqueur social. Les familles les plus pauvres, inondées de pub et privées de nature, dépourvues des moyens de rivaliser avec YouTube et Fortnite par des sorties et des loisirs, sont massivement victimes de la misère addictive du <em>high tech</em>. Non seulement leurs enfants sont les premiers touchés, mais les parents sont désignés comme les principaux coupables. Comme pour les problèmes d’obésité et de surpoids (qui touche maintenant plus d’un tiers des jeunes enfants en France), <mark>la violence de l’intoxication de masse est recyclée en violence de&nbsp;classe.</mark></p>
  139. <p><cite><em><a href="https://reporterre.net/A-la-maison-comme-a-l-ecole-les-ecrans-sont-une-catastrophe">À la maison comme à l’école, les écrans sont une catastrophe</a></em>&nbsp;(<a href="/david/cache/2022/5964573af5b20f004910ef76ee7f3d8a/">cache</a>)</cite></p>
  140. </blockquote>
  141. <blockquote>
  142. <p>🧑‍🎓 Du reste, les 1700&nbsp;milliards de dettes étudiantes ne tombent pas du ciel. Ils découlent d’un choix prenant racine dans les années 1960. Face à l’agitation politique qui dominait alors les campus américains et structurait la résistance à la guerre du Viet Nam, les élites conservatrices avaient tiré la sonnette d’alarme. Le directeur du FBI Edgard Hoover et le patron de la CIA John McCone décrivaient le campus de Berkley (Californie) comme étant «&nbsp;sous influence communiste&nbsp;» – situation qui «&nbsp;nécessitait une action&nbsp;corrective&nbsp;».</p>
  143. <p>Avec l’élection de l’acteur de série B Ronald Reagan au poste de gouverneur de Californie, la droite conservatrice avait pu commencer à restreindre les budgets des universités publiques. Roger Freeman, son conseiller à l’éducation, déclarait&nbsp;: «&nbsp;nous faisons face au risque de produire un prolétariat instruit, ce serait de la dynamite&#8239;! On doit être sélectif&#8239;!&nbsp;». Couper les subventions publiques et transférer le coût des études sur les étudiants, incités à s’endetter pour payer leurs frais d’inscriptions, devait permettre de placer une barrière à l’entrée des études supérieures. Il s’agissait d’une petite révolution&nbsp;: jusqu’ici, les politiques publiques visaient à éduquer un maximum de citoyens, gratuitement.</p>
  144. <p><cite><em><a href="https://lvsl.fr/annulation-de-la-dette-etudiante-aux-etats-unis-la-fin-dun-totem-neoliberal/">la fin d’un totem néolibéral</a></em>&nbsp;(<a href="/david/cache/2022/2ce856390079feed694a41bb2f2f42f1/">cache</a>)</cite></p>
  145. </blockquote>
  146. <blockquote>
  147. <p>💚 Il est silence.<br />
  148. Mais qui écoute les mots dont il est plein&#8239;?<br />
  149. Et s’arrête un instant pour le sentir vibrer&#8239;?<br />
  150. L’écho du vide n’est pourtant pas néant.<br />
  151. Il s’entrelace jusqu’à se chuchoter toute une mythologie.<br />
  152. Comme du vent surgit la mélodie, du non-dit émerge la poésie.<br />
  153. Du potentiel jaillit un battement de&nbsp;cœur.</p>
  154. <p><cite><em><a href="https://blog.maiadereva.net/abandon/">Abandon - Maïa Dereva</a></em>&nbsp;(<a href="/david/cache/2022/91ee87b7d6f86f136cf9e6c6ec2b2117/">cache</a>)</cite></p>
  155. </blockquote>
  156. <nav>
  157. <p class="center">
  158. <a rel="prev" href="/david/2022/09/03/" title="Publication précédente : Bifurquer">← Précédent</a> •
  159. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  160. • <a rel="next" href="/david/2022/11/12/" title="Publication suivante : Mastodon">Suivant →</a>
  161. </p>
  162. </nav>
  163. </article>
  164. <hr>
  165. <footer>
  166. <p>
  167. <nobr>
  168. <a href="/david/" title="Aller à l’accueil"
  169. ><svg class="icon icon-home">
  170. <use
  171. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  172. ></use>
  173. </svg>
  174. Accueil</a
  175. >
  176. </nobr>
  177. <nobr>
  178. <a href="/david/log/" title="Accès au flux RSS"
  179. ><svg class="icon icon-rss2">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  181. </svg>
  182. Suivre</a
  183. >
  184. </nobr>
  185. <nobr>
  186. <a href="http://larlet.com" title="Go to my English profile" data-instant
  187. ><svg class="icon icon-user-tie">
  188. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  189. </svg>
  190. Pro</a
  191. >
  192. </nobr>
  193. <nobr>
  194. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  195. ><svg class="icon icon-mail">
  196. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  197. </svg>
  198. Email</a
  199. >
  200. </nobr>
  201. <nobr>
  202. <abbr
  203. class="nowrap"
  204. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  205. ><svg class="icon icon-hammer2">
  206. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  207. </svg>
  208. Légal</abbr
  209. >
  210. </nobr>
  211. </p>
  212. <template id="theme-selector">
  213. <form>
  214. <fieldset>
  215. <legend><svg class="icon icon-brightness-contrast">
  216. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  217. </svg> Thème</legend>
  218. <label>
  219. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  220. </label>
  221. <label>
  222. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  223. </label>
  224. <label>
  225. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  226. </label>
  227. </fieldset>
  228. </form>
  229. </template>
  230. </footer>
  231. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  232. <script>
  233. function loadThemeForm(templateName) {
  234. const themeSelectorTemplate = document.querySelector(templateName)
  235. const form = themeSelectorTemplate.content.firstElementChild
  236. themeSelectorTemplate.replaceWith(form)
  237. form.addEventListener('change', (e) => {
  238. const chosenColorScheme = e.target.value
  239. localStorage.setItem('theme', chosenColorScheme)
  240. toggleTheme(chosenColorScheme)
  241. })
  242. const selectedTheme = localStorage.getItem('theme')
  243. if (selectedTheme && selectedTheme !== 'undefined') {
  244. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  245. }
  246. }
  247. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  248. window.addEventListener('load', () => {
  249. let hasDarkRules = false
  250. for (const styleSheet of Array.from(document.styleSheets)) {
  251. let mediaRules = []
  252. for (const cssRule of styleSheet.cssRules) {
  253. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  254. continue
  255. }
  256. // WARNING: Safari does not have/supports `conditionText`.
  257. if (cssRule.conditionText) {
  258. if (cssRule.conditionText !== prefersColorSchemeDark) {
  259. continue
  260. }
  261. } else {
  262. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  263. continue
  264. }
  265. }
  266. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  267. }
  268. // WARNING: do not try to insert a Rule to a styleSheet you are
  269. // currently iterating on, otherwise the browser will be stuck
  270. // in a infinite loop…
  271. for (const mediaRule of mediaRules) {
  272. styleSheet.insertRule(mediaRule.cssText)
  273. hasDarkRules = true
  274. }
  275. }
  276. if (hasDarkRules) {
  277. loadThemeForm('#theme-selector')
  278. }
  279. })
  280. </script>
  281. </body>
  282. </html>