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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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>
  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>L’emprise de la machine : une critique décroissanciste de la domination technique (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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script>
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://polemos-decroissance.org/lemprise-de-la-machine-une-critique-decroissanciste-de-la-domination-technique/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>L’emprise de la machine : une critique décroissanciste de la domination technique</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  63. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  64. </svg> Accueil</a> •
  65. <a href="https://polemos-decroissance.org/lemprise-de-la-machine-une-critique-decroissanciste-de-la-domination-technique/" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <p>Indépendamment de leurs allégeances politiques, beaucoup croient que la technique peut encore arranger les choses, nous sauver de la dévastation en cours.</p>
  70. <p>Du côté de la droite conservatrice, nous retrouvons la croyance économique qu’un peu de croissance c’est polluant, mais beaucoup de croissance c’est propre. Le développement économique va permettre des innovations peu polluantes. L’argent des pipelines qu’on construit va finalement servir à sauver la nature.</p>
  71. <p>Chez les progressistes, nous retrouvons plutôt l’opinion qui consiste à croire qu’il suffirait d’abolir le capitalisme pour abolir la mauvaise technique, c’est-à-dire celle qui est source d’exploitation, d’oppression, de misère et d’injustice. En somme, sans domination capitaliste, il serait possible d’orienter la technique vers le bien. Vers des idéaux de justice, d’équité et de solidarité.</p>
  72. <p>Mais de quelle technique parlons-nous ici? De celle réellement existante, nécessitant la technoscience? De celle fantasmée, qui serait sans effet secondaire ou dommages collatéraux, mais qui malheureusement appartient à la science-fiction et est impossible à produire? Ou, plus humblement, de technique plus artisanale et de low tech? Quoi qu’il en soit, peu importe le régime politique, il y a des conséquences aux choix techniques. Les téléphones « intelligents » qui ont besoin de métaux rares et difficiles à recycler ne seront pas plus verts sous le socialisme.</p>
  73. <h3><strong>Qu’est-ce que la technique?</strong></h3>
  74. <p>La technique, c’est avant tout une dimension de l’action des êtres vivants en tant qu’adaptés aux contraintes empiriques de la réalité. Pour attraper des mouches, l’araignée fabrique sa toile. Elle possède une bonne technique de tissage. La technique ne s’oppose pas à la nature. La technique, c’est la ruse de l’animal. Certains animaux utilisent en effet des outils et se servent de techniques. Il s’agit donc essentiellement d’un phénomène non spécifique aux êtres humains. Certaines fourmis ont des techniques de culture de champignons, mais l’araignée et les fourmis ne possèdent pas de machines pour tisser et cultiver. Se servir d’outils et utiliser des machines, ce n’est pas du tout la même chose.</p>
  75. <p>En fait, la technique ne devient un problème qu’à partir de l’ère industrielle et du moteur thermique; qu’à partir du moment où, au nom du progrès et de la raison, les machines ont remplacé les outils.</p>
  76. <p>Il ne s’agit pas d’être technophobe. Il serait absurde de remettre en question les moyens que les animaux se donnent pour vivre. Il s’agit plutôt de distinguer entre la technique, entendue comme phénomène naturel, comme moyen au sens large, et la technique entendue comme phénomène associé à l’époque industrielle : la technique objectivée en tant que machine, la machine thermique, la machine à vapeur comme synthèse de la science et de la technique.</p>
  77. <p>L’outil est une extension de la main, alors que la machine est, quant à elle, « émancipée de la limite organique que ne pouvait dépasser l’outil manuel » . La machine permet de dépasser en quelque sorte les limites du corps.</p>
  78. <p>Le monde préindustriel était lui aussi un milieu technique pour l’humain, mais qui ne tendait pas à se substituer à la nature. Auparavant, comme le dit Mandosio « [l]e système des artefacts ne s’était pas encore imposé comme une seconde nature ». L’humanité avait d’autres projets que celui de remplacer la nature par un monde totalement artificiel. Mais aujourd’hui, « bien rares sont les activités [quotidiennes] qui n’ont pas besoin d’une machine » quelque part pour exister concrètement. Nous sommes devenus des créatures de la technique de plus en plus dépendantes de cette seconde nature.</p>
  79. <h3><strong>Critique de la neutralité de la technique</strong></h3>
  80. <p>Un des arguments philosophiques importants de la critique décroissanciste du machinisme et de la place croissante du high-tech concerne l’identification erronée de la technique moderne à un moyen neutre.</p>
  81. <p>En effet, on entend souvent à propos des conséquences de telles ou telles techniques : le problème, ce n’est pas la technique, le problème c’est l’usage humain de la technique. Tout dépend de l’usage que l’on en fait. Bien entendu, un marteau peut servir à tuer quelqu’un ou à construire un hôpital. Ce n’est pas le fusil qui est dangereux, c’est l’homme derrière.</p>
  82. <p>Mais malheureusement pour ceux qui la défendent, cette thèse ne tient pas la route. Nous ne sommes plus à l’époque des marteaux, à l’époque des outils qui ne se meuvent pas eux-mêmes (Aristote). Nous sommes à l’époque de machines produisant d’autres machines.</p>
  83. <p>Les éléments et artefacts qui composent aujourd’hui notre environnement sont interdépendants. C’est pourquoi l’on ne peut plus considérer la technique comme un moyen. « Ce système des instruments est notre monde ». Les artefacts techniques qui composent ce monde ne sont pas des îles isolées. Votre téléphone cellulaire a besoin d’antennes, de satellites et de bien d’autres choses pour fonctionner.</p>
  84. <p>La technique moderne est insécable; il est devenu impossible de parler de bonnes ou de mauvaises techniques, puisque qu’il existe une interdépendance entre les différents processus qui rendent possible l’existence des objets qui nous entourent.</p>
  85. <p>C’est pourquoi il nous est désormais impossible de considérer les objets techniques, les machines produites par l’industrie comme des moyens. À vrai dire, aucune d’entre elles ne peut être isolée et détachée de l’ensemble du système des machines produites de manière industrielle. On a toujours affaire à des produits et à des objets techniques qui n’ont aucune existence indépendante, qui ne sont pas des objets insulaires, ni des outils neutres. « Acheter une voiture c’est, plutôt que d’acheter un objet, acheter une civilisation, c’est acheter aussi la route, le stationnement, les bétonnières et les règlements de la circulation ». Il faut sortir du mythe qui affirme que la technique ne vaut que par l’usage que l’on en fait, comme s’il y avait une bonne et une mauvaise utilisation de la voiture. Au contraire, la technique a des conséquences positives et négatives indépendamment de l’usage. Que je conduise ma voiture en ville ou en campagne, je pollue quand même.</p>
  86. <h3><strong>Les limites du progrès technique</strong></h3>
  87. <p>Selon Ellul, « Tout progrès technique implique aussi une perte, un coût ». Par exemple, la chimie de l’agriculture industrielle permet d’augmenter la production, mais détruit le sol. Les antennes relais sont un progrès dans les moyens de communication, mais ruinent le paysage. Sans compter que d’une manière générale, avec les machines, « nous devons payer en contraintes de fonctionnement ce que nos sociétés gagnent en liberté apparente au niveau de leurs objectifs. Plus la société est apparemment maîtresse de ses objectifs moins elle l’est de ses processus ». Les choix techniques d’une société ont des conséquences sur la contrainte sociale et l’assujettissement des individus.</p>
  88. <p>« Le progrès technique soulève des problèmes plus difficiles que ceux qu’il résout ». L’aliénation des travailleurs en est un bon exemple : « Marx a parfaitement montré que la transformation des ouvriers en prolétariat est non seulement le fait de capitalistes qui veulent absolument augmenter leur profit, mais avant tout le résultat de la mécanisation et de la division du travail. C’est-à-dire deux progrès techniques ».</p>
  89. <p>La crise écologique, démographique, sociale est également une conséquence du progrès technique et pas seulement du capitalisme. Et une émancipation éventuelle vis-à-vis de ce dernier n’est pas synonyme d’une libération de notre dépendance à la puissance que nous  procurent les machines.</p>
  90. <p>« Les effets néfastes d’une technologie sont inséparables de ses effets positifs ». Il est plus facile d’illuminer les villes que de protéger ses habitants contre la pollution lumineuse.</p>
  91. <p>Les solutions techniques produisent en général d’autres problèmes (ailleurs sur la planète ou plus tard dans le temps) qui conditionnent encore davantage d’interventions techniques, nous installant ainsi, de force, toujours un peu plus sur les rails d’une trajectoire technologique au destin catastrophique.</p>
  92. <p>L’illusion d’un contrôle du monde par la technique crée toujours plus de nécessité de contrôle sur le monde. En tentant de résoudre les dégâts technologiques par d’autres innovations technologiques, on s’enfonce davantage dans la domination. La technique « n’est [alors] plus un simple moyen au service des objectifs et des valeurs de la collectivité, mais devient l’horizon indépassable du système ».</p>
  93. <p>Si Kant « trouvait inconcevable que la marche de l’humanité pût ressembler à la construction d’une demeure que seule la dernière génération aurait le loisir d’habiter », de nos jours, cette ruse de l’histoire s’est inversée et ce sont plutôt les générations futures qui se destinent à ne pas pouvoir jouir autant que nous des bienfaits de la marche de la raison et du progrès.</p>
  94. <p>Aujourd’hui, la célèbre formule de Marx, « Les philosophes n’ont fait qu’interpréter le monde de diverses manières, ce qui importe, c’est de le transformer » est dépassée. Nous avons tellement transformé le monde par la technique et l’économie que nous pouvons de moins en moins y vivre humainement. Désormais, il ne s’agit plus de le transformer, mais de le conserver.</p>
  95. <p>La technologie permet d’augmenter l’accès aux ressources et donc de faciliter le pillage. Elle permet de produire plus; plus vite, et d’accélérer la destruction. Avec les technologies de pointe nous pouvons vider les mers plus rapidement de leur poisson ou couper plus de bois dans une forêt. Malheureusement, il est plus facile de produire des satellites qui peuvent détecter les continents de plastique dans l’océan que de nettoyer l’océan de son plastique.</p>
  96. <p>Déconstruisons notre imaginaire progressiste, car il y a beaucoup de problèmes qui ne peuvent pas et ne pourront jamais être résolus dans le cadre du développement technique. La nature est notamment constituée d’éléments (l’eau, un paysage…) qui ne peuvent être remplacés de façon satisfaisante par aucune avancée technologique.</p>
  97. <p>C’est une illusion de croire, par exemple, que les énergies renouvelables de type solaire ou éolien peuvent remplacer les énergies fossiles sans diminuer radicalement notre consommation globale d’énergie, sans changer notre mode de vie, sans changer notre mode de production et de consommation. L’Anthropocène dévoile les limites de Prométhée.</p>
  98. <h3><strong>Responsabilité et aliénation à l’ère de la machine</strong></h3>
  99. <p>Marx avait déjà constaté que « la machine n’a plus rien de commun avec l’instrument du travailleur individuel. Elle se distingue tout à fait de l’outil qui transmet l’activité du travailleur à l’objet. En effet, l’activité se manifeste bien plutôt comme le seul fait de la machine, l’ouvrier surveillant l’action transmise par la machine aux matières premières et la protégeant contre les dérèglements ».</p>
  100. <p>Si l’activité se manifeste comme le seul fait de la machine, ce n’est donc plus le travailleur qui agit. Ce point est capital. Car agir veut dire: être le sujet de son action. Être soi-même l’origine de son action. Obéir ou collaborer, ce n’est pas agir volontairement.</p>
  101. <p>On voit donc ici que la machine implique une possession de l’activité. L’ouvrier est soumis au capital par la machine, car la machine qui est du travail humain passé, matérialisé, du travail mort, du capital, permet la soumission du travail concret, du travail vivant au travail abstrait au service de la valeur. Avec la machinerie, « le travail vivant se trouve subordonné au travail matérialisé, qui agit de manière autonome. Dès lors l’ouvrier est superflu », nous dit Marx.</p>
  102. <p>Superflu n’a pas ici le sens de la disparition de l’ouvrier comme travailleur relégué au chômage, quoique ce ne soit pas incompatible, mais plutôt le sens de l’effacement du sujet responsable de son action. Superflu signifie dans cette situation, une perte d’autonomie du travailleur au profit des machines, de la technique.</p>
  103. <p>Traditionnellement, agir ce n’est pas seulement collaborer ou être complice d’un déclenchement automatique. Comparativement, les machines semblent dissoudre l’action autonome, ou du moins, changer son lieu d’origine. C’est la technique qui devient autonome au sens où c’est elle qui recueille l’autonomie humaine. Autonomie veut dire ici que ce sont des machines qui produisent d’autres machines et les humains deviennent des appendices des machines, servent les machines et ne peuvent plus de ce fait agir dans un sens classique. Comme dit Freitag « c’est le système qui produit, alors que les êtres humains produisent le système de l’intérieur en en faisant immédiatement partie, en s’intégrant à son fonctionnement. On passe ainsi de l’activité humaine assistée par ordinateur, aux systèmes informatisés assistés par des êtres humains ».</p>
  104. <p>Cette situation a des conséquences normatives importantes. L’éthique traditionnelle portant sur la moralité des actions devient obsolète puisque les actions sous le règne des machines se font de plus en plus rares, remplacées par une collaboration, un travail au service de la machine. Nous nous retrouvons en déficit d’éthique par cause d’actes qui n’en sont pas vraiment et d’impacts,  plus grands que leurs causes. Par exemple, allumer l’interrupteur participe de l’écocide. Quelle est la différence alors entre allumer l’interrupteur et être complice de l’industrie? Le crime contre le climat n’est que l’effet de notre consommation quotidienne à l’échelle globale, une externalité, en somme, de l’utilisation des machines.</p>
  105. <p>La médiation des machines ne nous permet plus de savoir ce que l’on fait. Il existe un abîme entre ce que nous pouvons faire et ressentir, une distance entre ce que nous pouvons modifier et ce dont nous pouvons prendre conscience. Nous ne pouvons assumer les conséquences de nos actions. Se procurer un cellulaire c’est aussi en toute innocence « exploiter des mineurs au Congo, détruire des forêts primaires de Papouasie, enrichir des oligarques russes, polluer des nappes phréatiques chinoises ».<strong> </strong>La technique et la division du travail diluent la responsabilité. « Divisée par mille la saleté est propre ».</p>
  106. <p>Nous ne pouvons plus penser ce que nous pouvons faire avec un clic de souris. Nul besoin de haine pour faire du mal, le négatif s’introduit par les réseaux. Par exemple, écouter une émission, taper des mots sur Google, bref, n’importe quoi d’accompli dans le temps libre dans le monde virtuel aujourd’hui peut être potentiellement une information vendue pour de la publicité ciblée au bénéfice de la reproduction du capitalisme cybernétique. La vie humaine devenant ainsi instrumentalisée par la machine.</p>
  107. <p>Un des aspects déterminants des machines c’est que leur fonctionnement nécessite des soins qui transforment la société tout entière. Il faut les approvisionner grâce à des réseaux de plus en plus complexes. La rationalisation et le contrôle social suivent la production des machines. Comme le résume Anders « le bon fonctionnement d’une machine requiert irrévocablement le devenir machine de son contexte de production » c’est-à-dire de la société.</p>
  108. <p>Au nom de l’efficacité, la machine transforme la société à son image et dissout l’altérité. Il n’y a plus partout que des miroirs de cette seconde nature technique de nous-mêmes. La puissance du rationnel se retourne dangereusement en rationalité de la puissance au service de procès sans sujet, sans paroles et sans légitimité. Un danger d’enfermement et de solipsisme technologique nous guette.</p>
  109. <p>Bien que la parole humaine et la vie politique aient encore un sens dans la société technocratique, celui-ci est de moins en moins utile et nécessaire à la reproduction d’ensemble de la société puisque nous pouvons « produire des instruments à travers le fonctionnement desquels nous nous rendons superflus, nous nous éliminons, nous nous  « liquidons » ».</p>
  110. <p>Les algorithmes qui cadencent les marchés et les robots qui s’appliquent à la bourse impliquent une reproduction de la société qui s’effectue « sans nous ». Par ces machines interconnectées, le monde se reproduit au-dessus de nos têtes.</p>
  111. <p>Dans l’état actuel « le développement du système des machines échappe à tout contrôle direct de notre volonté, à toute expression de notre désir, à tout engagement de notre responsabilité ». Pour leur mise en place, les machines préfèrent l’extériorité brutale des régulations de la technique et de l’économie autonomisées aux délibérations démocratiques.</p>
  112. <p>Pourtant la technique, comme l’économie, c’est aussi une affaire politique qui concerne la cité. Les questions d’intérêts publics ne doivent plus être liées seulement (comme dans la gauche progressiste traditionnelle) à qui produit (rapport de classes) et comment on produit (rapport de production). On doit aussi interroger la légitimité de ce que l’on produit matériellement dans nos sociétés thermo-industrielles.</p>
  113. <h3><strong>L’alternative à l’hégémonie sociale du machinisme : les low-tech</strong></h3>
  114. <p>Parmi les propositions que la décroissance avance pour réduire notre empreinte écologique, les inégalités sociales, et notre aliénation il y a le développement des low tech ou basse technologie. Le high-tech et ses effets délétères sur la nature et la société ne sont pas un destin. Il faut concevoir qu’il est possible de se déplacer sans pétrole, de se loger sans ciment, de se nourrir sans agriculture industrielle, et de s’instruire avec un livre.</p>
  115. <p>Les critères pour définir une basse technologie sont le respect des valeurs de la décroissance : une technique qui a peu d’impact sur le système terre; une technique conviviale et égalitaire non dominatrice et une technique favorisant notre autonomie, favorisant l’autoproduction.</p>
  116. <p>Le low tech se doit d’être soutenable pour l’environnement. Une technique soutenable, c’est une technique qui n’utilise pas de ressources non renouvelables ou non recyclables et qui ne produit pas de déchets non absorbables ou récupérables. C’est une technique qui ne produit pas d’externalités négatives. C’est-à-dire que son utilisation par certains ne nuit pas aux autres. Par exemple, en me déplaçant à bicyclette, je n’inflige pas aux autres les conséquences négatives de la pollution atmosphérique puisque ce moyen de déplacement n’en produit pas à l’usage. Par contre, en utilisant une voiture je nuis à tout le monde. André Gorz résume bien ce qui doit orienter la production et la technique : « 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 ». Mais même si elles sont soutenables et ne provoquent pas d’injustice, pour ne pas être qualifiées d’aliénantes et respecter les critères de la décroissance, il importe que ces techniques ne nous remplacent pas, ne travaillent pas à notre place, et ne prennent pas toute la place. Développées avec des moyens locaux, elles sont simples, recyclables, réparables; modulables, contrôlables, conviviales, sobres en ressources et économes en énergie. Ce sont des outils permettant de développer l’autoproduction et l’autonomie de leurs utilisateurs, bref, de favoriser une liberté nouvelle, indépendante de la propriété et de la puissance.</p>
  117. </article>
  118. <hr>
  119. <footer>
  120. <p>
  121. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  122. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  123. </svg> Accueil</a> •
  124. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  125. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  126. </svg> RSS</a> •
  127. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  128. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  129. </svg> Pro</a> •
  130. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  131. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  132. </svg> Email</a> •
  133. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  134. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  135. </svg> Légal</abbr>
  136. </p>
  137. <template id="theme-selector">
  138. <form>
  139. <fieldset>
  140. <legend><svg class="icon icon-brightness-contrast">
  141. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  142. </svg> Thème</legend>
  143. <label>
  144. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  145. </label>
  146. <label>
  147. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  148. </label>
  149. <label>
  150. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  151. </label>
  152. </fieldset>
  153. </form>
  154. </template>
  155. </footer>
  156. <script>
  157. function loadThemeForm(templateName) {
  158. const themeSelectorTemplate = document.querySelector(templateName)
  159. const form = themeSelectorTemplate.content.firstElementChild
  160. themeSelectorTemplate.replaceWith(form)
  161. form.addEventListener('change', (e) => {
  162. const chosenColorScheme = e.target.value
  163. localStorage.setItem('theme', chosenColorScheme)
  164. toggleTheme(chosenColorScheme)
  165. })
  166. const selectedTheme = localStorage.getItem('theme')
  167. if (selectedTheme && selectedTheme !== 'undefined') {
  168. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  169. }
  170. }
  171. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  172. window.addEventListener('load', () => {
  173. let hasDarkRules = false
  174. for (const styleSheet of Array.from(document.styleSheets)) {
  175. let mediaRules = []
  176. for (const cssRule of styleSheet.cssRules) {
  177. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  178. continue
  179. }
  180. // WARNING: Safari does not have/supports `conditionText`.
  181. if (cssRule.conditionText) {
  182. if (cssRule.conditionText !== prefersColorSchemeDark) {
  183. continue
  184. }
  185. } else {
  186. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  187. continue
  188. }
  189. }
  190. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  191. }
  192. // WARNING: do not try to insert a Rule to a styleSheet you are
  193. // currently iterating on, otherwise the browser will be stuck
  194. // in a infinite loop…
  195. for (const mediaRule of mediaRules) {
  196. styleSheet.insertRule(mediaRule.cssText)
  197. hasDarkRules = true
  198. }
  199. }
  200. if (hasDarkRules) {
  201. loadThemeForm('#theme-selector')
  202. }
  203. })
  204. </script>
  205. </body>
  206. </html>