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 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  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>Tag #nostalgie — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #nostalgie">
  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. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #nostalgie</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a>
  66. • <a rel="tags" href="/david/#tags-2023" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2023/05/06/" title="Lien permanent vers cet article">SudWeb</a> (2023-05-06)</h2>
  75. <p>12&nbsp;mars&nbsp;2013&nbsp;:</p>
  76. <blockquote>
  77. <p>Je vais pas mal intervenir ces prochains mois, peut-être l’occasion de se rencontrer et&nbsp;d’échanger</p>
  78. <p><cite><em><a href="/david/blog/2013/conferences-diversite/">Conférences et&nbsp;diversité</a></em></cite></p>
  79. </blockquote>
  80. <p>13&nbsp;mars&nbsp;2013&nbsp;:</p>
  81. <blockquote>
  82. <p><em>Je pense maintenant qu’il est plus important d’avoir une ligne éditoriale cohérente et surprenante.</em> C’est un exercice très difficile de savoir répondre aux attentes d’un public tout en le bousculant (un peu). Qu’il ne reparte <strong>peut-être pas pleinement satisfait mais avec des questions restées sans réponses.</strong> Des pistes à creuser. Des mondes à explorer. […]</p>
  83. <p><strong>La question revient finalement à positionner pour les organisateurs le curseur de la curiosité.</strong> Doit-elle venir des participants ou être imposée par les organisateurs et les orateurs&#8239;? Vaste&nbsp;débat.</p>
  84. </blockquote>
  85. <p><cite><em><a href="/david/blog/2013/conferences-editorialisation/">Conférences et&nbsp;éditorialisation</a></em></cite></p>
  86. <p>19&nbsp;mai&nbsp;2013&nbsp;:</p>
  87. <blockquote>
  88. <p>Une question ouverte en guise de conclusion sans avoir vraiment de proposition technique concrète pour continuer le débat. Après réflexion (et de nombreuses discussions), je ne pense pas qu’il soit pertinent de continuer en ligne par contre je serais ravi que les discussions continuent ici ou ailleurs en espérant avoir semé quelques graines qui pourront germer de proche en&nbsp;proche.</p>
  89. <p><cite><em><a href="/david/blog/2013/quete-sens/">Une quête de&nbsp;sens</a></em></cite></p>
  90. </blockquote>
  91. <p>30&nbsp;mai&nbsp;2015&nbsp;:</p>
  92. <blockquote>
  93. <p><em>J’ai peur</em> de mes propres contradictions au sujet de la&nbsp;consanguinité.</p>
  94. <p><em>Je suis content</em> d’avoir pu voir autant d’orateurs qui n’ont pas l’habitude de s’exprimer en public. Ça change des rockstars qui en sont à la quinzième représentation de leur tournée de&nbsp;conférences.</p>
  95. <p><cite><em><a href="/david/stream/2015/05/30/">Je suis&nbsp;SudWeb</a></em></cite></p>
  96. </blockquote>
  97. <p>5&nbsp;février&nbsp;2016&nbsp;:</p>
  98. <blockquote>
  99. <p>Il y a beaucoup de choses à explorer pour changer la relation organisateur/conférencier/spectateur et la proposition est toujours la même&nbsp;: tous participants pour fluidifier les échanges et encourager l’intelligence collective. Passer du être ensemble au faire&nbsp;ensemble.</p>
  100. <p>On n’achète plus un billet mais on devient membre d’une association qui porte le projet auquel on peut participer financièrement et/ou par un travail avec une gouvernance démocratique. <em>La conférence n’est plus un évènement ponctuel mais un bien commun qui vit tout au long de l’année, que l’on s’approprie et que l’on fait évoluer&nbsp;ensemble.</em></p>
  101. <p><cite><em><a href="/david/blog/2016/coorganisation-conferences/">Co-organisation de&nbsp;conférences</a></em></cite></p>
  102. </blockquote>
  103. <p>28&nbsp;mai&nbsp;2016&nbsp;:</p>
  104. <blockquote>
  105. <p>Les éditions de cette conférence se suivent mais ne se ressemblent pas si ce n’est dans leur recherche de singularité. Chaque intervention donne envie d’aller interagir avec l’orateur pour échanger plus que d’ouvrir son <em>laptop</em>. Derrière ces sujets non-techniques se cachent des réflexions plus profondes qui n’interrogent plus le <em>comment</em> mais le <em>pourquoi</em> et de plus en plus le <em>pourquoi pas</em>&#8239;?</p>
  106. <p><cite><em><a href="/david/blog/2016/sudweb-2016/">SudWeb&nbsp;2016</a></em></cite></p>
  107. </blockquote>
  108. <p>29&nbsp;août&nbsp;2017&nbsp;:</p>
  109. <blockquote>
  110. <p>Avoir plusieurs années d’expérience donne d’autant plus de légitimité pour expérimenter et d’assurance pour se relever en cas d’échec (encore faudrait-il définir cette éventualité). Un événement récurrent donne la chance de pouvoir considérer chaque itération comme une page blanche, les «&nbsp;acquis&nbsp;» ne se font pas sur les formats mais sur le réseau (ou micro-culture) qui se recrée à chaque fois. Renforcer des liens pour le sentiment d’appartenance d’un côté, en relâcher d’autres pour être inclusif par ailleurs. <strong>Une communauté vieillissante aspirera toujours à plus de sécurité et de confort.</strong> Et est-ce une raison valable pour les lui&nbsp;accorder&#8239;?&nbsp;:-)</p>
  111. <p><cite><em><a href="/david/blog/2017/besoin-experience/">Besoin et&nbsp;expérience</a></em></cite></p>
  112. </blockquote>
  113. <p>12&nbsp;janvier&nbsp;2018&nbsp;:</p>
  114. <blockquote>
  115. <p>Est-ce qu’il y a des évènements où un incident a été à l’origine d’un dépôt de plainte de la part de l’organisation&#8239;? Et si oui quelles en ont été les suites&#8239;? Une jurisprudence serait la&nbsp;bienvenue.</p>
  116. <p><em>PS&nbsp;: ne croyez pas que je tape toujours sur SudWeb, ce n’est qu’un exemple (plutôt bon en l’occurence) et c’est surtout le seul événement pour lequel j’ai encore un intérêt car ils sont plein de vitalité et ça fait&nbsp;plaisir&nbsp;:-).</em></p>
  117. <p><cite><em><a href="/david/stream/2018/01/12/">Code&nbsp;d’(in)conduite</a></em></cite></p>
  118. </blockquote>
  119. <p>26&nbsp;janvier&nbsp;2021&nbsp;:</p>
  120. <blockquote>
  121. <p>Il y a peu, j’écrivais que je donnais des conférences &quot;avant de prendre conscience qu’il était important de laisser la place à d’autres moins privilégié·e·s/plus diversifié·e·s&quot;. Et indirectement, cela m’a permis de prendre du recul et eu aussi pour conséquence de ne plus me motiver du tout à aller dans les conférences «&nbsp;classiques&nbsp;». […]</p>
  122. <p>Je suis tiraillé entre co-créer de nouvelles choses ou faire acte de présence et de promotion des endroits qui comptent pour d’autres et leurs offrent un espace de visibilité non&nbsp;négligeable</p>
  123. <p><cite><em><a href="/david/2021/01/26/">Conférences</a></em></cite></p>
  124. </blockquote>
  125. <p>5&nbsp;octobre&nbsp;2021&nbsp;:</p>
  126. <blockquote>
  127. <p>Quel que soit le format, j’ai fini par remarquer (il m’a fallu une dizaine d’années tout de même…) que ces évènements favorisent l’entre-soi et donnent une ascendance aux organisateur·ices et participant·es actif·ves. Ce statut est malsain car il permet des comportements déplacés de la part des personnes ayant davantage de pouvoir, d’autant plus lorsqu’une foule est&nbsp;réunie.</p>
  128. <p><cite><em><a href="/david/2021/10/05/">Conférences&nbsp;2</a></em></cite></p>
  129. </blockquote>
  130. <p>J’avais besoin de cet historique incomplet pour me pointer mes propres incohérences et suivre l’évolution de ma pensée au cours des années. De l’avantage d’avoir une mémoire&nbsp;externalisée.</p>
  131. <p>SudWeb a une place toute particulière dans mon cœur, j’ai <a href="/david/stream/2010/#tw-27452935068">participé à sa création</a>, j’y suis intervenu dans ce que je considère être <a href="/david/blog/2013/quete-sens/">l’apogée de ce que je pouvais faire dans un groupe</a>, je m’y suis fait des ami·es (coucou Amanda 🇨🇦), j’y ai vu des personnes grandir, mûrir, se remettre en question et j’allais boucler la boucle en motivant une personne à&nbsp;participer.</p>
  132. <p>Lorsque j’ai appris que le sujet de <a href="https://ynote.hk/">Fanny</a> avait été retenu, j’étais vraiment très content qu’un espace de parole et d’interactions lui soit proposé. Lorsque le programme complet (qui n’est plus en ligne) est sorti, je me suis posé beaucoup de questions. Je ressentais un <a href="https://eldritch.cafe/@davidbruant/110311929122033704">certain malaise</a>&nbsp;(<a href="/david/cache/2023/e211e38b6e8dd18119e0ff18464d2414/">cache</a>) à ce que des personnes sur-représentées dans ces évènements le soient encore une fois. Je me suis vraiment demandé ce qui avait pu motiver ces choix et je crois que j’aurais aimé une communication plus claire à ce sujet pour essayer de comprendre plutôt que d’être dans&nbsp;l’interprétation.</p>
  133. <p>L’évènement a depuis été annulé car pas assez de personnes étaient motivées par cette rencontre. Difficile d’en tirer des conclusions à chaud. Difficile de savoir au bout de combien de personnes est-ce que ça devenait rentable (financièrement&#8239;?). Facile de faire des liens de cause à effet erronés en écoutant uniquement ma micro-bulle. Facile d’imaginer que ça n’est pas été facile pour les personnes bénévoles qui se sont motivées pour l’organisation cette&nbsp;année.</p>
  134. <p>On peut lire actuellement sur la <a href="https://sudweb.fr/2023/">page 2023&nbsp;de l’évènement</a>&nbsp;(<a href="/david/cache/2023/32448878bfcad6dd5d1bcb2b626f1a9d/">cache</a>)&nbsp;:</p>
  135. <blockquote>
  136. <p>Ne vous arrêtez pas, ne vous arrêtez&nbsp;jamais.</p>
  137. </blockquote>
  138. <p>Ça me questionne beaucoup aussi&nbsp;: c’est correct de s’asseoir faire une pause pour ne pas se brûler, d’accepter la déception de ce qui vient de se produire, de prendre le temps d’aller demander pourquoi est-ce que ça ne s’est pas passé, de libérer ses émotions&nbsp;maladroitement.</p>
  139. <p>C’est ce que je suis en train d’essayer de faire à mon&nbsp;échelle.</p>
  140. <h2><a href="/david/2023/02/07/" title="Lien permanent vers cet article">Madeleine</a> (2023-02-07)</h2>
  141. <p>Ma madeleine du jour m’a été offerte par <a href="https://latitude77.org">Aurélien</a> qui pointait vers <a href="https://lightdock.org/">LightDock</a>, ce qui m’a rappelé mon stage de master et mes <a href="/david/biologeek/archives/20051017-parser-un-fichier-pdb-en-python-facilement-et-efficacement/">premiers pas en Python</a>. Où l’on remarque qu’il y a 18&nbsp;ans, les <em>list-comprehensions</em> et les <code>__methodes_magiques__</code> devaient être&nbsp;récentes…</p>
  142. <p>Mais au fait, que s’est-il passé ces 20&nbsp;dernières années en bio-informatique&#8239;? Est-ce encore une matière (hybride) à part entière ou le <em>in silico</em> a-t-il fini par bouffer la&nbsp;madeleine&#8239;?</p>
  143. <hr />
  144. <p>🚲 Où j’apprends que la piste cyclable en bas de chez moi est considéré comme «&nbsp;bonne&nbsp;» <a href="https://numerique.banq.qc.ca/patrimoine/details/52327/3393377">depuis pas mal de temps</a>.</p>
  145. <hr />
  146. <blockquote>
  147. <p>🌱 J’ai fait des études d’agriculture biologique et ce milieu m’a dégoûté. On est dans la production. Et dans la production, soit tu t’auto-exploites, soit tu exploites de la main-d’oeuvre. <mark>Dans le bio, l’essentiel de la main-d’oeuvre, ce sont des sans-papiers.</mark> Cette réalité embarrasse énormément ceux qui croient que le bio est le summum de l’alternative. À une époque, avec des copains, on avait organisé des dépôts de paniers de légumes à Bruxelles. On est allé travailler dans le lieu de production situé à une vingtaine de kilomètres de Bruxelles. On s’est retrouvé avec des sans-papiers. Les dessous de la production échappent aux radars. Pourtant, en y réfléchissant, si les gens étaient payés décemment, c’est le quadruple du prix qu’on devrait payer. Eux, aux Fraternités ouvrières, ils ne font pas de la production. Ils n’essaient pas de te vendre une production éthique ou biologique. Ils te disent&nbsp;: «&nbsp;Vas-y, expérimente&nbsp;». C’est une incitation à expérimenter&nbsp;l’autonomie.</p>
  148. <p><cite><em><a href="https://www.rayonvertcinema.org/benjamin-hennot-interview/">Benjamin Hennot&nbsp;: Interview</a></em>&nbsp;(<a href="/david/cache/2023/ee7eb9c245d1b2c4b91b8dda4cd7d318/">cache</a>)</cite></p>
  149. </blockquote>
  150. <blockquote lang="en">
  151. <p>🎯 No, we need to move our attention back to the folks that have been right all along. The people who never gave up on semantic markup, CSS, and progressive enhancement for most sites. The people who, when slinging JS, have treated it as special occasion food. <mark>The tools and communities whose culture puts the user ahead of the developer</mark> and hold evidence of doing better for users in the highest&nbsp;regard.</p>
  152. <p><cite><em><a href="https://infrequently.org/2023/02/the-market-for-lemons/">The Market for Lemons</a></em>&nbsp;(<a href="/david/cache/2023/5b35e3f3639ceb7d9f684aa81979f304/">cache</a>)</cite></p>
  153. </blockquote>
  154. <blockquote lang="en">
  155. <p>✍️ To feed my blogging, I am constantly reading books, magazine articles, academic papers, and a sprawling network of blogs (I follow about 400&nbsp;via my RSS feed on Feedly). Much as writing catalyzes thinking, <mark>reading catalyzes writing;</mark> the vast majority of ideas I get for blog posts come from reading something and having it trigger a “wait, what about …”&nbsp;moment.</p>
  156. <p><cite><em><a href="https://clivethompson.medium.com/how-blogging-changes-the-way-you-think-526734dc86d1">How Blogging Changes The Way You Think</a></em>&nbsp;(<a href="/david/cache/2023/9caf3cf36d339cfffad8582583493204/">cache</a>)</cite></p>
  157. </blockquote>
  158. <hr />
  159. <blockquote lang="en">
  160. <p>🙈 Wikis, unless you have someone whose job it is to maintain the wiki, is where knowledge goes to&nbsp;die</p>
  161. <p><cite><em><a href="https://cloudisland.nz/@aurynn/109808680824741796">@aurynn@cloudisland.nz sur&nbsp;mastodon</a></em></cite></p>
  162. </blockquote>
  163. <blockquote>
  164. <p>🤯 une voiture, c’est jamais qu’un gros fauteuil roulant, hein.</p>
  165. <p><cite><em><a href="https://mamot.fr/@ffoodd/109796035120760099">@ffoodd@mamot.fr sur&nbsp;mastodon</a></em></cite></p>
  166. </blockquote>
  167. <blockquote lang="en">
  168. <p>👀 I have been in tech so long, I only have one question when I hear of a new invention.<br />
  169. Will it be used for war, porn or&nbsp;surveillance?</p>
  170. <p><cite><em><a href="https://eupolicy.social/@why0hy/109749311459562949">@why0hy@eupolicy.social sur&nbsp;mastodon</a></em></cite></p>
  171. </blockquote>
  172. </main>
  173. <hr>
  174. <footer>
  175. <p>
  176. <nobr>
  177. <a href="/david/" title="Aller à l’accueil"
  178. ><svg class="icon icon-home">
  179. <use
  180. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  181. ></use>
  182. </svg>
  183. Accueil</a
  184. >
  185. </nobr>
  186. <nobr>
  187. <a href="/david/log/" title="Accès au flux RSS"
  188. ><svg class="icon icon-rss2">
  189. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  190. </svg>
  191. Suivre</a
  192. >
  193. </nobr>
  194. <nobr>
  195. <a href="http://larlet.com" title="Go to my English profile" data-instant
  196. ><svg class="icon icon-user-tie">
  197. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  198. </svg>
  199. Pro</a
  200. >
  201. </nobr>
  202. <nobr>
  203. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  204. ><svg class="icon icon-mail">
  205. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  206. </svg>
  207. Email</a
  208. >
  209. </nobr>
  210. <nobr>
  211. <abbr
  212. class="nowrap"
  213. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  214. ><svg class="icon icon-hammer2">
  215. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  216. </svg>
  217. Légal</abbr
  218. >
  219. </nobr>
  220. </p>
  221. <template id="theme-selector">
  222. <form>
  223. <fieldset>
  224. <legend><svg class="icon icon-brightness-contrast">
  225. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  226. </svg> Thème</legend>
  227. <label>
  228. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  229. </label>
  230. <label>
  231. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  232. </label>
  233. <label>
  234. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  235. </label>
  236. </fieldset>
  237. </form>
  238. </template>
  239. </footer>
  240. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  241. <script>
  242. function loadThemeForm(templateName) {
  243. const themeSelectorTemplate = document.querySelector(templateName)
  244. const form = themeSelectorTemplate.content.firstElementChild
  245. themeSelectorTemplate.replaceWith(form)
  246. form.addEventListener('change', (e) => {
  247. const chosenColorScheme = e.target.value
  248. localStorage.setItem('theme', chosenColorScheme)
  249. toggleTheme(chosenColorScheme)
  250. })
  251. const selectedTheme = localStorage.getItem('theme')
  252. if (selectedTheme && selectedTheme !== 'undefined') {
  253. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  254. }
  255. }
  256. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  257. window.addEventListener('load', () => {
  258. let hasDarkRules = false
  259. for (const styleSheet of Array.from(document.styleSheets)) {
  260. let mediaRules = []
  261. for (const cssRule of styleSheet.cssRules) {
  262. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  263. continue
  264. }
  265. // WARNING: Safari does not have/supports `conditionText`.
  266. if (cssRule.conditionText) {
  267. if (cssRule.conditionText !== prefersColorSchemeDark) {
  268. continue
  269. }
  270. } else {
  271. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  272. continue
  273. }
  274. }
  275. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  276. }
  277. // WARNING: do not try to insert a Rule to a styleSheet you are
  278. // currently iterating on, otherwise the browser will be stuck
  279. // in a infinite loop…
  280. for (const mediaRule of mediaRules) {
  281. styleSheet.insertRule(mediaRule.cssText)
  282. hasDarkRules = true
  283. }
  284. }
  285. if (hasDarkRules) {
  286. loadThemeForm('#theme-selector')
  287. }
  288. })
  289. </script>
  290. </body>
  291. </html>