davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
							<!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` element
  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>Tag #scopyleft — David Larlet</title>
<meta name="description" content="Publications relatives au tag #scopyleft">
<!-- 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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
    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 em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<header>
  <h1>Publications relatives au tag #scopyleft</h1>
</header>
<nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a>
     • <a rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg> Étiquettes</a>
  </p>
</nav>
<hr>
<main>
  <p>Liste des publications en ordre chronologique :</p>
  
    <h2><a href="/david/2021/01/25/" title="Lien permanent vers cet article">Valeurs</a> (2021-01-25)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>S’il n’existe plus de géographie du refuge hors l’exil, et que l’on veut continuer à vivre en société, parce que chacun n’a pas la possibilité de s’échapper en mer ou vers les sommets, <mark>alors il faut trouver ailleurs, en soi</mark>, la manière de s’extraire de la <em>Machine</em> et de faire corps avec le monde vivant contre le <em>Monstre</em>.</p>
<p><cite><em>Plutôt couler en beauté que flotter sans grâce</em>, Corinne Morel Darleux</cite></p>
</blockquote>
<p>Aujourd’hui, on s’est demandé ce qu’était une valeur avec <a href="http://scopyleft.fr/">scopyleft</a> (et quelles seraient les nôtres aujourd’hui). Est-ce un cap&#8239;? Une aspiration&#8239;? Une intention&#8239;? Un travail quotidien&#8239;? Une chose que l’on a en nous&#8239;? Une utopie&#8239;? <em>Un peu de tout ça&#8239;?!</em></p>
<p>Est-ce qu’on doit l’afficher&#8239;? Est-ce que ça doit nous guider&#8239;? Nous contraindre&#8239;? Est-ce que c’est évolutif&#8239;? Adaptable&#8239;? Partageable&#8239;? <em>Est-ce bien nécessaire&#8239;?!</em></p>
<p>L’une des branches de cet arbre de possibles m’a fait comprendre qu’il est important d’avoir ces discussions, non pas pour une éventuelle conclusion mais pour les échanges lors de ce cheminement à plusieurs.</p>
<p><strong>Quelle est la valeur qui motive à parler de valeurs à intervalles réguliers&#8239;?</strong> #SoMeta</p>

<blockquote>
<p>C’est en façonnant par son travail le monde des objets que l’homme se révèle réellement comme un être générique. <mark>Sa production, c’est sa vie</mark> générique créatrice. Par elle, la nature apparaît comme son œuvre et sa réalité. C’est pourquoi l’objet du travail est l’objectivisation de la vie générique de l’homme car il ne s’y dédouble pas idéalement dans la conscience, mais réellement, comme créateur. Il se contemple ainsi lui-même dans un monde qu’il a lui-même créé par son travail.</p>
<p><cite><em>Ébauche d’une critique de l’Économie politique</em>, Karl Marx dans «&nbsp;Manuscrits de 1844&nbsp;»</cite></p>
</blockquote>

    </details>
  
    <h2><a href="/david/2021/04/22/" title="Lien permanent vers cet article">Vacances</a> (2021-04-22)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>L’histoire est aussi importante que la forme ou la structure. Dans une très large mesure, <mark>l’histoire d’un phénomène constitue le phénomène lui-même</mark>. Nous sommes, réellement, tout ce qui a existé avant nous et nous pouvons devenir à notre tour infiniment plus que ce que nous sommes.</p>
<p><cite><em>L’écologie sociale</em>, Murray Bookchin</cite></p>
</blockquote>
<p>On a un rapport assez particulier aux vacances chez Scopyleft et au moment où on se <a href="/david/2021/03/17/" title="Arrivant·es">transmet en question</a>, c’est l’occasion de partager <em>un</em> état de nos réflexions.</p>
<p>La prise de vacances est libre et consciente. <strong>Libre</strong> car on ne se restreint pas à un nombre de jours/semaines, ni même à communiquer à nos collègues si/quand on est en vacances. <strong>Consciente</strong> car on essaye — dans la mesure du possible — de ne pas laisser les autres galérer du fait de notre indisponibilité. Faire partie d’une <abbr title="Société coopérative et participative">SCOP</abbr> c’est aussi <em>pour moi</em> éprouver de l’empathie et de la solidarité pour les autres membres.</p>
<p>La discussion du jour portait sur la toxicité potentielle d’une telle approche. D’autres entreprises pratiquent les <em>vacances illimitées</em> mais cela crée un tel sentiment de culpabilité que les employé·es prennent en définitive <em>moins</em> de vacances et dans un climat pas terrible.</p>
<p>Comment rompre avec ce sentiment&#8239;?</p>
<p>On en vient à (re)questionner les notions de travail et de vacances. Si l’on envisage les vacances comme des <em>moments de prise de soin personnels</em>, le changement n’est pas uniquement sémantique mais traduit une intention différente. D’une manière similaire à l’auto-détermination de nos salaires en fonction de nos «&nbsp;besoins&nbsp;», les vacances s’adaptent ainsi à notre rythme de vie, notre enthousiasme et notre appétence. L’exploration du tempo convenable pour notre danse du moment.</p>
<p>Ce n’est plus alors la recherche d’un rythme de <em>travail</em> soutenable mais celle d’une qualité de <em>vie</em> enviable.</p>

<blockquote>
<p>Bien au contraire, la complétude inclut l’ensemble disparate des structures, d’articulations, de médiations, où le tout va puiser la riche variété de ces formes et où ce qu’un esprit analytique réduirait à une suite de détails «&nbsp;innombrables&nbsp;» et «&nbsp;fortuits&nbsp;» acquiert ainsi des propriétés qualitatives uniques.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>

    </details>
  
    <h2><a href="/david/2021/08/19/" title="Lien permanent vers cet article">Définition</a> (2021-08-19)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>On pourrait distinguer des développeur·ses, designer‧ses, agilistes et coach dont c’est l’<em>activité</em> ou la <em>profession</em>, si leur travail nourrit directement une structure capitalistique et qui renforce le maillage néolibéral.</p>
<p><cite><em><a href="https://oncletom.io/2021/08/16/victoire-professionnels/">La victoire des professionnels</a></em> (<a href="/david/cache/2021/1e65aa7484aa157870c2a1b735f36a26/">cache</a>)</cite></p>
</blockquote>
<p>Suivi de&nbsp;:</p>

<blockquote>
<p>(j’ouvre une parenthèse ici pour préciser que quand je dis que je «&nbsp;suis développeur web&nbsp;», j’ai l’impression que ça cache la valeur que j’apporte quand je réfléchis à ces questions de «&nbsp;résilience sociale&nbsp;» autour du logiciel que je créé)</p>
<p><cite><em>David <a href="https://eldritch.cafe/@davidbruant/106777018282632259">sur Mastodon</a></em></cite></p>
</blockquote>
<p>Réflexions croisées qui viennent alimenter mes <a href="/david/2021/05/27/" title="Craftsman">propres explorations</a> plus ou <a href="/david/blog/2015/travail-transition/">moins</a> <a href="/david/blog/2015/pairmutation-travail/">récentes</a> sur le sujet. Ce besoin de définition est même assez <a href="/david/blog/2016/passion-definition/">récurrent</a> ici, le blog étant probablement une forme de définition en soi mais je m’égare et ça devient trop <em>meta</em>.</p>
<p>«&nbsp;Pour qui, <a href="/david/stream/2018/04/04/">pour quoi</a> travaillons-nous&#8239;?&nbsp;» pour reprendre le titre de <a href="/david/2021/01/27/" title="Choix">Jacques Ellul</a>, avec quels espoirs plus ou moins communs engageons-nous notre attention, aspirons-nous à dédier notre fameuse «&nbsp;force de travail&nbsp;»&#8239;? J’ai l’impression d’avoir de moins en moins de réponses à tout cela, une définition peut rester floue, une identité aussi finalement, lorsqu’on est suffisamment en confiance. Peut-être qu’en dépassant cette dénomination, on s’élève, on se libère d’un poids à la fois social et culturel. <strong>«&nbsp;Je fais des trucs en équipe que j’espère utiles et qui parfois se retrouvent sur le Web&nbsp;»</strong>, c’est sûr que ça n’est pas très vendeur pour <a href="/david/2021/03/23/" title="Recrutement">obtenir un emploi</a> mais c’est peut-être ce qui se rapproche le plus de mon <em>activité</em>. En tout cas, ça se retrouve pas mal dans ce qui <a href="http://scopyleft.fr/">nous anime</a> depuis bientôt 9&nbsp;ans.</p>
<p>Au niveau du «&nbsp;pour qui&nbsp;», il y a toujours cette tension à travailler pour un gouvernement, ce péché d’orgueil d’espérer faire moins pire que ce que ça pourrait être. J’imagine que l’Histoire est remplie de personnes bien intentionnées qui — avec ce même raisonnement — en sont arrivées à commettre les pires atrocités. Se pose peut-être davantage la question du «&nbsp;jusqu’à quand&nbsp;» dans ce cas là, savoir s’arrêter avant que la <em>collaboration</em> ne change de sens…</p>

<blockquote>
<p>Les gens veulent toujours quelque chose de plus qu’une joie immédiate ou que ce sentiment plus profond qu’on appelle le bonheur. C’est là un des secrets qui nous aident à façonner l’accomplissement de nos visées. Ce «&nbsp;petit quelque chose&nbsp;» exerce un pouvoir décuplé sur <mark>ceux qui ne savent lui attribuer un nom</mark> ou (comme c’est le plus souvent le cas) ne soupçonnent même pas son existence. La plupart des gens ne réagissent qu’inconsciemment à de telles forces cachées. De sorte que nous n’avons plus qu’à concevoir un «&nbsp;petit quelque chose&nbsp;» bien étudié et à lui donner une forme et une définition acceptables pour qu’on nous suive comme un seul homme.</p>
<p><cite><em>Les secrets du pouvoir au Bene Gesserit</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
</blockquote>
<figure>
    <a href="#riviere-megantic"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/riviere-megantic.jpg" alt="Une rivière en pause longue au Mont Mégantic."
             loading="lazy" width="2048" height="1536" />
    </a>
    <a href="#_" class="lightbox" id="riviere-megantic">
        <img src="/static/david/2021/riviere-megantic.jpg" alt="Une rivière en pause longue au Mont Mégantic."
             loading="lazy" width="2048" height="1536" />
    </a>
    <figcaption>Un flux d’idées, momentanément figé.</figcaption>
</figure>

    </details>
  
    <h2><a href="/david/2021/11/09/" title="Lien permanent vers cet article">Junior</a> (2021-11-09)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>Pour diminuer ces risques, les entreprises devraient accepter de <mark>renoncer à une part de rentabilité immédiate au profit d’une forme d’investissement durable</mark> reposant sur le recrutement de davantage de juniors. En comprenant que ces juniors sortant de formations courtes – qui sont, notamment, des femmes – auraient pu être ingénieurs ou ingénieures si ils ou elles n’avaient pas rencontré dès l’enfance toute une série de barrières socio-culturelles, l’industrie miserait sur son propre avenir.</p>
<p><cite><em><a href="https://usbeketrica.com/fr/article/le-manoir-de-verre-comment-la-tech-traite-t-elle-les-femmes-developpeuses-ou-data-scientists">«&nbsp;Le manoir de verre&nbsp;»&nbsp;: comment la tech traite-t-elle les femmes développeuses ou data scientists&#8239;?</a></em> (<a href="/david/cache/2021/da6f2715327f68a1955044955fb913ea/">cache</a>)</cite></p>
</blockquote>
<p>Il y a des jours où je suis bien content de voir l’évolution de <a href="http://scopyleft.fr/">scopyleft</a> sur ce plan là. Cette dernière année, nous sommes devenu·es paritaires en réduisant notre moyenne d’âge de 5&nbsp;ans. Ce qui se joue en interne va bien au-delà de ces chiffres et je vais avoir besoin de davantage de recul pour en parler.</p>
<p>Jusqu’ici c’est très chouette&nbsp;:-).</p>

<blockquote lang="en">
<p>We end up in a situation where the demand for senior developers far outweighs the capacity and willingness of the companies to train juniors. Up until recently it wasn’t that bad though, we were in kind of an stable situation - the number of developers needed was growing steadily, the attrition was stable, companies were offering some internships and entry-level positions, universities and bootcamps provided streams of candidates. It wasn’t very easy to get the first job in the industry, but with enough effort and determination it was possible even for someone who has just started programming.</p>
<p>And then came the pandemic.</p>
<p><cite><em><a href="https://www.notonlycode.org/nobody-hires-juniors/">Why nobody hires junior developers anymore</a></em> (<a href="/david/cache/2021/28dd93134ff6df75757a564c42834ff3/">cache</a>)</cite></p>
</blockquote>
<p>PS&nbsp;: niveau salaires par contre, c’est très inégal et ce sera l’opportunité d’un futur billet.</p>

    </details>
  
    <h2><a href="/david/2021/11/30/" title="Lien permanent vers cet article">Salaires</a> (2021-11-30)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>Il ne s’agit plus de quémander un emploi pour avoir le droit de valoriser du capital, et de payer des impôts pour en déléguer la gestion à un personnel politique et une aristocratie de grandes et grands fonctionnaires. Il s’agit de <mark>décider ensemble</mark> du niveau de salaire et de ce qui doit être produit, et surtout comment ça devrait l’être.</p>
<p><cite><em><a href="https://igor.milhit.ch/citoyennet%C3%A9-autre/">Citoyenneté autre</a></em> (<a href="/david/cache/2021/465f63b989ee5666a6e9a406201a4b62/">cache</a>)</cite></p>
</blockquote>
<p>Au sein de <a href="http://scopyleft.fr/">Scopyleft</a>, nous sommes passé·es d’un salaire <em>à la contrainte</em> (cruel manque de trésorerie les premiers mois&#8239;!) à un salaire <em>égalitaire</em> (pendant un temps) pour être depuis quelques années maintenant à un <strong>salaire au besoin</strong>. Notre revenu n’est pas corrélé à ce que l’on rapporte ou à notre ancienneté ou à notre activité ou à notre expérience. Encore moins à notre performance…</p>
<p>Sous réserve que le pot commun ne se retrouve pas vide, chacun·e est libre de choisir le montant qu’iel souhaite.</p>
<p>Cette pratique vient avec son lot de non-dits et de culpabilités, de la même façon que ce qui peut se produire avec <a href="/david/2021/04/22/" title="Vacances">les vacances</a>. Parfois ne pas avoir à donner de justifications peut être la pire des tortures pour un groupe de personnes qui s’estiment et se respectent&nbsp;:</p>
<ul>
<li>est-ce que je ne suis pas égoïste vis-à-vis des autres en m’accordant autant&#8239;?</li>
<li>est-ce que je peux comparer mes besoins à ceux des autres dans une société de (sur)consommation&#8239;?</li>
<li>est-ce que j’ai besoin d’une symétrie de revenus avec mon ou ma conjoint·e pour être libre&#8239;?</li>
<li>est-ce que les enfants entrent en compte alors que c’est un choix délibéré d’en avoir ou pas&#8239;?</li>
<li>est-ce que je peux être payé·e autant alors que je suis jeune/en reconversion/sans mission/etc&#8239;?</li>
<li>est-ce que ça ne participe pas à la définition de mon futur salaire dans une autre structure&#8239;?</li>
<li>est-ce que pouvoir présenter ces fiches de paye à mon banquier/propriétaire fait partie d’un besoin&#8239;?</li>
<li>est-ce que la pression sociale m’enclin à sous-évaluer ma valeur/mes besoins car je suis une femme&#8239;?</li>
<li>est-ce que ma vision de la sobriété/frugalité est partagée au sein du groupe&#8239;?</li>
<li>est-ce que mon comportement actuel endommage la trésorerie future de la coopérative&#8239;?</li>
</ul>
<p>Toutes ces questions sont légitimes et saines. Et le fait que ces discussions aient lieues à un moment où il y a <a href="/david/2021/11/09/" title="Junior">un peu plus de diversité</a> n’est pas anodin. Elles permettent de se remettre en question et génèrent des échanges qui permettent d’apprendre à se connaître (et à s’apprécier).</p>
<p>Du salaire à vie au salaire en vie, il y a matière à travailler. Ensemble.</p>
<p><em>Rappel&nbsp;: nous sommes une coopérative, ce qui signifie que ce qui n’est pas attribué en salaire au cours de l’année est transformé en réserve (pour la structure), puis en part travail (répartie équitablement entre les salarié·es) à la fin de l’année. C’est aussi cela être propriétaire de son cadre de travail, que l’on essaye de pérenniser.</em></p>

<blockquote>
<p>Il a fait le tour du monde… mais qu’est-ce que le tour du monde puisque l’horizon est éternel&#8239;? Le tour du monde va plus loin que le bout du monde, aussi loin que la vie, plus loin encore peut-être. Quand on entrevoit ça, on a un peu le vertige, on a un peu peur. Et en même temps ce qu’on entrevoit là est tellement…</p>
<p>Tellement quoi&#8239;? <mark>Je ne sais pas.</mark> Plus loin que le bout du monde…</p>
<p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
</blockquote>

    </details>
  
</main>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> 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"></script>
<script>
    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>