davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Compréhension — David Larlet</title>
<meta name="description" content="Un monde d’incompréhensions.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">

<article>
<header>
  <h1>Compréhension</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/11/27/" title="Publication précédente : Perles">←</a> •
    <a href="/david/" title="Aller à l’accueil">🏠</a>
     • <a rel="next" href="/david/2020/12/13/" title="Publication suivante : Publications">→</a>
  </p>
</nav>
<hr>
<main>
  
<p><em>Un monde d’incompréhensions.</em></p>
<h2 id="contre-societe">Contre-société <a href="#contre-societe" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Les « Directives pour un manifeste personnaliste » (1935), « Le progrès contre l’homme » (1936), « Le sentiment de la nature, force révolutionnaire » (1937) et « An deux mille » (1945) réunis ici proposent un diagnostic sur les transformations fondamentales à l’œuvre dans les sociétés industrielles. […] Les quatre textes de ce recueil articulent très clairement le noyau dur de la pensée écologique : proposer un projet révolutionnaire qui ne passe pas par la prise de pouvoir, mais par l’affirmation d’un « style de vie » et <mark>la constitution d’une contre-société à partir de multiples communautés disséminées qui font sécession</mark> et affirment d’autres valeurs, privilégient d’autres pratiques, cultivent d’autres rapports humains […].</p>
<p><cite><em>Nous sommes des révolutionnaires malgré nous</em>, Bernard Charbonneau et Jacques Ellul</cite></p>
</blockquote>
<p>Lire de relativement vieux ouvrages a cet inconvénient de donner le sentiment d’être dans un monde qui n’évolue que très lentement. Les espérances et utopies d’aujourd’hui étaient déjà celles d’hier et d’avant-hier. Comment continuer à y croire ?</p>
<p>Voir les réponses de <a href="https://oncletom.io/2020/12/01/comment-continuer-a-y-croire/">Thomas</a> (<a href="/david/cache/2020/645536cc4af1f38cec67c44eaa3137bc/">cache</a>) et <a href="https://www.la-grange.net/2020/12/01/bouillon">Karl</a> (<a href="/david/cache/2020/23d7d9b62bb1ffcf0ccb6c8e53e51e9e/">cache</a>) à ce sujet. Et <a href="/david/2020/12/13/#reponses">ma réaction</a>.</p>

