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.

index.html 24KB

hace 3 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  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’asymptote du dépressif (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://prototypekblog.wordpress.com/2021/02/25/lasymptote-du-depressif/">
  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’asymptote du dépressif</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://prototypekblog.wordpress.com/2021/02/25/lasymptote-du-depressif/" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <p>J’ai relu des définitions canoniques de la dépression. J’ai retrouvé, par hasard, une brochure estampillée Ministère de la Santé, datée de 2007, probablement chipée sur un présentoir dans un service de médecine du travail, je ne sais plus quand. Elle trainait au fond d’un tiroir. Elle est intitulée : « La dépression : En savoir plus pour en sortir ».</p>
  70. <p>J’ai toujours du mal à me reconnaître comme souffrant de dépression, parce que ces définitions présentent généralement ce mal comme un épisode. Il y a un début, un milieu, une fin. Il y a des causes et des conséquences. Il y a un déclencheur. Il y a un changement, un passage de l’état « non-dépressif » à l’état « dépressif ». Et il y a un autre changement, qui sera le passage de l’état « dépressif » à l’état « non-dépressif ». Le début, comme la fin, peut prendre du temps, mais au bout d’un moment le changement est net. Il y a un « avant », un « pendant », un « après ». Il y a le moment où on tombe, et le moment où on se relève. Il y a la merveilleuse promesse d’une guérison – j’ai envie d’écrire : la promesse d’une rédemption.</p>
  71. <p>Mon expérience est différente, pour ce qu’elle vaut.</p>
  72. <p>Mon expérience de mon mal, c’est que je n’en guéris pas. Pas complètement. Pas définitivement.</p>
  73. <p>Mon expérience, c’est qu’il peut certes y avoir des parenthèses, des rémissions, des apaisements, plus ou moins longs, mais il n’y a pas vraiment eu de début, et il n’y a jamais eu de vraie fin.</p>
  74. <p>C’est principalement pour cela que j’aurai toujours une hésitation, un doute, un scrupule à me définir comme « dépressif ». Je n’utilise ce mot que, comme tant d’autres, faute de mieux.</p>
  75. <blockquote><p>Belbo était désormais un adepte. Comme tout le monde, non par illumination, mais faute de mieux.</p></blockquote>
  76. <h2>Limites</h2>
  77. <p>Je ne sais pas quand était le début.</p>
  78. <p>Je suis incapable de vous dire depuis quand je suis comme ça, périodiquement. Je ne sais pas quand ça a commencé. Je ne sais pas. La <a href="https://wp.me/p2Y5zY-1g7">Grande École</a> ? Évidemment, mes congénères en témoigneront volontiers, mais ça n’a pas commencé là, ça remonte à plus loin. L’adolescence ? Probablement. Un peu avant ? Encore avant ? Depuis toujours ? Est-ce que ce n’était pas déjà programmé avant même que je ne vienne au monde ? Je sais, ça semble absurde, mais il m’est arrivé de réfléchir à une telle hypothèse. Born to gloom.</p>
  79. <p>Je sais qu’il n’y aura pas de fin.</p>
  80. <p>Il n’y a jamais eu de guérison pleine et entière, et il n’y en aura jamais. Je me suis plusieurs fois cru sorti d’affaire, guéri, libéré, délivré ; et j’ai été rattrapé par ma réalité ensuite. J’y ai cru, j’y ai cru très fort. J’ai voulu y croire, j’ai voulu y croire tellement fort. Je n’y crois plus du tout. Il y a des périodes où ça va un peu mieux, il y en a eu, il y en aura d’autres, elles existent, elles peuvent être même assez longues, mais à l’horizon il y aura toujours une rechute. Toujours. La rechute est l’horizon indépassable du dépressif.</p>
  81. <p>Je sais qu’il n’y a pas de limite en bas.</p>
  82. <p>Il n’y a pas de plancher. Il n’y a pas de fond de la piscine, une paroi contre laquelle on peut rebondir. Il m’est arrivé d’être très bas, mais je ne me souviens pas avoir jamais ressenti « toucher le fond ». J’ai juste eu de la chance, ou de la persévérance, ou les deux, et je me suis aperçu a posteriori que j’étais remonté. Je n’ai jamais senti de fond. Plus on est bas, moins on est retenu. Plus on est bas, plus on réalisé à quel point il est facile de descendre encore plus bas. Je pense qu’il n’y a pas de fond. Il n’y a rien qui puisse rattraper un homme qui tombe.</p>
  83. <p>Il m’est arrivé d’être quasiment à l’arrêt, incapable de me lever, plus envie de rien, plus capable de rien – comme c’est souvent décrit dans la littérature spécialisée. Mais je ne suis pas à l’arrêt en ce moment : je me lève tous les matins, je travaille, j’agis, je ne suis pas effondré toute la journée. Les vagues déferlent les unes après les autres, et puis entre les vagues je surnage. Les apparences sont presque sauves. C’est pour ça que je ne peux pas me considérer vraiment comme dépressif. C’est pour ça que je me soupçonne parfois de n’être qu’un imposteur, un faux-dépressif, un simulateur, un enfant gâté qui fait son intéressant, et toutes ces sortes de choses. Je ferais mieux de me taire : tout ça c’est dans ma tête, juste dans ma tête.</p>
  84. <p>Je suis bas, mais pas si bas. Je sais que je pourrais être plus bas. Ce serait peut-être plus cohérent, plus franc, plus lisible. Mais je ne veux pas. Je ne veux pas tomber plus bas. Mais je sais que c’est possible. J’y ai déjà été. Je sais qu’il y a aussi plus bas encore. Je ne veux pas y aller. Je ne veux pas devenir fou, prostré ou dangereux. Je ne veux pas tout ça. Mais ça peut m’arriver. Rien ne s’oppose à la nuit.</p>
  85. <p>Je sais qu’il y a une limite en haut.</p>
  86. <p>Il y a un plafond – un plafond de verre, comme on dit maintenant, invisible, mais bien réel. Ayant quelques vagues souvenirs de mathématiques, j’appelle ça une asymptote. Ça peut aller mieux, ça pourra aller mieux, mais ça n’ira jamais au-delà d’un certain mieux. Ça ne disparaîtra jamais complètement. Ça ne sera jamais complètement oublié, complètement absent des préoccupations. Ça sera toujours là, comme une chaîne, un boulet, un poids. Au pire, ça me tire vers le bas ; au mieux, ça m’empêche d’aller bien haut.</p>
  87. <p>J’appelle ça « l’asymptote du dépressif ». Ce concept n’engage que moi. Ceci n’est qu’un blog. Et cette limite en haut est le sujet de ce billet.</p>
  88. <p>Ce mal, peu importe son nom, je ne m’en débarrasserai jamais. Et une de ses caractéristiques principales, c’est qu’il m’empêchera toujours de dépasser un certain niveau de sérénité, d’épanouissement, de bien-être. Il n’y aura pas de rédemption, jamais. Il n’y aura pas de grands horizons, jamais.</p>
  89. <p>À tout moment, une rechute est possible. Il n’y a pas de limite en bas. Le fond peut être très très bas. Croyez-moi, ces derniers mois, j’ai recommencé à regarder très très loin vers le bas, et je ne souhaite ça à personne.</p>
  90. <p>Je peux toujours espérer une remontée. Je sais que c’est possible. Je lutte perpétuellement pour essayer de remonter. J’ai vécu des belles remontées. Je frissonne quand je pense à la naissance de ma fille. J’ai les larmes aux yeux quand je pense à la séquence qui va du <a href="https://wp.me/p2Y5zY-1lq">printemps 2019</a> à l’<a href="https://wp.me/p2Y5zY-1pT">hiver 2020</a>. J’y ai cru. J’y étais presque. J’ai cru que je pouvais devenir heureux. Je me suis senti tellement mieux. J’ai vu tellement de choses avec des couleurs différentes. Je n’ai pas pris le temps de les écrire, mais je les ressentais. J’ai ressenti tellement de lumière. J’y étais presque. J’y étais presque.</p>
  91. <p>Peut-être y aura-t-il d’autres remontées. Probablement. Sûrement. Tout cela est cyclique. La vie est cyclique. Des jours heureux reviendront. Je remonterai.</p>
  92. <p>Mais je sais, je dois savoir, je ne peux pas ignorer qu’il y a une limite en haut. Une limite infranchissable. Une asymptote. Tout ce qui est au-delà est hors de portée pour moi. Et <a href="https://wp.me/p2Y5zY-W3">la petite bête</a> sera toujours là. Je dois, pour reprendre une terrible expression très à la mode : « vivre avec ». (Parenthèse : Je déteste l’expression « vivre avec » dans le contexte actuel (Covid-19), ça sera le sujet d’un prochain billet. Fin de la parenthèse. )</p>
  93. <h2><a href="https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg"><img loading="lazy" data-attachment-id="6042" data-permalink="https://prototypekblog.wordpress.com/2021/02/25/lasymptote-du-depressif/moins-un-sur-x/" data-orig-file="https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg" data-orig-size="660,440" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="Moins un sur x" data-image-description="" data-medium-file="https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg?w=300" data-large-file="https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg?w=640" class="alignnone size-full wp-image-6042" src="https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg?w=640&amp;h=427" alt="" srcset="https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg?w=640&amp;h=427 640w, https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg?w=150&amp;h=100 150w, https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg?w=300&amp;h=200 300w, https://prototypekblog.files.wordpress.com/2021/02/moins-un-sur-x.jpg 660w" sizes="(max-width: 640px) 100vw, 640px"></a></h2>
  94. <h2>Vivre sous l’asymptote des dépressifs</h2>
  95. <p>Je ne passerai jamais de l’autre côté de l’axe des abscisses.</p>
  96. <p>Peut-être que je me trompe. Peut-être que c’est le mal qui me fait penser ça. Peut-être que l’avenir me donnera tort. J’espère que l’avenir me donnera tort. Je l’espère de tout mon cœur. Mais je n’y crois pas.</p>
  97. <p>Je ne passerai jamais du bon côté du monde.</p>
  98. <p>Le mieux que je puisse espérer, c’est ce bout de phrase que j’ai beaucoup utilisé ces dernières années, notamment entre le printemps 2019 et l’hiver 2020 : « J’y suis presque ». Ce mot : « presque ». Presque. Presque !</p>
  99. <p>Presque guéri, mais jamais complètement. J’y étais presque. J’y serai presque, à nouveau, un autre jour. Ça reviendra.</p>
  100. <p>Mais il faut que j’accepte l’idée que je ne guérirai jamais. Je vivrai toujours avec ça. La peur de la rechute, la peur du vide ; et le plafond de verre, l’asymptote du dépressif, qui me rattrapera, toujours, tôt ou tard.</p>
  101. <p>Il y aura toujours un « presque », il y aura toujours une limite, je ne ferai jamais mieux que cette asymptote, j’irai jamais au-delà. C’est déjà pas si mal. Ça pourrait être pire. Ça pourrait être tellement pire.</p>
  102. <p>En un sens, paradoxalement, me cogner au plafond de verre, me retrouver dans le « presque », c’est ce qui peut m’arriver de mieux. Pouvoir me dire « je suis presque bien », ce serait ma plus grande victoire possible.</p>
  103. <p>Encore une fois, je n’aime pas parler de « dépression », et encore moins de maladie, parce que cela me parait pour tout dire indécent de comparer ma situation objective de privilégié (bien-portant, cadre, en télétravail, etc.) avec les situations autrement plus difficiles de millions de gens, souffrant de malheurs et de pathologies bien plus objectives, factuelles et terribles.</p>
  104. <p>Combien de millions de gens dans ce pays vivent avec un handicap, un cancer, un diabète, une sclérose en plaques – bref, une « vraie » maladie, une « vraie » pathologie, une « vraie » fragilité ? Combien de millions de gens savent vraiment ce que « vivre avec » veut dire ? Qui suis-je pour oser me plaindre ?</p>
  105. <p>Dans sa chronique pour Libération en date du 10 février 2021, intitulée « <a href="https://www.liberation.fr/societe/sante/covid-et-individus-fragiles-nous-sommes-ce-que-vous-ne-voulez-pas-voir-20210210_PDALSNTIGJFCLB3HBBAHXANBKU/">Covid et individus fragiles : « Nous sommes ce que vous ne voulez pas voir »</a> », le très admiré Dr Christian Lehmann cède la parole à Marie, 47 ans, psychologue clinicienne à l’hôpital, confinée depuis un an :</p>
  106. <blockquote><p>Que la société le veuille ou non, nous sommes une réalité. Nous avons l’habitude que notre voix ne soit pas entendue, étouffée par les récriminations budgétaires de tous ordres. Nous sommes vos vieux en Ehpad, nous sommes des polyhandicapés, nous sommes des malades chroniques, nous sommes des personnes dépendantes du bon vouloir des autres… mais nous restons des personnes. Cette crise aura mis à jour un clivage que nous n’imaginions pas si grand entre le monde des bien portants et les autres. Et pourtant, nous sommes aussi le vieillard que vous deviendrez, le cancéreux que vous pourriez devenir, le handicapé que votre sœur ou votre enfant sera peut-être un jour. Nous sommes ce que vous ne voulez pas voir de votre condition humaine, de votre avenir possible. Je ne vous le souhaite pas. Mais peut-être ce jour-là découvrirez-vous, bien tard, quel goût a la vie quand il faut se battre chaque jour pour pouvoir profiter une fois encore du lever du soleil.</p></blockquote>
  107. <p>Je suis physiquement bien portant. Je ne suis pas a priori parmi les populations « vulnérables » au Covid-19 (âge, IMC, problèmes respiratoires, etc). Je suis bien loti. J’ai de la chance. Je suis un privilégié. Je ne suis pas à plaindre. Et pourtant je ressens intensément tout ça. Je ressens intensément ce clivage horrible. Je ressens douloureusement <a href="https://wp.me/p2Y5zY-1q1">le mépris pour les vulnérables et pour les victimes</a>. Je vois avec dégoût s’étaler la haine de ceux qui se croient forts pour ceux qui se savent faibles, toute cette hargne qui se cache de moins en moins, tous ces venins abjects. Certains me diront sûrement que je ne devrais pas, et que je devrais juste, comme eux, penser juste à ma gueule et mépriser les non-privilégiés, les faibles. Il n’en est pas question. Les mêmes me traiteront probablement de malade. Si ça les amuse…</p>
  108. <p>Au fond, les bien-portants intolérants sont cohérents : ils n’aiment pas les malades, c’est tout et ça ne va pas plus loin. Ils veulent juste ne pas les voir. Les malades devraient avoir <a href="https://wp.me/p2Y5zY-1as">honte d’exister</a>. Ça tombe bien, certaines maladies prospèrent justement de la honte d’exister.</p>
  109. <h2>Ça se voit</h2>
  110. <p>Vivre avec la dépression, c’est peut-être aussi se faire à l’idée que <a href="https://wp.me/p2Y5zY-1as">ça se voit</a>. Ça se sait. <a href="https://wp.me/p2Y5zY-11L">Ça s’entend</a>. Ça se lit.</p>
  111. <p>Vivre avec, ce serait essayer de me persuader que <a href="https://wp.me/p2Y5zY-1d2">je n’en mourrai pas</a>. Ce serait essayer de me persuader qu’on ne me crucifiera pas pour ça – ou que ceux-là qui me crucifieront ne valent juste pas la peine d’être fréquentés, ni même écoutés. Ils n’aiment pas les malades, c’est tout, tant pis pour eux.</p>
  112. <p>Vivre avec, ce serait arrêter d’essayer de sauver les apparences. Laisser filer. Laisser couler. « Lâcher prise », comme on dit maintenant.</p>
  113. <p>Vivre avec, ce serait arriver à me dire : ça se voit, et alors ? « Assumer », comme on dit maintenant. Accepter que je ne passerai jamais du bon côté du monde. Mais je peux m’en approcher.</p>
  114. <p>Vivre avec, et m’en contenter.</p>
  115. <p>Y être presque, à nouveau.</p>
  116. <p>Accepter le presque.</p>
  117. <p>Je ne peux pas faire mieux. Je ne pourrais jamais faire mieux. Je ne pourrai jamais complètement atteindre l’asymptote. Mais je peux vivre. Je suis vivant. J’ai de la chance.</p>
  118. <p>J’aurais tellement aimé <a href="https://wp.me/p2Y5zY-1pI">porter un message d’espoir</a>, de lumière et de meilleurs lendemains, mais je ne peux pas. Je ne sais pas faire. J’ai essayé, mais je ne sais pas faire.</p>
  119. <p>Je suis désolé.</p>
  120. <p>J’y étais presque.</p>
  121. <p>Je ne rêve que de retrouver l’asymptote.</p>
  122. <p>Je ne pense Covid qui nous sépare.</p>
  123. <p>Bonne nuit.</p>
  124. </article>
  125. <hr>
  126. <footer>
  127. <p>
  128. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  129. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  130. </svg> Accueil</a> •
  131. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  132. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  133. </svg> RSS</a> •
  134. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  135. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  136. </svg> Pro</a> •
  137. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  138. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  139. </svg> Email</a> •
  140. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  141. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  142. </svg> Légal</abbr>
  143. </p>
  144. <template id="theme-selector">
  145. <form>
  146. <fieldset>
  147. <legend><svg class="icon icon-brightness-contrast">
  148. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  149. </svg> Thème</legend>
  150. <label>
  151. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  152. </label>
  153. <label>
  154. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  155. </label>
  156. <label>
  157. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  158. </label>
  159. </fieldset>
  160. </form>
  161. </template>
  162. </footer>
  163. <script>
  164. function loadThemeForm(templateName) {
  165. const themeSelectorTemplate = document.querySelector(templateName)
  166. const form = themeSelectorTemplate.content.firstElementChild
  167. themeSelectorTemplate.replaceWith(form)
  168. form.addEventListener('change', (e) => {
  169. const chosenColorScheme = e.target.value
  170. localStorage.setItem('theme', chosenColorScheme)
  171. toggleTheme(chosenColorScheme)
  172. })
  173. const selectedTheme = localStorage.getItem('theme')
  174. if (selectedTheme && selectedTheme !== 'undefined') {
  175. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  176. }
  177. }
  178. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  179. window.addEventListener('load', () => {
  180. let hasDarkRules = false
  181. for (const styleSheet of Array.from(document.styleSheets)) {
  182. let mediaRules = []
  183. for (const cssRule of styleSheet.cssRules) {
  184. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  185. continue
  186. }
  187. // WARNING: Safari does not have/supports `conditionText`.
  188. if (cssRule.conditionText) {
  189. if (cssRule.conditionText !== prefersColorSchemeDark) {
  190. continue
  191. }
  192. } else {
  193. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  194. continue
  195. }
  196. }
  197. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  198. }
  199. // WARNING: do not try to insert a Rule to a styleSheet you are
  200. // currently iterating on, otherwise the browser will be stuck
  201. // in a infinite loop…
  202. for (const mediaRule of mediaRules) {
  203. styleSheet.insertRule(mediaRule.cssText)
  204. hasDarkRules = true
  205. }
  206. }
  207. if (hasDarkRules) {
  208. loadThemeForm('#theme-selector')
  209. }
  210. })
  211. </script>
  212. </body>
  213. </html>