A place to cache linked articles (think custom and personal wayback machine)
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.

преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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>Des administrateurs d’extrême droite ont manipulé les articles de Wikipedia Croatie pendant 10 ans (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://www.numerama.com/politique/721329-des-administrateurs-dextreme-droite-ont-manipule-les-articles-de-wikipedia-croatie-pendant-10-ans.html">
  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>Des administrateurs d’extrême droite ont manipulé les articles de Wikipedia Croatie pendant 10 ans</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://www.numerama.com/politique/721329-des-administrateurs-dextreme-droite-ont-manipule-les-articles-de-wikipedia-croatie-pendant-10-ans.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="chapo">Pendant dix ans, les administrateurs de Wikipedia Croatie ont profité de leur pouvoir pour modifier plus d'une centaine d'articles pour imposer leur vision. Que ce soit des épisodes de la Seconde Guerre mondiale, des conflits en Yougoslavie, ou bien des thématiques comme l'avortement, les administrateurs d'extrême droite ont effectué un long travail de sape pour manipuler l'information. </p>
  71. <p>De 2011 à 2020, Wikipedia Croatie a été « <em>prisonnier</em> » d’un groupe d’une vingtaine d’administrateurs de l’encyclopédie. « <em>Wikipedia Croatie avait reçu beaucoup d’attention à cause de sa tendance à promouvoir des points de vue fascistes, des biais contre les Serbes de Croatie, et une propagande anti-LGBT</em> », a écrit la fondation <a href="https://upload.wikimedia.org/wikipedia/commons/1/14/Croatian_WP_Disinformation_Assessment_-_Final_Report_EN.pdf" rel="noopener" target="_blank">Wikimedia dans un rapport publié le 21 juin 2021</a>. Les accusions sont nombreuses, et les faits tout aussi graves et impressionnants.</p>
  72. <p>Pendant une dizaine d’années, ce groupe d’administrateurs a cherché à imposer ses « idées ». Que ce soit en occultant certains faits, en supprimant des passages ou en créant de toute pièce de nouveaux articles, ils ont promu leur vision du monde : une vision d’extrême droite, et nationaliste.</p>
  73. <p>Dans le long rapport de la Fondation, Wikimedia est revenu sur cet accident, hors norme et inédit. « <em>Ils ont volontairement déformé les contenus des articles, abusé de leur pouvoir, et systématiquement fait obstruction des pratiques de Wikipedia</em> », est-il écrit à propos du groupe d’administrateurs. Depuis, ils ont tous été bannis de manière permanente de l’encyclopédie, grâce à une action de groupe d’autres utilisateurs de Wikipedia Croatie. Mais le rapport soulève de nombreuses questions. Comment est-ce que cela a pu arriver, pendant aussi longtemps ? Et qu’est-ce qui empêche ce scénario de se reproduire à nouveau ?</p>
  74. <ul><li><strong>À lire</strong> : <a class="gtm-a-lire" href="https://www.numerama.com/politique/703685-comment-les-politiques-caviardent-leurs-pages-wikipedia-en-amont-des-elections-regionales.html">Comment les politiques caviardent leurs pages Wikipédia en amont des élections régionales</a></li></ul>
  75. <h2>« C’était une erreur »</h2>
  76. <p>Selon le rapport, tout a commencé en 2003, lors de la création de Wikipedia Croatie. L’encyclopédie en ligne n’est habituellement pas divisée par pays, mais par langue : il n’existe pas de Wikipedia France, mais un Wikipedia en français, qui regroupe tous les articles écrits en Français, qu’ils le soient par des administrateurs suisses ou québécois. C’est le cas pour toutes <a href="https://fr.wikipedia.org/wiki/Langue_pluricentrique" rel="noopener" target="_blank">les langues pluricentriques</a>, qui sont parlées par plusieurs pays.</p>
  77. <p>Mais ce n’est pas ce qu’il s’est passé pour la langue serbo-croate. Cette langue est parlée dans quatre pays, la Serbie, la Bosnie-Herzégovine, le Monténégro, et la Croatie, et est officiellement reconnue par les linguistes comme une « <a href="https://fr.wikipedia.org/wiki/Serbo-croate" rel="noopener" target="_blank">langue unitaire</a> ». Le serbo-croate a beau être la même dans les quatre pays, elle porte un nom différent dans chacun d’entre eux : serbe en Serbie, bosnien en Bosnie-Herzégovine, monténégrin au Monténégro, et croate en Croatie.</p>
  78. <figure id="attachment_721512" aria-describedby="caption-attachment-721512" style="width: 1024px" class="wp-caption alignnone"><a href="https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org.jpg"><noscript><img src="https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org-1024x453.jpg" alt=""><style>.wp-image-721512.size-large{display:none;}</style></noscript><img loading="lazy" class="wp-image-721512 size-large" alt="" width="1024" height="453" sizes="(max-width: 1024px) 100vw, 1024px" data-src="https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org-1024x453.jpg" data-srcset="https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org-1024x453.jpg 1024w, https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org-680x301.jpg 680w, https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org-1536x679.jpg 1536w, https://www.numerama.com/wp-content/uploads/2021/06/wikipedia-org-2048x906.jpg 2048w" src="//www.numerama.com/wp-content/themes/project-n-theme/assets/images/default/default-post-image_420_213.jpg"></a><figcaption id="caption-attachment-721512" class="wp-caption-text">Wikipedia // Source : <a href="wikipedia.org">Wikipedia</a></figcaption></figure>
  79. <p>L’existence d’un seul et même Wikipedia pour ces quatre pays aurait largement été justifiée, étant donné qu’ils parlent tous serbo-croate. Mais ce qui a poussé les communautés à créer des Wikipedias séparés est une question d’alphabet : en Croatie, elle s’écrit avec le latin, alors qu’en Serbie, elle peut s’écrire soit avec l’alphabet cyrillique, soit avec le latin. Il fut donc décidé en 2003 de créer deux Wikipedia : celui de Croatie, avec l’alphabet latin, et Wikipedia Serbie, écrit en cyrillique. Les autres Wikipedias, monténégrin et bosnien, ont suivi. « <em>C’était une erreur</em> », reconnait aujourd’hui le rapport sur le sujet.</p>
  80. <p>L’existence de quatre Wikipedia différents dans cette région, encore profondément marquée par les récentes guerres, est tout sauf anodine. Et dans le cas de Wikipedia Croatie, l’encyclopédie est rapidement devenue le point de ralliement du groupe de nationalistes, dont le but était d’« <em> influencer les lecteurs et leurs visions de certains événements historiques</em> ». Le tout afin de faire valoir leur idéologie.</p>
  81. <ul><li><strong>À lire</strong> : <a class="gtm-a-lire" href="https://www.numerama.com/business/626945-comment-des-agences-de-e-reputation-ont-modifie-des-articles-wikipedia-pour-leurs-clients.html">Comment des agences de « e-réputation » ont modifié des articles Wikipédia pour leurs clients</a></li></ul>
  82. <h2>Un pouvoir sans partage pendant 10 ans</h2>
  83. <p>Le rapport décrit avec précision l’ascension du groupe d’administrateurs, des amis qui se connaissaient dans la vraie vie et partageaient les mêmes opinions politiques. <strong>Grâce à des actions menées en groupe, de la manipulation, de beaucoup de faux comptes, des scrutins truqués, et des campagnes d’intimidations en ligne et dans la vraie vie,</strong> ils se sont peu à peu retrouvé à des postes d’administrateur.</p>
  84. <p>Le rapport révèle entre autres que les membres du groupe étaient particulièrement bien organisés, et qu’ils avaient établi des stratégies afin de pouvoir agir et modifier les pages de l’encyclopédie sans éveiller les soupçons. Le groupe d’amis a rapidement réussi à occuper tous les postes de pouvoir au sein de Wikipedia Croatie, et a su le conserver à travers les années avec ces mêmes tactiques.</p>
  85. <p>Une fois au pouvoir, ils ont systématiquement fait taire et banni leurs opposants. Ils ont également utilisé leurs positions afin d’attirer un lectorat fidèle et de recruter de nouveaux contributeurs, qui partageaient leurs idées. Des techniques très semblables à celles observées dans les dictatures, note le rapport. « <em> Les administrateurs étaient convaincus que le but de Wikipedia Croatia était de refléter leur point de vue conservateur et nationaliste</em> », explique Wikimedia.</p>
  86. <h2>Plus d’une centaine d’articles manipulés</h2>
  87. <p>Une fois arrivés au pouvoir et en étant sûrs de le conserver, les administrateurs ont pu largement modifier le contenu de plus d’une centaine de pages Wikipedia. Tous les articles modifiés portent sur des moments et des sujets très sensibles de l’histoire de la Croatie et plus globalement de la région des Balkans.</p>
  88. <p>On trouve notamment, parmi plus d’une centaine d’exemples :</p>
  89. <ul>
  90. <li>un article sur <a href="https://fr.wikipedia.org/wiki/Camp_de_concentration_de_Jasenovac" rel="noopener" target="_blank">le camp de concentration de Jasenovac</a>, qui été simplement décrit comme un « <em>camp de travail</em> »,</li>
  91. <li>un article sur <a href="https://fr.wikipedia.org/wiki/Vjekoslav_Luburi%C4%87" rel="noopener" target="_blank">Vjekoslav Luburić</a>, le dirigeant du camp de concentration de Jasenovac, présenté comme un activiste politique,</li>
  92. <li>un article justifiant <a href="https://fr.wikipedia.org/wiki/Campagne_de_Pologne_(1939)" rel="noopener" target="_blank">l’attaque de la Pologne par Adolf Hitle</a>r par des attaques commises contre les Allemands par les Polonais,</li>
  93. <li>un article expliquant que l’Union européenne a manipulé le peuple croate pour le convaincre de <a href="https://fr.wikipedia.org/wiki/Adh%C3%A9sion_de_la_Croatie_%C3%A0_l%27Union_europ%C3%A9enne#:~:text=Le%20trait%C3%A9%20d'adh%C3%A9sion%20de,plus%20de%2066%20%25%20des%20voix." rel="noopener" target="_blank">rejoindre l’union</a>,</li>
  94. <li>des articles sur l’avortement, et sur la position de l’église catholique sur ce dernier, qui ont été majoritairement écrits en se basant sur des sources anti-avortement,</li>
  95. <li>des articles sur l’homosexualité qui ont été largement écrits en se basant sur des sources et des journaux promouvant une « <em>limitation des droits des personnes LGBT</em> »</li>
  96. <li>des articles sur les personnes reconnues coupables de crimes de guerre par le <a href="https://fr.wikipedia.org/wiki/Tribunal_p%C3%A9nal_international_pour_l%27ex-Yougoslavie" rel="noopener" target="_blank">Tribunal pénal international pour l’ex-Yougoslavie</a>, dans lequel cette information est cachée, ou dans lesquels il n’est pas fait mention qu’ils étaient croates.</li>
  97. </ul>
  98. <p>Quant aux articles créés, ils portent sur des concepts d’extrême droite :</p>
  99. <ul>
  100. <li>« Croatian silence », ou silence croate, une notion selon laquelle les sentiments nationalistes des Croates auraient été réprimés après la Seconde Guerre mondiale, pendant le régime yougoslave ;</li>
  101. <li>« Yugocommunist », qui décrit une conspiration contre l’état croate par les communistes yougoslaves après la Seconde Guerre mondiale.</li>
  102. </ul>
  103. <figure id="attachment_721550" aria-describedby="caption-attachment-721550" style="width: 1024px" class="wp-caption alignnone"><a href="https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp.jpg"><noscript><img src="https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp-1024x760.jpg" alt=""><style>.wp-image-721550.size-large{display:none;}</style></noscript><img loading="lazy" class="wp-image-721550 size-large" alt="" width="1024" height="760" sizes="(max-width: 1024px) 100vw, 1024px" data-src="https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp-1024x760.jpg" data-srcset="https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp-1024x760.jpg 1024w, https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp-680x505.jpg 680w, https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp-1536x1140.jpg 1536w, https://www.numerama.com/wp-content/uploads/2021/06/jasenovac-prisoners-enter-the-camp.jpg 1617w" src="//www.numerama.com/wp-content/themes/project-n-theme/assets/images/default/default-post-image_420_213.jpg"></a><figcaption id="caption-attachment-721550" class="wp-caption-text">Le camps de concentration de Jasenovac // Source : <a href="https://en.wikipedia.org/wiki/Jasenovac_concentration_camp#/media/File:Jasenovac_prisoners_enter_the_camp.jpg" rel="noopener" target="_blank">Wikimedia Commons</a></figcaption></figure>
  104. <p>En plus de tous ces articles manipulés, on retrouve aussi de très nombreuses approximations. De longs passages sont notamment réservés aux thèses négationnistes sur les camps de concentration ou sur les massacres commis pendant les conflits. L’article dédié au <a href="https://fr.wikipedia.org/wiki/Massacre_de_Srebrenica" rel="noopener" target="_blank">massacre de Srebrenica</a> existait quant à lui bel et bien, mais il n’était jamais mis en avant. Il n’était pas mentionné dans les pages des commanditaires et des militaires y ayant participé.</p>
  105. <h2>Une influence qui se fera sentir longtemps</h2>
  106. <p>Malgré des signalements, la Fondation Wikimedia ne s’est jamais vraiment impliquée dans la gestion de Wikipedia Croatie. Un appel à commentaires, organisé par la fondation, n’a jamais eu de résultats concluants à cause de la main mise du groupe d’extrême droite. « <em>Le manque d’intervention de la Fondation a directement poussé les utilisateurs modérés de la plateforme</em> », reconnait le rapport. Finalement, ce sont des internautes croates qui se sont unis pour enfin réussir à chasser le groupe d’administrateurs. Ils ont été définitivement bannis de Wikipedia en décembre 2020.</p>
  107. <p>Les nouveaux administrateurs sont depuis le début de l’année en train de remettre à jour les articles ci-dessus, mais c’est un long travail. « <em>La communauté a corrigé ou supprimé de très nombreuses approximations ou de mauvaises interprétations des faits</em> », note le rapport. « <em>Plusieurs articles, qui n’avaient pas d’autre but que de promouvoir l’idéologie d’extrême droite, ont été complètement supprimés.</em> »</p>
  108. <p>Mais malheureusement, les dégâts d’une décennie de gestion par le groupe d’extrême droite vont certainement se faire longtemps sentir : un examen des pages modifiées a trouvé qu’en 2017 et 2020, les articles écrits par le groupe d’administrateurs d’extrême droite étaient dans le top 30 des articles les plus lus sur Wikipedia Croatie.</p>
  109. <h2>Quel futur pour Wikipedia ?</h2>
  110. <p>Surtout, ce que le rapport de la Fondation retient, c’est qu’aucun des différents Wikipedias n’est à l’abri d’une telle attaque. « <em>Un groupe mieux organisé et avec plus de ressources serait très difficile à repérer, et à bannir</em> », conclut-il. « <em>Il est difficile d’imaginer qu’après avoir passé des années à produire du contenu, le groupe d’administrateurs bannis va simplement accepter de partir</em> », prévient également le rapport.</p>
  111. <p>Comment faire pour éviter qu’un tel scénario se reproduise ? « <em>Il faut retenir la leçon de Wikipedia Croatie, et ouvrir la voie à plus de contrôle par la communauté</em> », propose le rapport. Pour les Wikipedia dans les langues très parlées, qui comptent beaucoup d’articles et qui ont une forte communauté d’administrateurs, un appel à la communauté serait certainement un bon outil.</p>
  112. <p>Mais qu’en est-il pour les Wikipedias plus petits, dans des langues moins parlées ? Il suffit d’un rapide tour sur Wikipedia en khmer pour se rendre compte que <a href="https://km.wikipedia.org/wiki/%E1%9E%81%E1%9F%92%E1%9E%98%E1%9F%82%E1%9E%9A%E1%9E%80%E1%9F%92%E1%9E%9A%E1%9E%A0%E1%9E%98" rel="noopener" target="_blank">l’article dédié au régime des Khmers rouges</a> est très pauvre en informations. Elles ne sont pas fausses, mais les approximations et les oublis sont nombreux : il n’est jamais fait mention des camps de concentration installés dans tout le Cambodge à l’époque, et il n’est jamais écrit le fait que le régime a fait entre <a href="https://fr.wikipedia.org/wiki/Khmers_rouges#Massacres_et_pers%C3%A9cutions_raciales" rel="noopener" target="_blank">740 000 et 2 200 000 morts</a>.</p>
  113. </article>
  114. <hr>
  115. <footer>
  116. <p>
  117. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  119. </svg> Accueil</a> •
  120. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  122. </svg> Suivre</a> •
  123. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  125. </svg> Pro</a> •
  126. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  128. </svg> Email</a> •
  129. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  131. </svg> Légal</abbr>
  132. </p>
  133. <template id="theme-selector">
  134. <form>
  135. <fieldset>
  136. <legend><svg class="icon icon-brightness-contrast">
  137. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  138. </svg> Thème</legend>
  139. <label>
  140. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  141. </label>
  142. <label>
  143. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  144. </label>
  145. <label>
  146. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  147. </label>
  148. </fieldset>
  149. </form>
  150. </template>
  151. </footer>
  152. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  153. <script>
  154. function loadThemeForm(templateName) {
  155. const themeSelectorTemplate = document.querySelector(templateName)
  156. const form = themeSelectorTemplate.content.firstElementChild
  157. themeSelectorTemplate.replaceWith(form)
  158. form.addEventListener('change', (e) => {
  159. const chosenColorScheme = e.target.value
  160. localStorage.setItem('theme', chosenColorScheme)
  161. toggleTheme(chosenColorScheme)
  162. })
  163. const selectedTheme = localStorage.getItem('theme')
  164. if (selectedTheme && selectedTheme !== 'undefined') {
  165. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  166. }
  167. }
  168. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  169. window.addEventListener('load', () => {
  170. let hasDarkRules = false
  171. for (const styleSheet of Array.from(document.styleSheets)) {
  172. let mediaRules = []
  173. for (const cssRule of styleSheet.cssRules) {
  174. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  175. continue
  176. }
  177. // WARNING: Safari does not have/supports `conditionText`.
  178. if (cssRule.conditionText) {
  179. if (cssRule.conditionText !== prefersColorSchemeDark) {
  180. continue
  181. }
  182. } else {
  183. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  184. continue
  185. }
  186. }
  187. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  188. }
  189. // WARNING: do not try to insert a Rule to a styleSheet you are
  190. // currently iterating on, otherwise the browser will be stuck
  191. // in a infinite loop…
  192. for (const mediaRule of mediaRules) {
  193. styleSheet.insertRule(mediaRule.cssText)
  194. hasDarkRules = true
  195. }
  196. }
  197. if (hasDarkRules) {
  198. loadThemeForm('#theme-selector')
  199. }
  200. })
  201. </script>
  202. </body>
  203. </html>