<blockquote>
<p>Chaque route que l’on suit exactement jusqu’au bout ne conduit exactement à rien. Escaladez la montagne pour voir si c’est bien une montagne. Quand vous serez au sommet de la montagne, vous ne pourrez plus voir la montagne.</p>
<p><cite><em>Proverbe bene gesserit</em> extrait de <em>Muad’Dib, commentaires de famille</em>, par la Princesse Irulan (<a href="/david/2020/12/21/#dune">Dune</a>)</cite></p>
</blockquote>
<h2 id="consensus">Consensus <a href="#consensus" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Lorsque nous rejoignons un groupe, nous souscrivons à sa réalité consensuelle dans le cadre d’une compréhension commune de ce qui est vrai. <mark>S’identifier à un groupe ce n’est pas seulement déterminer notre place dans le monde, c’est choisir et affirmer le monde lui-même.</mark> <q>C’est rendre le monde réel</q>. En période de grande incertitude, notre besoin de rendre le monde réel et de savoir ce qui est vrai devient bien plus urgent… Pour satisfaire ce besoin, nous avons tendance alors à nous immerger dans des groupes offrant un consensus clair et faisant autorité.</p>
<p><cite><em><a href="http://www.internetactu.net/2020/10/20/naviguer-dans-les-ruines-de-la-realite-consensuelle/">Naviguer dans les ruines de la réalité consensuelle</a></em> (<a href="/david/cache/2020/c85de1871dc64476d9602340a320716c/">cache</a>)</cite></p>
</blockquote>
<p>Superbe article de Hubert Guillaud autour de nos croyances et (r)attachements en période de crise. Pouvoir décortiquer <a href="/david/2020/10/22/#delire-collectif">tout cela</a> est d’une grande valeur pour ma compréhension (mon interprétation ?) des dynamiques en cours.</p>
<h2 id="discredit">Discrédit <a href="#discredit" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>En fait c’est très simple : pourquoi les paroles institutionnelles s’effondrent-elles ? Parce que, dans le temps même où elles présidaient au délabrement de la société, elles auront, chacune dans leur genre, ou trop menti, ou trop couvert, ou trop laissé passer, ou trop regardé ailleurs, ou trop léché, que ça s’est trop vu, et qu’à un moment, ça se <em>paye</em>. <mark>Le complotisme en roue libre, c’est le moment de l’addition.</mark> Il faut vraiment être journaliste, ou expert de Conspiracy Watch pour ne pas voir ça. Trente ans de ruine à petit feu de l’autorité institutionnelle, et puis un beau jour, l’immeuble entier qui s’effondre : le <em>discrédit</em>. Mais normalement on sait ça : le crédit détruit, ne se reconstruit pas rapidement. Maintenant, il y a les ruines, et il va falloir faire au milieu des gravats pour un moment.</p>
<p><cite><em><a href="https://blog.mondediplo.net/paniques-anticomplotistes">Paniques anticomplotistes</a></em> (<a href="/david/cache/2020/81dc6a73252e700c3dc1ac575d2931b2/">cache</a>)</cite></p>
</blockquote>
<p>Un <a href="/david/2020/10/22/#delire-collectif">délire collectif</a> est en train de se construire sur ces ruines et ils semblent avoir de quoi attirer pas mal de monde. C’est de plus en plus flippant cette histoire finalement.</p>
<h2 id="voisins">Voisins <a href="#voisins" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Eh bien ! non. Entre ses voleurs et ses bourreaux, il a des préférences, et il vote pour les plus rapaces et les plus féroces. Il a voté hier, il votera demain, il votera toujours. Les moutons vont à l’abattoir. Ils ne se disent rien, eux, et ils n’espèrent rien. Mais du moins ils ne votent pas pour le boucher qui les tuera, et pour le bourgeois qui les mangera. Plus bête que les bêtes, plus moutonnier que les moutons, <mark>l’électeur nomme son boucher et choisit son bourgeois</mark>. Il a fait des Révolutions pour conquérir ce droit.</p>
<p><cite><em>La grève des électeurs</em>, Octave Mirbeau, 1888</cite></p>
</blockquote>
<p>L’observation des seuls voisins du Canada ne cesse de me sidérer. Je serais quand même rassuré s’ils étaient un peu plus loin…</p>
<h2 id="bourgeoisie">Bourgeoisie <a href="#bourgeoisie" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p><strong>Ces approches (joggeurs comme lecteurs) sont des activités de classe. De classe bourgeoise.</strong> Il y a toujours, toujours, dans nos postures, une dimension de classe. Qui n’est pas la seule perspective d’analyse et de compréhension possible mais qui ne doit pas pour autant être ignorée. Ceux qui courent sont des bourgeois. Ils l’ont toujours majoritairement été et le sont encore. Ceux qui lisent sont des bourgeois. Ils l’ont toujours majoritairement été. Et le sont encore. <mark>Il n’est essentiel de courir et de lire que quand tant d’autres essentiels ont été épuisés et comblés.</mark></p>
<p>La bataille des livres, la bataille du jogging, la bataille des restaurants aussi, sont des batailles bourgeoises. L’essentiel des batailles médiatiques des confinements sont l’écho d’une société bourgeoise qui se regarde courant, se restaurant et lisant.</p>
<p><cite><em><a href="https://www.affordance.info/mon_weblog/2020/11/du-jogging-et-des-livres-les-confinements-de-maslow.html">Du jogging et des livres. Les confinements de Maslow</a></em> (<a href="/david/cache/2020/b3c16df76ff0badb42de78bb141355eb/">cache</a>)</cite></p>
</blockquote>
<p>J’aime me faire reprendre de la sorte dans mes privilèges. Cette pandémie aura eue au moins un avantage : rendre visibles les inégalités. On sait qu’elles existent, mais là difficile de nier avec le nez dessus. On a beau mettre des masques, ils ne cachent pas tout. Surtout pas notre attitude honteuse.</p>
<h2 id="cybernetique">Cybernétique <a href="#cybernetique" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Il faut bien un monde empoisonné pour réaliser ce nouveau rapport social. Pour qu’existe la monade cybernétique, il faut que chaque individu ne soit plus qu’un point de passage ou de retransmission de l’information centralisée. <mark>Ainsi la société devient cet ensemble de points qui ne communiquent pas</mark>, séparés par un environnement inhabitable mais tenus entre eux par l’informatique.</p>
<p><cite><a href="http://www.lisez-veloce.fr/tracts-2020/le-nouveau-monde/">Le nouveau monde</a> (<a href="/david/cache/2020/3acf62b2edebb98587862dc3a5042853/">cache</a>)</cite></p>
</blockquote>
<p>Il est rare que je tombe sur une publication en appréciant autant la forme que le fond. Véloce en fait partie. J’ai particulièrement apprécié les thèses sur l’informatique et la poésie. J’apprécie (et j’envie) l’intemporalité des publications.</p>

