A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 25KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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>Ce dont nous avons (vraiment) besoin (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.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134">
  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>Ce dont nous avons (vraiment) besoin</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.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p><span class="mot-lettrine"><span class="lettrine">L</span>a</span> transition écologique suppose de faire des choix de consommation. Mais sur quelle base<small class="fine"> </small>? Comment distinguer les besoins légitimes, qui pourront être satisfaits dans la société future, des besoins égoïstes et déraisonnables, qu’il faudra renoncer à assouvir<small class="fine"> </small>? C’est la question qu’aborde le <i>Manifeste négaWatt,</i> l’un des ouvrages d’écologie politique les plus stimulants parus récemment, rédigé par des spécialistes de l’énergie<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb1" class="spip_note" rel="appendix" title="Association négaWatt, Manifeste négaWatt. En route pour la transition (...)" id="nh1">1</a>)</span>. Un négawatt, c’est une unité d’énergie économisée — «<small class="fine"> </small>néga<small class="fine"> </small>» pour négatif. Grâce aux énergies renouvelables, à l’isolation du bâti ou au raccourcissement des circuits économiques, il est possible, selon les auteurs, de mettre sur pied un système économique qui soit écologiquement viable à l’échelle d’un pays, et même au-delà. À technologie constante, notre société renferme d’importants <i>«<small class="fine"> </small>gisements de négawatts<small class="fine"> </small>».</i></p>
  71. <p>Le consumérisme ambiant ne saurait perdurer, car il accroît en permanence les flux de matières premières et la consommation d’énergie. Ses effets aliénants sur les personnes ne sont de surcroît plus à démontrer. Une société «<small class="fine"> </small>négawatt<small class="fine"> </small>» est une société de la sobriété où des possibilités de consommation sont délibérément écartées car considérées comme néfastes. Mais sur quels critères<small class="fine"> </small>?</p>
  72. <p>Pour répondre à cette question, les auteurs du manifeste distinguent les besoins humains authentiques, légitimes, qu’il faudra donc continuer à satisfaire, et les besoins artificiels, illégitimes, dont il faudra se défaire. Le premier groupe comprend ceux qu’ils qualifient de <i>«<small class="fine"> </small>vitaux<small class="fine"> </small>», «<small class="fine"> </small>essentiels<small class="fine"> </small>», «<small class="fine"> </small>indispensables<small class="fine"> </small>», «<small class="fine"> </small>utiles<small class="fine"> </small>»</i> et <i>«<small class="fine"> </small>convenables<small class="fine"> </small>».</i> Le second, ceux qu’ils jugent <i>«<small class="fine"> </small>accessoires<small class="fine"> </small>», «<small class="fine"> </small>futiles<small class="fine"> </small>», «<small class="fine"> </small>extravagants<small class="fine"> </small>», «<small class="fine"> </small>inacceptables<small class="fine"> </small>», «<small class="fine"> </small>égoïstes<small class="fine"> </small>».</i></p>
  73. <p>Dès lors, deux problèmes apparaissent. D’abord, comment définir un besoin «<small class="fine"> </small>essentiel<small class="fine"> </small>»<small class="fine"> </small>? Qu’est-ce qui le distingue d’un besoin «<small class="fine"> </small>accessoire<small class="fine"> </small>» ou «<small class="fine"> </small>inacceptable<small class="fine"> </small>»<small class="fine"> </small>? Et ensuite, qui décide<small class="fine"> </small>? Quels mécanismes ou institutions conféreront une légitimité au choix de satisfaire tel besoin plutôt que tel autre<small class="fine"> </small>? Le <i>Manifeste négaWatt</i> ne dit rien à ce propos.</p>
  74. <p>Pour répondre à ces questions, il est bon de se tourner vers deux penseurs critiques et pionniers de l’écologie politique, André Gorz et Ágnes Heller.</p>
  75. <p>Dans les années 1960 et 1970, ils ont développé une théorie des besoins sophistiquée qui est d’une grande actualité<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb2" class="spip_note" rel="appendix" title="André Gorz, Stratégie ouvrière et néocapitalisme, Seuil, Paris, 1964, et Ágnes (...)" id="nh2">2</a>)</span>. L’un comme l’autre ont abordé ces questions à partir d’une réflexion sur l’aliénation, laquelle peut se mesurer à l’aune de besoins authentiques. En effet, on est aliéné par rapport à un état idéal auquel on cherche à revenir, ou que l’on cherche à atteindre enfin. La notion désigne le processus par lequel le capitalisme suscite des besoins artificiels qui nous éloignent de cet état. En plus d’être aliénants, la plupart de ces besoins sont écologiquement irréalistes.</p>
  76. <h3 class="spip"> Une tâche brûlante de notre temps </h3>
  77. <p>Qu’est-ce qu’un besoin «<small class="fine"> </small>authentique<small class="fine"> </small>»<small class="fine"> </small>? On pense bien sûr aux exigences dont dépendent la survie ou le bien-être de l’organisme : manger, boire ou se protéger du froid, par exemple. Dans les pays du Sud, et même du Nord, certains de ces besoins élémentaires ne sont pas satisfaits. D’autres, qui l’étaient autrefois, le sont de moins en moins. Jusqu’à récemment, respirer un air non pollué allait de soi<small class="fine"> </small>; c’est devenu difficile dans les mégapoles contemporaines. Il en va de même pour le sommeil. Aujourd’hui, la pollution lumineuse rend l’endormissement difficile pour nombre de personnes, l’omniprésence de la lumière dans les villes retardant la synthèse de la mélatonine (surnommée «<small class="fine"> </small>hormone du sommeil<small class="fine"> </small>»). Dans certains pays, la lutte contre la pollution lumineuse a suscité l’émergence de mouvements sociaux revendiquant un «<small class="fine"> </small>droit à l’obscurité<small class="fine"> </small>» et appelant à la création de «<small class="fine"> </small>parcs aux étoiles<small class="fine"> </small>» non pollués par la lumière artificielle<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb3" class="spip_note" rel="appendix" title="Cf. Marc Lettau, « Face à la pollution lumineuse en Suisse, les adeptes de (...)" id="nh3">3</a>)</span>.</p>
  78. <p>L’exemple de la pollution sonore parle également à nombre de citadins. On consacre des volumes croissants d’argent à l’isolation des logements, afin de satisfaire un besoin — le silence — autrefois gratuit. Ces dépenses nouvelles sont susceptibles de peser à la baisse sur le taux de profit, mais elles offrent simultanément des sources d’enrichissement, par exemple pour les entreprises spécialisées dans l’insonorisation.</p>
  79. <p>Tous les besoins «<small class="fine"> </small>authentiques<small class="fine"> </small>» ne sont pas d’ordre biologique. Aimer et être aimé, se cultiver, faire preuve d’autonomie et de créativité manuelle et intellectuelle, prendre part à la vie de la cité, contempler la nature... sur le plan physiologique, on peut certainement faire sans. Mais ces besoins sont consubstantiels à la définition d’une vie humaine digne d’être vécue. André Gorz les appelle <i>«<small class="fine"> </small>besoins qualitatifs<small class="fine"> </small>»</i><small class="fine"> </small>; Ágnes Heller, <i>«<small class="fine"> </small>besoins radicaux<small class="fine"> </small>».</i></p>
  80. <p>Les besoins qualitatifs ou radicaux reposent sur un paradoxe. En même temps qu’il exploite et aliène, le capitalisme génère à la longue un certain bien-être matériel pour des secteurs importants de la population. Il libère de ce fait les individus de l’obligation de lutter au quotidien pour assurer leur survie. De nouvelles aspirations, qualitatives, prennent alors de l’importance. Mais, à mesure qu’il monte en puissance, le capitalisme empêche leur pleine réalisation. La division du travail enferme l’individu dans des fonctions et des compétences étroites tout au long de sa vie, lui interdisant de développer librement la gamme des facultés humaines. De même, le consumérisme ensevelit les besoins authentiques sous des besoins factices. L’achat d’une marchandise satisfait rarement un vrai manque. Il procure une satisfaction momentanée<small class="fine"> </small>; puis le désir que la marchandise avait elle-même créé se redéploie vers une autre vitrine.</p>
  81. <p>Constitutifs de notre être, les besoins authentiques ne peuvent trouver leur satisfaction dans le régime économique actuel. C’est pourquoi ils sont le ferment de bien des mouvements d’émancipation. <i>«<small class="fine"> </small>Le besoin est révolutionnaire en germe<small class="fine"> </small>»,</i> dit André Gorz<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb4" class="spip_note" rel="appendix" title="André Gorz, La Morale de l’histoire, Seuil, Paris, 1959." id="nh4">4</a>)</span>. La quête de son assouvissement conduit tôt ou tard les individus à soumettre le système à la critique.</p>
  82. <p>Les besoins qualitatifs évoluent historiquement. Voyager, par exemple, permet à l’individu de se cultiver et de s’ouvrir à l’altérité. Jusqu’au milieu du XXe siècle, seules les élites voyageaient. Désormais, la pratique se démocratise. On pourrait définir le progrès social par l’apparition de besoins toujours plus enrichissants et sophistiqués, et accessibles au plus grand nombre.</p>
  83. <p>Mais des aspects néfastes apparaissent parfois en cours de route. Si le transport en avion proposé par les compagnies à bas coût contribue à rendre le voyage accessible aux classes populaires, il émet aussi une énorme quantité de gaz à effet de serre, et il détruit les équilibres des zones où les touristes se rendent en masse pour voir... d’autres touristes en train de regarder ce qu’il y a à voir. Voyager est devenu un besoin authentique<small class="fine"> </small>; il faudra pourtant inventer de nouvelles façons de se déplacer, adaptées au monde de demain.</p>
  84. <p>Si le progrès social induit parfois des effets pervers, des besoins à l’origine néfastes peuvent, à l’inverse, devenir viables avec le temps. Aujourd’hui, la possession d’un smartphone relève d’un besoin égoïste. Ces téléphones contiennent des «<small class="fine"> </small>minerais de sang<small class="fine"> </small>» — tungstène, tantale, étain et or notamment —, dont l’extraction occasionne des conflits armés et des pollutions graves. Ce n’est pourtant pas l’appareil lui-même qui est en question. Si un smartphone «<small class="fine"> </small>équitable<small class="fine"> </small>» voit le jour — le Fairphone semble en être une préfiguration<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb5" class="spip_note" rel="appendix" title="Lire Emmanuel Raoul, « Peut-on fabriquer un téléphone équitable ? », Le Monde (...)" id="nh5">5</a>)</span> —, il n’y a pas de raison que cet objet soit banni des sociétés futures. D’autant plus qu’il a donné lieu à des formes de sociabilité nouvelles, à travers l’accès continu aux réseaux sociaux ou grâce à l’appareil photographique qu’il intègre. Qu’il encourage le narcissisme ou génère des névroses chez ses utilisateurs n’est sans doute pas inévitable. En ce sens, on ne peut exclure que le smartphone, à travers certains de ses usages, se transforme progressivement en besoin qualitatif, comme le voyage avant lui.</p>
  85. <p>Selon André Gorz, la société capitaliste a pour devise : «<small class="fine"> </small>Ce qui est bon pour tous ne vaut rien. Tu ne seras respectable que si tu as “mieux” que les autres<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb6" class="spip_note" rel="appendix" title="Lire André Gorz, « Leur écologie et la nôtre », Le Monde diplomatique, avril  (...)" id="nh6">6</a>)</span>.<small class="fine"> </small>» On peut lui opposer une devise écologiste : «<small class="fine"> </small>Seul est digne de toi ce qui est bon pour tous. Seul mérite d’être produit ce qui ne privilégie ni n’abaisse personne.<small class="fine"> </small>» Aux yeux de Gorz, un besoin qualitatif a ceci de particulier qu’il ne donne pas prise à la «<small class="fine"> </small>distinction<small class="fine"> </small>».</p>
  86. <p>En régime capitaliste, la consommation revêt en effet une dimension ostentatoire. Acheter le dernier modèle de voiture revient à exhiber un statut social (réel ou supposé). Un beau jour, cependant, ce modèle passe de mode et son pouvoir distinctif s’effondre, provoquant le besoin d’un autre achat. Cette fuite en avant inhérente à l’économie de marché contraint les entreprises qui se concurrencent à produire des marchandises toujours nouvelles.</p>
  87. <p>Comment rompre avec cette logique de distinction productiviste<small class="fine"> </small>? Par exemple, en allongeant la durée de vie des objets. Une pétition lancée par Les Amis de la Terre exige que l’on fasse passer la garantie des marchandises de deux ans — une obligation inscrite dans le droit européen — à dix ans<span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb7" class="spip_note" rel="appendix" title="« Signez la pétition “Garantie 10 ans maintenant” », 24 octobre (...)" id="nh7">7</a>)</span>. Plus de 80<small class="fine"> </small>% des objets sous garantie sont réparés<small class="fine"> </small>; or ce pourcentage tombe à moins de 40<small class="fine"> </small>% une fois l’échéance passée. Moralité : plus la garantie est longue, plus les objets durent<small class="fine"> </small>; et plus la quantité de marchandises vendues et donc produites diminue, limitant par la même occasion les logiques de distinction, qui reposent souvent sur l’effet de nouveauté. La garantie, c’est la lutte des classes appliquée à la durée de vie des objets.</p>
  88. <p>Qui détermine le caractère légitime ou non d’un besoin<small class="fine"> </small>? Un risque apparaît ici, qu’Ágnes Heller appelle la <i>«<small class="fine"> </small>dictature sur les besoins</i><span class="spip_note_ref"> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134#nb8" class="spip_note" rel="appendix" title="Cf. Ferenc Fehér, Ágnes Heller et György Márkus, Dictatorship Over Needs, St. (...)" id="nh8">8</a>)</span><i><small class="fine"> </small>»,</i> comme celle qui prévalut en URSS. Si une bureaucratie d’experts autoproclamés décide de ce que sont les besoins «<small class="fine"> </small>authentiques<small class="fine"> </small>», et par conséquent les choix de production et de consommation, ceux-ci ont peu de chances d’être judicieux et légitimes. Pour que la population accepte la transition écologique, il faut que les décisions qui la sous-tendent emportent l’adhésion. Établir une liste de besoins authentiques n’a rien d’évident et suppose une délibération collective continue. Il s’agit donc de mettre en place un mécanisme qui vienne d’en bas, d’où émane démocratiquement une identification des besoins raisonnables.</p>
  89. <p>Difficile d’imaginer ce que pourrait être un tel mécanisme. En esquisser les contours constitue une tâche brûlante de notre temps, dont dépend la construction d’une société juste et viable. La puissance publique a certainement un rôle à jouer, par exemple en taxant les besoins futiles pour démocratiser les besoins authentiques, en régulant les choix des consommateurs. Mais encore faut-il convaincre de la futilité de nombreux besoins<small class="fine"> </small>; et, pour cela, il faut un dispositif situé au plus près des individus. Il s’agit d’extraire le consommateur de son tête-à-tête avec la marchandise et de réorienter la <i>libido consumandi</i> vers d’autres désirs.</p>
  90. <p>La transition écologique nous incite à fonder une démocratie directe, plus délibérative que représentative. L’adaptation des sociétés à la crise environnementale suppose de réorganiser de fond en comble la vie quotidienne des populations. Or cela ne se fera pas sans les mobiliser, sans s’appuyer sur leurs savoirs et leurs savoir-faire, et sans transformer dans un même mouvement les subjectivités consuméristes. C’est donc à une nouvelle «<small class="fine"> </small>critique de la vie quotidienne<small class="fine"> </small>» qu’il faut parvenir<small class="fine"> </small>; une critique élaborée collectivement.</p>
  91. </article>
  92. <hr>
  93. <footer>
  94. <p>
  95. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  96. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  97. </svg> Accueil</a> •
  98. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  99. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  100. </svg> Suivre</a> •
  101. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  102. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  103. </svg> Pro</a> •
  104. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  105. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  106. </svg> Email</a> •
  107. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  109. </svg> Légal</abbr>
  110. </p>
  111. <template id="theme-selector">
  112. <form>
  113. <fieldset>
  114. <legend><svg class="icon icon-brightness-contrast">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  116. </svg> Thème</legend>
  117. <label>
  118. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  119. </label>
  120. <label>
  121. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  122. </label>
  123. <label>
  124. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  125. </label>
  126. </fieldset>
  127. </form>
  128. </template>
  129. </footer>
  130. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  131. <script>
  132. function loadThemeForm(templateName) {
  133. const themeSelectorTemplate = document.querySelector(templateName)
  134. const form = themeSelectorTemplate.content.firstElementChild
  135. themeSelectorTemplate.replaceWith(form)
  136. form.addEventListener('change', (e) => {
  137. const chosenColorScheme = e.target.value
  138. localStorage.setItem('theme', chosenColorScheme)
  139. toggleTheme(chosenColorScheme)
  140. })
  141. const selectedTheme = localStorage.getItem('theme')
  142. if (selectedTheme && selectedTheme !== 'undefined') {
  143. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  144. }
  145. }
  146. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  147. window.addEventListener('load', () => {
  148. let hasDarkRules = false
  149. for (const styleSheet of Array.from(document.styleSheets)) {
  150. let mediaRules = []
  151. for (const cssRule of styleSheet.cssRules) {
  152. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  153. continue
  154. }
  155. // WARNING: Safari does not have/supports `conditionText`.
  156. if (cssRule.conditionText) {
  157. if (cssRule.conditionText !== prefersColorSchemeDark) {
  158. continue
  159. }
  160. } else {
  161. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  162. continue
  163. }
  164. }
  165. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  166. }
  167. // WARNING: do not try to insert a Rule to a styleSheet you are
  168. // currently iterating on, otherwise the browser will be stuck
  169. // in a infinite loop…
  170. for (const mediaRule of mediaRules) {
  171. styleSheet.insertRule(mediaRule.cssText)
  172. hasDarkRules = true
  173. }
  174. }
  175. if (hasDarkRules) {
  176. loadThemeForm('#theme-selector')
  177. }
  178. })
  179. </script>
  180. </body>
  181. </html>