A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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>La mission de Deuxfleurs (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  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. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://plume.deuxfleurs.fr/~/Deuxfleurs/La%20mission%20de%20Deuxfleurs">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>La mission de Deuxfleurs</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 href="https://plume.deuxfleurs.fr/~/Deuxfleurs/La%20mission%20de%20Deuxfleurs" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <blockquote dir="auto">
  71. <p>Il est plusieurs sortes d’hurluberlus chez Deuxfleurs. Motivations non mutuellement exclusives, la philosophique et l’ingénieure concourent parfois dans une seule et même tête. </p>
  72. </blockquote>
  73. <p dir="auto">Lors du dernier Camp Deuxfleurs au Couvent des Clarisses, le dernier atelier fut dédié à énoncer la <em>mission</em> de l’association, à la préciser, pourquoi pas à l’amender. Cela nous a semblé prioritaire pour solidifier notre coopération et notre cohérence. <em>Coopération</em> : malgré des individualités parfois en friction, c’est la reconnaissance d’un rêve de l’humanité commun qui permet à des mentalités d’une grande diversité d’avancer ensemble vers leur idéal partagé (rien de nouveau sous le soleil). <em>Cohérence</em> : bouillonnant⋅es d’énergie et décentralisé⋅es que nous sommes, nous entreprenons moult actions individuelles au nom de l’asso, chacun⋅e de son côté<a href="#postcontent-footnote1" rel="noopener noreferrer"></a>. Préciser notre mission, c’est rediscuter ensemble l’ordonnanceur qu’on ramènera tou⋅tes à la maison : quelles priorités, quelles actions, et comment s’insèrent-elles dans la tapisserie que nous brodons ensemble.</p>
  74. <p dir="auto">Dimanche 27 novembre, la cafetière à piston fumante sur la table à manger savamment encombrée, nous avons donc entrepris de discuter de la « mission » de Deuxfleurs, en donnant successivement la parole à chacun⋅e. Il en est sorti un consensus assez clair que je délivrerai tout à l’heure ; mais j’aimerais d’abord évoquer mon ressenti : la grande diversité des motivations à participer à une telle association, que j’ai trouvée géniale.</p>
  75. <h2 dir="auto">Typologie de comptoir des motivations intrinsèques<a href="#postcontent-footnote2" rel="noopener noreferrer"></a></h2>
  76. <p dir="auto">Lors de cet atelier, j’ai été le plus fasciné par la diversité des positionnements face à un objet d’association somme toute assez consensuel. Mince, nous n’étions que onze ; et déjà combien de sentiers proposés pour gravir la même montagne ! Dessinons donc quelques motivations types, en soulignant que cette classification ne cherche pas à mettre les gens dans des boîtes mais à caractériser diverses motivations intrinsèques à militer (loin d’être mutuellement exclusives) :</p>
  77. <ul dir="auto">
  78. <li>
  79. <p dir="auto"><strong>Positiviste/Utopiste</strong> : Le monde va mal, et il y a beaucoup à critiquer ; certes. Mais on ne peut pas être satisfait⋅e de se lever tous les matins pour partir en guerre. Il faut œuvrer <em>pour</em> quelque chose, et c’est la recherche de cet idéal positif que j’appelle motivation positiviste/utopiste.</p>
  80. </li>
  81. <li>
  82. <p dir="auto"><strong>Historienne/Philosophe</strong> : L’Histoire et la Culture sont pleines d’expériences et d’enseignements. Mettre en parallèle les événements d’hier et d’aujourd’hui, pour un tirer un recul critique, une vision systémique et des propositions concrètes—voilà une motivation historienne/philosophique qui sent bon le vieux livre.</p>
  83. </li>
  84. <li>
  85. <p dir="auto"><strong>Scientifique</strong> : Nous avons l’intuition que notre action est bien fondée, mais une intuition ne peut suffire à emmener la société dans son ensemble (et ce n’est pas souhaitable). L’envie de rechercher des faits rationnels pour étayer l’action militante, la critiquer constructivement, et l’armer pour convaincre le plus grand nombre ; c’est une motivation toute scientifique.</p>
  86. </li>
  87. <li>
  88. <p dir="auto"><strong>Ingénierie</strong> : Dans le domaine informatique comme dans toute technique ou artisanat, rester à la pointe demande une pratique et un effort de veille constants. Celleux qui maîtrisent le mieux l’outil ont les idées large, des Chapelles Sixtine plein la tête, et sont motivé⋅es par le fait de mettre leur savoir-faire à l’œuvre là où il sera le plus bénéfique, important, utile au plus grand nombre.</p>
  89. </li>
  90. <li>
  91. <p dir="auto"><strong>Expérimentale</strong> : Si l’historien⋅ne a raison de considérer les acquis de l’Histoire, il reste à découvrir au moins autant de façons de vivre et de faire communauté qu’il en a existé par le passé. La motivation expérimentale, c’est de vouloir proposer quelque chose de nouveau, qui n’a jamais été fait, une réponse inédite à nos problèmes sans précédent.</p>
  92. </li>
  93. </ul>
  94. <h2 dir="auto">La mission de Deuxfleurs</h2>
  95. <p dir="auto">Cet atelier a démarré sur une proposition de cadrage de notre mission réalisée par Tom et Esther durant leurs échanges avec <a href="https://www.anciela.info/" rel="noopener noreferrer">Anciéla</a> (une association de soutien à l’Économie Sociale et Solidaire qui nous accompagne depuis Lyon). Nous avons vite effacé le tableau pour laisser chacun⋅e proposer sa vision sans trop de biais, avant de revenir sur ce cadrage sans y trouver à redire. Ci-après la liste de nos trois objectifs phare, tous aussi importants les uns que les autres.</p>
  96. <blockquote dir="auto">
  97. <p>Le corps de texte des sections suivantes n’est que <em>mon</em> interprétation de la mission de l’asso à un instant donné, développée à partir de mes notes d’atelier. Dans un avenir proche, nous rédigerons un meilleur document, plus collectif et intemporel.</p>
  98. </blockquote>
  99. <h3 dir="auto">1. Fabriquer des outils pour les communautés (CHATONS)</h3>
  100. <p dir="auto">Deuxfleurs dispose de connaissances, de compétences et d’une volonté uniques pour proposer <a href="https://git.deuxfleurs.fr/Deuxfleurs" rel="noopener noreferrer">des briques techniques</a> facilitant l’« entr’hébergement » (concept proposé par <a href="https://tedomum.net/" rel="noopener noreferrer">TeDomum</a>). On pense à Tricot, Guichet, Diplonat… et bien sûr à <a href="https://garagehq.deuxfleurs.fr/" rel="noopener noreferrer">Garage</a>, pour le développement duquel <a href="https://plume.deuxfleurs.fr/%7E/Deuxfleurs/NGI%20Pointer%20subventionne%20Deuxfleurs" rel="noopener noreferrer">nous avons embauché trois de nos ouailles</a> l’an passé. On voit diverses communautés « libristes » déployer Garage en production (notamment des <a href="https://www.chatons.org/" rel="noopener noreferrer">CHATONS</a>), ce qui semble indiquer que notre analyse des besoins et nos propositions techniques sont pertinentes. Nous allons donc continuer sur cette voie, en accueillant à bras ouverts vos avis et contributions bien sûr !</p>
  101. <h3 dir="auto">2. Proposer des services numériques (au grand public)</h3>
  102. <p dir="auto">En informatique (comme ailleurs), il est pertinent d’être usager⋅e des services qu’on développe. <a href="https://guide.deuxfleurs.fr/formations/sysadmin/" rel="noopener noreferrer">La page « Administration système » de notre guide</a> critique de ce fait la distinction faite entre conception et production, et abonde dans le sens de la maxime « tu le développes, tu l’administres ». Éditeur de logiciels de fait, il est donc naturel pour nous d’en être les premiers usagers. Par ailleurs, nous avons notamment monté Deuxfleurs dans le but de mettre en commun nos services numériques auto-hébergés, et de les proposer à un large public. <a href="https://plume.deuxfleurs.fr/%7E/Deuxfleurs/Deuxfleurs%20rejoint%20les%20CHATONS,%20un%20collectif%20d'h%C3%A9bergeurs%20%C3%A9thiques" rel="noopener noreferrer">On est même devenus officiellement un CHATONS</a> pour entériner cette mission.</p>
  103. <p dir="auto">C’est que face à la privatisation galopante de l’espace numérique (néo-<a href="https://fr.wikipedia.org/wiki/Enclosure" rel="noopener noreferrer"><em>enclosures</em></a> ?), il est urgent de faire émerger et vivre des espaces <em>communs</em>. <a href="https://yewtu.be/watch?v=QnJFhuOWgXg" rel="noopener noreferrer"><em>The revolution will not be televised</em></a> : nous ne ferons pas émerger le monde de demain <em>via</em> les outils de domination du présent modèle (moribond). Pour réaliser notre utopie, créer de nouveaux imaginaires du futur, faire vivre la démocratie, la convivialité et l’humanisme—nous avons besoin d’espaces de bienveillance et de libre-pensée. Notre espace, notre piaule, nos cabanes dans les arbres, nos communs.</p>
  104. <h3 dir="auto">3. Plaidoyer, Inspirer, Essaimer</h3>
  105. <p dir="auto">En effet, notre association a vocation à proposer et à promouvoir un idéal positif, quelque chose en lequel croire, <em>pour</em> lequel militer. Pas seulement contre : <em>anti</em>-capitaliste, <em>dé</em>-centralisation… Ça rejoint la motivation positiviste/utopiste : il faut se lever le matin <em>pour</em> quelque chose. </p>
  106. <p dir="auto">Nous appelons donc les artistes de tout poil à rêver avec nous du monde merveilleux de demain, à dresser les grandes lignes de l’Eldorado. Plus il est grand et fabuleux, plus cet horizon spirituel motivera nos actions durant des siècles et des siècles. Trop d’emphase ? Je vous rappelle que nous étions alors dans un couvent, lieu de vie réalisé « pour les mille générations à venir » par des petites mains qui partageaient un idéal d’une force à faire bouger des montagnes. C’est pétris d’une vision cohérente, entraînante, « qui fasse rêver », que nous voulons nous produire devant la société civile, quelque soit l’objet du discours.</p>
  107. <p dir="auto">Emmener l’assentiment passe par la conviction (avec des faits) et la persuasion (avec des sentiments). Si c’est avec passion que je recherche personnellement les faits scientifiques pour convaincre les raisons, c’est que je suis persuadé que l’utopie est déjà là—dans le fait d’arpenter le chemin qui y mène.</p>
  108. <p dir="auto">J’arrête là les envolées lyriques. En guise de conclusion, j’écrirai simplement qu’il me tarde de vous rencontrer. Pour vivre, sur Terre et au présent, des aventures fleuries et pleines d’avenir. À bientôt !</p>
  109. <p dir="auto">ADRN</p>
  110. <h2 dir="auto">Références mentionnées durant l’atelier</h2>
  111. <p dir="auto">S’il n’y a pas plus pédant qu’une personne qui cite des références à chaque phrase, alors il n’y a pas plus pédant que nous—parce qu’on en a cité un paquet durant cet atelier : </p>
  112. <ul dir="auto">
  113. <li>
  114. <p dir="auto">Ivan Illich, <a href="https://www.seuil.com/ouvrage/la-convivialite-ivan-illich/9782757842119" rel="noopener noreferrer">« La Convivialité »</a>, Seuil, 1973.</p>
  115. </li>
  116. <li>
  117. <p dir="auto">Yaël Benayoun &amp; Irénée Régnauld, <a href="https://boutique.fypeditions.com/products/echnologies-partout-democratie-nulle-part-plaidoyer-pour-que-les-choix-technologiques-deviennent-l-affaire-de-tous" rel="noopener noreferrer">« Technologie partout, Démocratie nulle part »</a>, FYP Éditions, 2020.</p>
  118. </li>
  119. <li>
  120. <p dir="auto">Elinor Ostrom, économiste ayant beaucoup étudié les « communs ». <a href="https://fr.wikibooks.org/wiki/Construire_des_communs/Elinor_Ostrom" rel="noopener noreferrer">Une petite note de lecture sur Wikibooks.</a></p>
  121. </li>
  122. <li>
  123. <p dir="auto">Édouard Jourdain, <a href="https://www.revue-ballast.fr/la-part-anarchiste-des-communs/" rel="noopener noreferrer">« La part anarchiste des communs »</a>, BALLAST, 2020, article en ligne dernièrement consulté le 1er décembre 2022.</p>
  124. </li>
  125. <li>
  126. <p dir="auto">François Jarrige, <a href="https://www.editionsladecouverte.fr/technocritiques-9782707178237" rel="noopener noreferrer">« Techno-critiques : Du refus des machines à la contestation des technosciences »</a>, La Découverte, 2014.</p>
  127. </li>
  128. <li>
  129. <p dir="auto">Götz Hamann, Heinrich Wefing &amp; Khuê Pham, <a href="http://www.premierparallele.fr/livre/the-united-states-of-google" rel="noopener noreferrer">« The United States of Google »</a>, Premier Parallèle, 2015.</p>
  130. </li>
  131. <li>
  132. <p dir="auto">Jérôme Denis &amp; David Ponti, <a href="https://www.editionsladecouverte.fr/le_soin_des_choses-9782348064838" rel="noopener noreferrer">« Le soin des choses »</a>, La Découverte, 2022.</p>
  133. </li>
  134. <li>
  135. <p dir="auto">« Resource One », une émanation d’un collectif anarchiste des 70’s aux États-Unis nommé « Project One ». Cf : </p>
  136. </li>
  137. <li>
  138. <p dir="auto">« The Whole Earth Catalog », Stewart Brand, 1968, disponible <a href="https://monoskop.org/images/0/09/Brand_Stewart_Whole_Earth_Catalog_Fall_1968.pdf" rel="noopener noreferrer">en ligne</a>.</p>
  139. </li>
  140. <li>
  141. <p dir="auto">Collectif Mauvaise Troupe, <a href="https://www.lyber-eclat.net/livres/constellations/" rel="noopener noreferrer">« Constellations »</a>, Éditions de l’Éclat, 2014.</p>
  142. </li>
  143. </ul>
  144. <hr>
  145. <p dir="auto"><a href="#postcontent-footnotemark1" rel="noopener noreferrer"></a> : Cette faculté d’essaimage est tout à notre honneur. Nous saluons et envions néanmoins l’ancrage territorial de collectifs comme <a href="https://raoull.org/" rel="noopener noreferrer">Raoull</a>, dont les relations nous ont permis de loger dans un endroit aussi génial que le Couvent des Clarisses le week-end dernier. Encore merci, et aussi pour la bière !</p>
  146. <p dir="auto"><a href="#postcontent-footnotemark2" rel="noopener noreferrer"></a> : Bien qu’on n’en ait pas parlé durant l’atelier, je parle de « motivation intrinsèque » en référence à <a href="https://framablog.org/2021/08/06/quand-le-militantisme-deconne-injonctions-purete-militante-attaques-5-8/" rel="noopener noreferrer">l’épisode 5</a> de <a href="https://framablog.org/?s=viciss+militantisme" rel="noopener noreferrer">la série d’articles sur le Militantisme Déconnant</a> publiée par Viciss Hackso de <a href="https://www.hacking-social.com/" rel="noopener noreferrer">Hacking Social</a> sur le blog de <a href="https://framasoft.org/fr/" rel="noopener noreferrer">Framasoft</a>.</p>
  147. </article>
  148. <hr>
  149. <footer>
  150. <p>
  151. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  153. </svg> Accueil</a> •
  154. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  155. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  156. </svg> Suivre</a> •
  157. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  158. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  159. </svg> Pro</a> •
  160. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  161. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  162. </svg> Email</a> •
  163. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  164. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  165. </svg> Légal</abbr>
  166. </p>
  167. <template id="theme-selector">
  168. <form>
  169. <fieldset>
  170. <legend><svg class="icon icon-brightness-contrast">
  171. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  172. </svg> Thème</legend>
  173. <label>
  174. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  175. </label>
  176. <label>
  177. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  178. </label>
  179. <label>
  180. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  181. </label>
  182. </fieldset>
  183. </form>
  184. </template>
  185. </footer>
  186. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  187. <script>
  188. function loadThemeForm(templateName) {
  189. const themeSelectorTemplate = document.querySelector(templateName)
  190. const form = themeSelectorTemplate.content.firstElementChild
  191. themeSelectorTemplate.replaceWith(form)
  192. form.addEventListener('change', (e) => {
  193. const chosenColorScheme = e.target.value
  194. localStorage.setItem('theme', chosenColorScheme)
  195. toggleTheme(chosenColorScheme)
  196. })
  197. const selectedTheme = localStorage.getItem('theme')
  198. if (selectedTheme && selectedTheme !== 'undefined') {
  199. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  200. }
  201. }
  202. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  203. window.addEventListener('load', () => {
  204. let hasDarkRules = false
  205. for (const styleSheet of Array.from(document.styleSheets)) {
  206. let mediaRules = []
  207. for (const cssRule of styleSheet.cssRules) {
  208. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  209. continue
  210. }
  211. // WARNING: Safari does not have/supports `conditionText`.
  212. if (cssRule.conditionText) {
  213. if (cssRule.conditionText !== prefersColorSchemeDark) {
  214. continue
  215. }
  216. } else {
  217. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  218. continue
  219. }
  220. }
  221. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  222. }
  223. // WARNING: do not try to insert a Rule to a styleSheet you are
  224. // currently iterating on, otherwise the browser will be stuck
  225. // in a infinite loop…
  226. for (const mediaRule of mediaRules) {
  227. styleSheet.insertRule(mediaRule.cssText)
  228. hasDarkRules = true
  229. }
  230. }
  231. if (hasDarkRules) {
  232. loadThemeForm('#theme-selector')
  233. }
  234. })
  235. </script>
  236. </body>
  237. </html>