<blockquote>
<p>La confiance du peuple en son défenseur est toujours déçue mais toujours renouvelée. Peu importe les échecs manifestes du pouvoir : le problème, c’est que la population est encore trop libre, et l’État pas assez fort. Alors, comme le mal se cache dans ses rangs, elle se retourne contre elle-même, se soumet dignement et endure de bonne grâce les nouvelles restrictions qui accompagnent chaque défaite de son protecteur. Mais les états d’urgence n’y font rien. L’ennemi revient toujours.</p>
<p><cite><em><a href="http://www.lisez-veloce.fr/tracts-2020/vivre-dans-la-peur/">Vivre dans la peur</a></em> (<a href="/david/cache/2020/be803a6670d234a559690fa0b2bef297/">cache</a>)</cite></p>
</blockquote>
<h2 id="bide-sur">Bide Sur <a href="#bide-sur" title="Ancre vers cette partie">#</a></h2><p>Chaque version de macOS me pousse un peu plus vers la sortie et c’est une bonne chose ! Ce coup-ci, c’est le <a href="/david/2020/06/25/#lissage">lissage</a> qui n’est plus disponible en passant par les préférences système. Il <em>suffit</em> d’ouvrir un terminal, de taper <code>defaults -currentHost write -g AppleFontSmoothing -int 0</code>, de fermer/rouvrir sa session et on se retrouve avec un écran 4K moins empâté. Moins iOS-isé en fait.</p>
<p>Je me réjouis qu’il existe des outils de montage vidéo qui soient disponible sur plusieurs plateformes. Une paire de menottes en moins.</p>
<h2 id="religion">Religion <a href="#religion" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Le caractère social a une fonction significative autre que celle de fournir à la société le type de caractère dont elle a besoin et de satisfaire la partie du comportement des individus conditionné par le caractère : le caractère social doit encore satisfaire les besoins religieux inhérents à tous les êtres humains. Pour que les choses soient claires, je précise que le mot « religion », tel que je l’emploie ici, ne se réfère pas à un système nécessairement en relation avec un concept de Dieu ou avec des idoles, ni même avec un système perçu comme religion, mais à <em>n’importe quel système de pensée et d’action commun à un groupe, qui offre aux individus un cadre d’orientation et un objet de dévotion</em>. En effet, dans ce sens large du mot, aucune culture du passé ou du présent et, semble-t-il, aucune culture de l’avenir, ne peut être considérée comme étant sans religion.</p>
<p><cite><em><a href="/david/2020/12/21/#avoir-ou-etre">Avoir ou être</a></em>, Erich Fromm</cite></p>
</blockquote>
<p>Cette formulation me pousse à me re-questionner là-dessus. À tenter d’identifier des <em>patterns</em> qui pourraient être les religions des cultures que je côtoie. À quoi est-ce que je me dévoue ? Quel cadre conduit mes pas ? Vers quelle étagère ¿</p>

<blockquote>
<p>Une religion donnée, pourvu qu’elle motive efficacement le comportement, n’est pas une somme de doctrines et de croyances ; elle est enracinée dans une structure de caractère spécifique de l’individu et, en tant que religion de groupe, dans le caractère social. Ainsi, notre attitude religieuse peut être considérée comme un aspect de notre structure de caractère, car <em>nous sommes ce à quoi nous nous vouons et c’est ce à quoi nous nous vouons qui motive notre conduite</em>.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<h2 id="experiences">Experiences <a href="#experiences" title="Ancre vers cette partie">#</a></h2>
<blockquote lang="en">
<p>Over the coming weeks I’ll be sharing opinions and stories from when a software decision backfired - or when one really paid off - so that you can keep them in your back pocket when the next time a similar decision has to be made. I’ll reflect on teams that I’ve worked on that have executed efficiently, and teams who have got bogged down in process, and everything inbetween. <mark>Think of this as a series where I share my experiences</mark> so that you can take them and use them to inform your decisions. There’s no lecturing here.</p>
<p><cite><em><a href="https://www.jackfranklin.co.uk/blog/learning-from-mistakes/">Learning from mistakes</a></em> (<a href="/david/cache/2020/2158c7c6e8b5882321807cd5536577d2/">cache</a>)</cite></p>
</blockquote>
<p>Je parle beaucoup d’expériences en ce moment autour de moi et je sens qu’il y a des choses à transmettre. Profiter d’être isolés pour explorer de nouvelles formes de partage. J’aimerais tenter des choses et cela fera peut-être partie de mes motivations/intentions 2021.</p>
<h2 id="enseignement">Enseignement <a href="#enseignement" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>La <em>Discussion Agile</em> n’est ni un débat, ni une réunion de paroles, ni une simple conversation. C’est un cercle de discussion pour résoudre un problème, approfondir une thématique, apprendre la lecture analytique.</p>
<p><cite><em><a href="https://pedagogieagile.com/2020/10/19/harkness-method-spider-web-discussion-et-discussion-agile/">Méthode Harkness, Spider Web Discussion, &amp; Discussion Agile</a></em> (<a href="/david/cache/2020/269e6737b6c331b1bfd93af86319010a/">cache</a>)</cite></p>
</blockquote>
<p>Christian den Hartigh est en train de rédiger pas mal d’articles au sujet de l’enseignement qui sont inspirants et qui me donnent envie de faire des dessins de toile d’araignée en dehors de la salle de classe. J’aimerais voir ce que cela pourrait donner sur l’étude d’une session de visio-conférence par exemple. Peut-être que l’outil (me) permettrait de mieux identifier — de manière à la fois visuelle et analytique — les déséquilibres qu’il peut y avoir dans un groupe de parole. Un tournevis de plus dans ma caisse à outil de la prise de soin.</p>

