Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  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>Blogroll — David Larlet</title>
  13. <meta name="description" content="Les sites des ami·es.">
  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>Blogroll : les sites des ami·es</h1>
  56. </header>
  57. <p>
  58. Pour ne pas être totalement auto-centré, voici quelques portes ouvertes vers le Web que j’aime.
  59. </p>
  60. <nav>
  61. <ul>
  62. <li>
  63. <a href="https://www.maiwann.net/">Maïtané Lenoir</a>
  64. (<a href="https://www.maiwann.net/feed.xml">flux</a>)
  65. </li>
  66. <li>
  67. <a href="https://ynote.hk/">Fanny Cheung</a>
  68. (<a href="https://ynote.hk/feed.xml">flux</a>)
  69. </li>
  70. <li>
  71. <a href="https://lalunemauve.fr/">La Lune Mauve</a>
  72. (<a href="https://lalunemauve.fr/feed/">flux</a>)
  73. </li>
  74. <li>
  75. <a href="https://www.hypothermia.fr/">Eliness</a>
  76. (<a href="https://www.hypothermia.fr/rss">flux</a>)
  77. </li>
  78. <li>
  79. <a href="https://www.hypothermia.fr/">Luce Carević</a>
  80. (<a href="https://luce.carevic.eu/fr/flux">flux</a>)
  81. </li>
  82. <li>
  83. <a href="https://emmaclit.com/">Emma</a>
  84. (<a href="https://emmaclit.com/feed/">flux</a>)
  85. </li>
  86. <li>
  87. <a href="https://www.la-grange.net/">Karl Dubost</a>
  88. (<a href="https://www.la-grange.net/feed.atom">flux</a>)
  89. </li>
  90. <li>
  91. <a href="https://thom4.net/">Thomas Parisot</a>
  92. (<a href="https://thom4.net/feed/">flux</a>)
  93. </li>
  94. <li>
  95. <a href="https://www.arthurperret.fr/">Arthur Perret</a>
  96. (<a href="https://www.arthurperret.fr/feed.xml">flux</a>)
  97. </li>
  98. <li>
  99. <a href="https://www.quaternum.net/">Antoine Fauchié</a>
  100. (<a href="https://www.quaternum.net/atom.xml">flux</a>)
  101. </li>
  102. <li>
  103. <a href="https://n.survol.fr/">Éric D.</a>
  104. (<a href="https://n.survol.fr/feed">flux</a>)
  105. </li>
  106. <li>
  107. <a href="https://winnielim.org/">Winnie Lim (en)</a>
  108. (<a href="https://winnielim.org/feed/">flux</a>)
  109. </li>
  110. </ul>
  111. </nav>
  112. <p>
  113. N’hésitez pas à me contacter si vous ne souhaitez pas figurer dans cette liste.
  114. </p>
  115. <h2>Leurs dernières publications</h2>
  116. <dl>
  117. <dt>
  118. <a href="https://n.survol.fr/n/la-blogchain">La blog­chain</a>
  119. (<a href="https://n.survol.fr/">Éric D.</a>)
  120. </dt>
  121. <dd>
  122. Avec les réseaux sociaux, les petits espaces person­nels inter­con­nec­tés qu’é­taient les blogs ont peu à peu disparu du paysage. Il en reste, mais les liens ne sont plus aussi forts. À la grande époque il était fréquent d’avoir des blogroll. sur un coin de chaque page. J’ai­me­rais relan­cer ça d’une façon ou d’une autre. Je […]
  123. </dd>
  124. </dl>
  125. <dl>
  126. <dt>
  127. <a href="https://emmaclit.com/2023/09/08/medias-et-tdah-la-fatigue/">Médias et TDAH, LA FATIGUE</a>
  128. (<a href="https://emmaclit.com/">Emma</a>)
  129. </dt>
  130. <dd>
  131. Pour un contenu plus complet : https://emmaclit.com/2020/11/26/lucine-et-enzo/
  132. </dd>
  133. </dl>
  134. <dl>
  135. <dt>
  136. <a href="https://www.arthurperret.fr/veille/2023-09-07-des-publications-praticables.html">[Veille] Des publications praticables</a>
  137. (<a href="https://www.arthurperret.fr/">Arthur Perret</a>)
  138. </dt>
  139. <dd>
  140. https://praticable.fr/publications/le-probleme-des-etudes Praticable (anciennement le collectif Bam) fait un plaidoyer convaincant pour la publication multi-formats de la littérature scientifique et technique. L’accès à l’information se faisant désormais via une multitude d’écrans dont ceux des téléphones, il serait utile de repenser nos chaînes éditoriales. L’article commence par une vive…
  141. </dd>
  142. </dl>
  143. <dl>
  144. <dt>
  145. <a href="http://www.maiwann.net//blogperso/tahiti_j6/">Tahiti - jour 6</a>
  146. (<a href="https://www.maiwann.net/">Maïtané Lenoir</a>)
  147. </dt>
  148. <dd>
  149. Je crois que je vais mieux :) L’injonction est toujours là mais moins audible, je trouve le sens dans les petites choses :
  150. </dd>
  151. </dl>
  152. <dl>
  153. <dt>
  154. <a href="http://www.maiwann.net//blogperso/tahiti_j5/">Tahiti - jour 5</a>
  155. (<a href="https://www.maiwann.net/">Maïtané Lenoir</a>)
  156. </dt>
  157. <dd>
  158. Ce matin, grande fatigue avec un début de migraine. Je suis clairement en SPM, donc la triplette anxiété-migraine-fatigue est là pour faire la teuf.
  159. </dd>
  160. </dl>
  161. <dl>
  162. <dt>
  163. <a href="https://winnielim.org/journal/biometrics-pre-during-post-covid/">biometrics pre, during & post-covid</a>
  164. (<a href="https://winnielim.org/">Winnie Lim (en)</a>)
  165. </dt>
  166. <dd>
  167. A couple of weeks ago I received a notification from my apple watch that there were some new health trends from the health app: Obviously this is because I had covid: being...
  168. </dd>
  169. </dl>
  170. <dl>
  171. <dt>
  172. <a href="https://www.arthurperret.fr/veille/2023-08-31-pollen.html">[Veille] Pollen</a>
  173. (<a href="https://www.arthurperret.fr/">Arthur Perret</a>)
  174. </dt>
  175. <dd>
  176. https://docs.racket-lang.org/pollen/ Pollen est un système de publication créé par Matthew Butterick. En fait, j’appellerais volontiers ça un système de programmation éditoriale. Je m’explique : Pollen est un système de publication dans lequel la dimension programmatique n’est pas annexe mais centrale, parce qu’il repose sur un langage de programmation orienté balisage. Pour utiliser un point de…
  177. </dd>
  178. </dl>
  179. <dl>
  180. <dt>
  181. <a href="https://luce.carevic.eu/fr/notes/twitter-avec-nitter">Twitter avec Nitter</a>
  182. (<a href="https://www.hypothermia.fr/">Luce Carević</a>)
  183. </dt>
  184. <dd>
  185. J’ai supprimé mon compte Twitter (X) il y a un mois, poussée par les frasques incessantes d’Elon Musk et encouragée par l’annonce de Julie sur son blog. Une décision plutôt facile à prendre puisqu’il était déjà largement inactif même si j’ai regretté la facilité de suivre des comptes militants notamment sur les questions de validisme, psychophobie, maladies chroniques et de racisme. Depuis…
  186. </dd>
  187. </dl>
  188. <dl>
  189. <dt>
  190. <a href="https://www.hypothermia.fr/2023/08/lambeaux-culturels-organiques/">Parenthèse – Lambeaux culturels organiques</a>
  191. (<a href="https://www.hypothermia.fr/">Eliness</a>)
  192. </dt>
  193. <dd>
  194. Dernières découvertes culturelles plutôt suintantes.
  195. </dd>
  196. </dl>
  197. <dl>
  198. <dt>
  199. <a href="https://n.survol.fr/n/est-ce-important-de-porter-un-casque-a-velo">Est-ce impor­tant de porter un casque à vélo ?</a>
  200. (<a href="https://n.survol.fr/">Éric D.</a>)
  201. </dt>
  202. <dd>
  203. Porter un casque à vélo est utile ⁽¹⁾. Si tout le monde était casqué, on sauve­rait certai­ne­ment des vies. Savoir si c’est perti­nent ou impor­tant est une ques­tion un peu plus complexe ⁽²⁾, qui dépend du risque, de son accep­ta­tion, et de l’im­por­tance qu’on donne à la contrainte du port du casque. Bref, on est dans […]
  204. </dd>
  205. </dl>
  206. <dl>
  207. <dt>
  208. <a href="https://thom4.net/2023/08/27/le-cantonnier/">☕️ Journal : Le cantonnier</a>
  209. (<a href="https://thom4.net/">Thomas Parisot</a>)
  210. </dt>
  211. <dd>
  212. La porte de la voiture s’ouvre, il me demande ma destination. Ça tombe bien, il passe par là. En fait, il habite juste au-dess
  213. </dd>
  214. </dl>
  215. <dl>
  216. <dt>
  217. <a href="https://thom4.net/2023/08/27/notre-premiere-seance/">☕️ Journal : Notre première séance</a>
  218. (<a href="https://thom4.net/">Thomas Parisot</a>)
  219. </dt>
  220. <dd>
  221. ça fait des mois que j’y songe, des semaines que j’attends, des jours d’une impatience grandissante. à 9h pourtant, personne.
  222. </dd>
  223. </dl>
  224. <dl>
  225. <dt>
  226. <a href="https://winnielim.org/journal/documenting-everyday-moments-because-they-will-become-precious/">documenting everyday moments because they will become precious</a>
  227. (<a href="https://winnielim.org/">Winnie Lim (en)</a>)
  228. </dt>
  229. <dd>
  230. A few months ago someone popped up on the Singapore reddit and started posting photos of old Singapore from the 1950s-1970s. He is the grandson of Ivan Polunin, a medical doctor who...
  231. </dd>
  232. </dl>
  233. <dl>
  234. <dt>
  235. <a href="https://ynote.hk/mots/processus-de-creation/raccrocher-les-wagons.html">Raccrocher les wagons</a>
  236. (<a href="https://ynote.hk/">Fanny Cheung</a>)
  237. </dt>
  238. <dd>
  239. Après une grosse période de fatigue, j’ai repris du poil de la bête. J’ai accepté trop de projets par rapport au temps que j’avais… Et je me suis noyée.
  240. </dd>
  241. </dl>
  242. <dl>
  243. <dt>
  244. <a href="https://www.hypothermia.fr/2023/08/questions-de-perception/">Questions de perception</a>
  245. (<a href="https://www.hypothermia.fr/">Eliness</a>)
  246. </dt>
  247. <dd>
  248. Réflexions sur la multiplicité de points de vue en plusieurs actes.
  249. </dd>
  250. </dl>
  251. <dl>
  252. <dt>
  253. <a href="https://ynote.hk/mots/processus-de-creation/valse-violette.html">Valse violette</a>
  254. (<a href="https://ynote.hk/">Fanny Cheung</a>)
  255. </dt>
  256. <dd>
  257. Pendant mon court séjour à Dol-de-Bretagne, j’ai aperçu beaucoup de fleurs dans la palette des violets. À mon habitude, ces observations m’ont donné l’envie de peindre.
  258. </dd>
  259. </dl>
  260. <dl>
  261. <dt>
  262. <a href="https://luce.carevic.eu/fr/notes/actions-rapides-macos-automator">Actions rapides (macOS) avec Automator</a>
  263. (<a href="https://www.hypothermia.fr/">Luce Carević</a>)
  264. </dt>
  265. <dd>
  266. Lancer une conversion Pandoc directement depuis le menu contextuel avec une action rapide macOS, c’est possible. J’ai décrit la méthode pour créer une action rapide avec Raccourcis à privilégier si votre version de macOS dispose de l’application. Ci-dessous la méthode pour faire la même chose avec Automator. Étape 1 : configurer une action rapide avec Automator Ouvrir l'application Automator et…
  267. </dd>
  268. </dl>
  269. <dl>
  270. <dt>
  271. <a href="https://www.quaternum.net/2023/07/21/une-histoire-de-dependances/">[flux] Une histoire de dépendances</a>
  272. (<a href="https://www.quaternum.net/">Antoine Fauchié</a>)
  273. </dt>
  274. <dd>
  275. So I decided to never ask non-wizard users to install any dependencies again. VitoVan, Jack’s Ass, https://sdf.org/~vito/jack.html Si l’histoire fait sourire, elle révèle un problème assez profond dans la volonté de donner des réponses non souhaitées. Tenter de résoudre des problèmes simples avec des processus complexes n’est pas en soit la question, il s’agit plutôt de rendre tout cela…
  276. </dd>
  277. </dl>
  278. <dl>
  279. <dt>
  280. <a href="https://www.quaternum.net/2023/07/19/typst-une-alternative-a-latex/">[flux] Typst, une alternative à LaTeX ?</a>
  281. (<a href="https://www.quaternum.net/">Antoine Fauchié</a>)
  282. </dt>
  283. <dd>
  284. Typst is a new markup-based typesetting system for the sciences. It is designed to be an alternative both to advanced tools like LaTeX and simpler tools like Word and Google Docs. Our goal with Typst is to build a typesetting tool that is highly capable and a pleasure to use. Typst, https://typst.app Si l’émergence d’un nouveau langage de balisage aussi puissant que LaTeX semble une bonne idée,…
  285. </dd>
  286. </dl>
  287. <dl>
  288. <dt>
  289. <a href="https://lalunemauve.fr/perlimpinpin/">Où je crache ma pastille Valda à propos d’Instagram</a>
  290. (<a href="https://lalunemauve.fr/">La Lune Mauve</a>)
  291. </dt>
  292. <dd>
  293. Ce billet est une exclusivité pour l’Antichambre. — Il y a quelques mois, dans une story Instagram, je vous ai demandé ce vous préfériez lire en priorité sur mon blog entre, d’une part, un coup de sang à propos d’Instagram et, d’autre part, mes bonnes adresses à Strasbourg. Vous avez été une large majorité à voter pour le premier choix : je m’exécute donc, même si ça va rafraîchir l’ambiance.…
  294. </dd>
  295. </dl>
  296. <dl>
  297. <dt>
  298. <a href="https://www.la-grange.net/2023/06/18/lutter">lutter</a>
  299. (<a href="https://www.la-grange.net/">Karl Dubost</a>)
  300. </dt>
  301. <dd>
  302. Komagome, Japon, 18 juin 2023 The victims were blamed rather than the exploiters; exploitation was observed as a form of education. — The Myth Of The Lazy Native, Syed Hussein Alatas, urn:isbn:978-967-0311-97-5 Ce livre est… pour l'instant à la fois révoltant et éducatif. Révoltant par les passages que l'auteur a trouvé dans la littérature des colonialistes pour justifier le cynisme de leur…
  303. </dd>
  304. </dl>
  305. <dl>
  306. <dt>
  307. <a href="https://www.la-grange.net/2023/06/17/rien">des tous petits rien</a>
  308. (<a href="https://www.la-grange.net/">Karl Dubost</a>)
  309. </dt>
  310. <dd>
  311. Sugamo, Japon, 17 juin 2023 One clear instance is sufficient. — The Myth Of The Lazy Native, Syed Hussein Alatas, urn:isbn:978-967-0311-97-5 La feuille de chou, le Paris-Normandie n'est plus accessible du Japon. J'hésite à leur envoyer un email. Il y a eu un séisme dans l'ouest de la France perceptible en Normandie. De Sugamo à Ginza à vélo, il fait déjà chaud ce matin. Deux objectifs : Se…
  312. </dd>
  313. </dl>
  314. <dl>
  315. <dt>
  316. <a href="https://lalunemauve.fr/ici-dans-ma-tete/">Life dump II-IV 2023 : par monts et par vaux</a>
  317. (<a href="https://lalunemauve.fr/">La Lune Mauve</a>)
  318. </dt>
  319. <dd>
  320. Ce billet est une exclusivité pour l’Antichambre. — Compte-rendu touffu de trois mois bien remplis : une danse macabre, deux nouveaux tatouages, mon douzième ou treizième concert de Tori Amos, mon quarantième anniversaire ; mais aussi la découverte du Pays de Galles du sud, un week-end à Lyon, Je serai le feu sur scène, la reprise des vide-greniers, une pluie de cadeaux et notre jardin, qui…
  321. </dd>
  322. </dl>
  323. <dl>
  324. <dt>
  325. <a href="https://emmaclit.com/2022/10/06/la-ligne/">La ligne</a>
  326. (<a href="https://emmaclit.com/">Emma</a>)
  327. </dt>
  328. <dd>
  329. Salut à toutes et tous ! Voilà une bédé assez courte, pour répondre à une demande qui revient souvent dans mes messages. J’espère qu’elle conviendra aux principaux intéressés 🙂 As usual un grand merci à Alex, ma relectrice de talent, et à mon poilu pour leur soutien et leurs conseils Bonne lecture !
  330. </dd>
  331. </dl>
  332. </article>
  333. <hr>
  334. <footer>
  335. <p>
  336. <nobr>
  337. <a href="/david/" title="Aller à l’accueil"
  338. ><svg class="icon icon-home">
  339. <use
  340. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  341. ></use>
  342. </svg>
  343. Accueil</a
  344. >
  345. </nobr>
  346. <nobr>
  347. <a href="/david/log/" title="Accès au flux RSS"
  348. ><svg class="icon icon-rss2">
  349. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  350. </svg>
  351. Suivre</a
  352. >
  353. </nobr>
  354. <nobr>
  355. <a href="http://larlet.com" title="Go to my English profile" data-instant
  356. ><svg class="icon icon-user-tie">
  357. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  358. </svg>
  359. Pro</a
  360. >
  361. </nobr>
  362. <nobr>
  363. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  364. ><svg class="icon icon-mail">
  365. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  366. </svg>
  367. Email</a
  368. >
  369. </nobr>
  370. <nobr>
  371. <abbr
  372. class="nowrap"
  373. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  374. ><svg class="icon icon-hammer2">
  375. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  376. </svg>
  377. Légal</abbr
  378. >
  379. </nobr>
  380. </p>
  381. <template id="theme-selector">
  382. <form>
  383. <fieldset>
  384. <legend><svg class="icon icon-brightness-contrast">
  385. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  386. </svg> Thème</legend>
  387. <label>
  388. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  389. </label>
  390. <label>
  391. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  392. </label>
  393. <label>
  394. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  395. </label>
  396. </fieldset>
  397. </form>
  398. </template>
  399. </footer>
  400. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  401. <script>
  402. function loadThemeForm(templateName) {
  403. const themeSelectorTemplate = document.querySelector(templateName)
  404. const form = themeSelectorTemplate.content.firstElementChild
  405. themeSelectorTemplate.replaceWith(form)
  406. form.addEventListener('change', (e) => {
  407. const chosenColorScheme = e.target.value
  408. localStorage.setItem('theme', chosenColorScheme)
  409. toggleTheme(chosenColorScheme)
  410. })
  411. const selectedTheme = localStorage.getItem('theme')
  412. if (selectedTheme && selectedTheme !== 'undefined') {
  413. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  414. }
  415. }
  416. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  417. window.addEventListener('load', () => {
  418. let hasDarkRules = false
  419. for (const styleSheet of Array.from(document.styleSheets)) {
  420. let mediaRules = []
  421. for (const cssRule of styleSheet.cssRules) {
  422. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  423. continue
  424. }
  425. // WARNING: Safari does not have/supports `conditionText`.
  426. if (cssRule.conditionText) {
  427. if (cssRule.conditionText !== prefersColorSchemeDark) {
  428. continue
  429. }
  430. } else {
  431. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  432. continue
  433. }
  434. }
  435. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  436. }
  437. // WARNING: do not try to insert a Rule to a styleSheet you are
  438. // currently iterating on, otherwise the browser will be stuck
  439. // in a infinite loop…
  440. for (const mediaRule of mediaRules) {
  441. styleSheet.insertRule(mediaRule.cssText)
  442. hasDarkRules = true
  443. }
  444. }
  445. if (hasDarkRules) {
  446. loadThemeForm('#theme-selector')
  447. }
  448. })
  449. </script>
  450. </body>
  451. </html>