<blockquote>
<p>En fait, cette situation a surtout été nouvelle et déstabilisante pour moi, car je n’ai jamais vécu une telle qualité d’écoute dans une réunion avec des adultes. De plus, j’ai découvert encore une fois, comme l’écrit si bien Alexis Wiggins, que je ne suis pas si indispensable tout le temps dans la salle de cours au milieu des élèves. J’ai conscience que cet outil pédagogique ne peut pas être adapté à une enseignante/un enseignant qui ne pratique pas la pédagogie pendant ses cours. Dans cette situation, comme le dit si justement Katherine Kadwell, <mark>je suis payé pour apprendre et non plus pour enseigner</mark>.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Faire mes propres expérimentations dans le domaine me manque.</p>
<h2 id="apprendre">Apprendre <a href="#apprendre" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Moi j’apprends tout en ne parvenant pas, mais j’apprends quand même ☝️</p>
<p><cite><a href="https://mamot.fr/@antoinentl/105227328850775482">Antoine sur mastodon</a></cite></p>
</blockquote>
<p>Cette petite phrase d’<a href="https://www.quaternum.net/">Antoine</a> me hante depuis quelques jours tout en étant admiratif.</p>
<p>Je me rends bien compte que je suis incapable d’avoir cette démarche. Lorsque j’apprends un truc (au hasard la vidéo), je passe des jours et des jours à regarder des tutoriels, à choisir le meilleur matériel, à y penser la nuit, à tester ici et là, à vouloir partager des choses, etc. Mon <a href="/david/2020/10/08/#refus">refus de parvenir</a> ne tient qu’un temps, je finis par céder à l’<em>acceptation de parvenir</em>.</p>
<p>Avec un relent d’amertume et de culpabilité.</p>

<blockquote>
<p>À l’intention des autres, nous pouvons dire ici que Muad’Dib apprit aussi rapidement parce que le premier enseignement qu’il eût reçu était de savoir apprendre. <mark>Et la leçon première de cet enseignement était la certitude qu’il pouvait apprendre.</mark> Il est troublant de découvrir combien de gens pensent qu’ils ne peuvent apprendre et combien plus encore croient que c’est la chose difficile. Muad’Dib savait que chaque expérience porte en elle sa leçon.</p>
<p><cite>Extrait de <em>L’Humanité de Muad’Dib</em>, par la Princesse Irulan (<a href="/david/2020/12/21/#dune">Dune</a>*)</cite></p>
</blockquote>
<h2 id="daylight">Daylight <a href="#daylight" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>La cabane est le wagon de reddition où j’ai scellé mon armistice avec le temps : je suis réconcilié. La moindre des politesses est de le laisser passer.</p>
<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>
</blockquote>
<p>J’ai publié une nouvelle vidéo intitulée <a href="https://vimeo.com/485769887/190546b69c">Daylight</a>, j’aime réussir à publier des choses que je trouve inachevée durant mon apprentissage. Je ne sais pas encore combien de temps cela va durer et j’en profite. Il s’agissait surtout de découvrir une nouvelle façon de monter en utilisant <a href="https://www.blackmagicdesign.com/fr/products/davinciresolve/">DaVinci Resolve</a>, principalement pour la partie correction colorimétrique.</p>
<p>Ce sont des morceaux de vidéos issus d’un <a href="/david/2020/11/27/">autre projet</a> que j’ai ensuite assemblés sur une musique de Max Richter (dont je suis fan et pas sûr que ça lui fasse vraiment honneur). Je n’ai toujours pas de micro décent mais ça s’en vient et puis j’ai plein d’idées à ce sujet.</p>
<p>Aussi, un trépied ça change la vie pour faire des prises un peu stables !</p>

</main>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/11/27/" title="Publication précédente : Perles">←</a> •
    <a href="/david/2020/" title="Liste des publications récentes">↑</a>
     • <a rel="next" href="/david/2020/12/13/" title="Publication suivante : Publications">→</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>