A place to cache linked articles (think custom and personal wayback machine)
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  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>We’re Optimizing Ourselves to Death (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://zandercutt.com/2019/02/18/were-optimizing-ourselves-to-death/">
  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>We’re Optimizing Ourselves to Death</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://zandercutt.com/2019/02/18/were-optimizing-ourselves-to-death/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <h4>Burnout is the inevitable result of our endlessly accelerating pace of life</h4>
  71. <figure class="wp-block-image"><img data-attachment-id="552" data-permalink="https://zandercutt.com/screen-shot-2019-03-06-at-5-32-05-pm/" data-orig-file="https://zandernethercutt.files.wordpress.com/2019/03/screen-shot-2019-03-06-at-5.32.05-pm.png" data-orig-size="564,744" 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="screen-shot-2019-03-06-at-5.32.05-pm" data-image-description="" data-image-caption="" data-medium-file="https://zandernethercutt.files.wordpress.com/2019/03/screen-shot-2019-03-06-at-5.32.05-pm.png?w=227" data-large-file="https://zandernethercutt.files.wordpress.com/2019/03/screen-shot-2019-03-06-at-5.32.05-pm.png?w=564" src="https://zandernethercutt.files.wordpress.com/2019/03/screen-shot-2019-03-06-at-5.32.05-pm.png" alt="" class="wp-image-552"><figcaption>Illustration: Jutta Kuss/Getty Images</figcaption></figure>
  72. <p><strong>Author’s Note</strong>: I’ve recently partnered with <a href="https://diginthere.com/">Project DigInThere</a>, an online project to help people get more out of the articles they read. <a href="https://diginthere.com/">Project DigInThere</a> enables authors (in this case, me) to create 3-4 question “quests” that readers (in this case, you) can review prior to reading an article. Doing so primes you with what to look for in the article, and then you can take the quest at the end of the article to test your recall. If you’re interested, you can review the quest I’ve built by <a href="https://diginthere.com/quests/zandercutt-2019-02-17-were-optimizing-ourselves-to-death-2447316663cd/view">clicking here</a>, then take it after reading the article and see how you do. Or you can just read the article — it’s up to you ;).</p>
  73. <hr class="wp-block-separator">
  74. <p><strong>pro·cel·er·a·tion</strong></p>
  75. <p>/prōˌseləˈrāSH(ə)n/</p>
  76. <p><em>noun</em></p>
  77. <ol><li>The acceleration of acceleration</li></ol>
  78. <p>— excerpt from <em>The Age of Earthquakes</em>, by Shannon Basar, Douglas Coupland, and Hans Ulrich Obrist</p>
  79. <hr class="wp-block-separator">
  80. <p class="has-drop-cap">There’s a famous thought experiment in economics known as the “prisoner’s dilemma.” In it, two men have been caught committing a crime. Each of them is placed in a separate interrogation room and effectively has two options: confess or lie. There are three possible outcomes (the payoffs of which are illustrated in the payoff matrix below):</p>
  81. <p><strong>Outcome 1</strong>: Both confess, and both serve eight years in prison (illustrated by payoff “-8, -8” in Figure A).</p>
  82. <figure class="wp-block-image"><img src="https://zandernethercutt.files.wordpress.com/2019/02/cec19-1vvzfhu09tthxuusxda1zeg.png" alt=""><figcaption>Figure A: The Prisoner’s Dilemma. Credit: Author</figcaption></figure>
  83. <p><strong>Outcome 2</strong>: Both men lie, and both serve one year in prison (illustrated by payoff “-1, -1” in Figure A).</p>
  84. <p><strong>Outcome 3</strong>: One man confesses while the other lies. The liar serves the longest possible sentence, 10 years, while the confessor goes free (illustrated by payoff “-10, 0” in Figure A).</p>
  85. <p>So, if both men lie, they both get off with a lighter sentence. That appears to be the full story — except it isn’t.</p>
  86. <p>The importance of the prisoner’s dilemma is understanding that in selecting a strategy, each player should account for the effectiveness of that strategy given what the other player might do.</p>
  87. <p>Knowing this, consider the game from the perspective of Prisoner 1. If he thinks Prisoner 2 will lie, he should confess, because serving zero years in prison is better than serving one. If he thinks Prisoner 2 will confess, he should also confess, because serving eight years in prison is better than serving 10. In this situation, confessing is both players’ dominant strategy, the strategy they should play regardless of what the other player does.</p>
  88. <p>This thought experiment illustrates how two self-interested individuals with a clear way to maximize their collective utility fail to do so. It also happens to be a fantastic way to understand our current moment. Millennials — not all of us, but many of us — are burned out, and the prisoner’s dilemma can shed light on why.</p>
  89. <p>Unfortunately, it also sheds light on a distressing conclusion: Barring some miracle of human coordination, our quest to optimize our lives will never slow, let alone stop. If anything, it will accelerate.</p>
  90. <hr class="wp-block-separator">
  91. <p>Imagine a two-player labor market represented by the prisoner’s dilemma matrix. Now imagine both players encountered a service that would help optimize their lives. For a real-world example (and one I use), let’s take the premade meal delivery service Freshly.</p>
  92. <p>Freshly claims to save people approximately two hours a week in the time they don’t have to spend grocery shopping, meal prepping, or cooking. Now imagine that both players had two choices of how they could spend those hours: either on extra leisure (e.g., sleep, Netflix, a book, etc.,) or on productivity (e.g., optimization/work).</p>
  93. <p>What would each player choose?</p>
  94. <p>Well, if wealth is considered freedom from busyness, or freedom to spend your time as you wish, the hour would be best spent on leisure. When forming a strategy, however — like with the prisoner’s dilemma — players must consider those strategies in the context of what the other players in the game might do. Consider the adjusted payoff matrix below:</p>
  95. <p><strong>Outcome 1</strong>: Both players use the time afforded by the service’s convenience to optimize/work harder and thus remain in a state of constant acceleration (illustrated by payoff “1, 1” in Figure B).</p>
  96. <figure class="wp-block-image"><img src="https://zandernethercutt.files.wordpress.com/2019/02/92958-1qccvg4lbzz4zmcjpbuhs6w.png" alt=""><figcaption>Figure B: The Millennial Dilemma (leisure vs. work). Credit: Author.</figcaption></figure>
  97. <p><strong>Outcome 2</strong>: Both players use the time afforded by the service’s convenience to relax (illustrated by payoff “8, 8” in Figure A).</p>
  98. <p><strong>Outcome 3</strong>: Player 1 uses the time afforded by the service’s convenience to optimize/work harder, while Player 2 uses it to relax. Player 1 reaps the benefits of being the only provider of labor in a market and corners it. Player 2 languishes as the world accelerates endlessly and leaves him behind (illustrated by payoff “10, 0” in Figure A).</p>
  99. <p>Borrowing earlier analysis, it’s clear that given the payoffs, both players have a dominant strategy: work. If Player 2 relaxes, Player 1 should work because a payoff of 10 is better than a payoff of 8. If the Player 2 works, Player 1 should also work because a payoff of 1 is better than a payoff of zero.</p>
  100. <p>Now, remember, these payoffs — and their explanations — are completely made up. In the modern era, there is no reason to be convinced that torturing yourself with additional employment is associated with any improvement in your lifestyle. And yet this is exactly how most people behave.</p>
  101. <p>Thus, we arrive at our new Nash equilibrium: Both players use a service — mind you, a service built to supposedly make their lives easier and more relaxing — that ends up making their lives more stressful and complex. Put another way, both players burn out.</p>
  102. <hr class="wp-block-separator">
  103. <p>In a recent viral BuzzFeed article, “<a href="https://www.buzzfeednews.com/article/annehelenpetersen/millennials-burnout-generation-debt-work" rel="noreferrer noopener" target="_blank">How Millennials Became The Burnout Generation</a>,” Anne Helen Petersen notes this seeming paradox of leisure, specifically as it pertains to freed up time. She writes:</p>
  104. <blockquote class="wp-block-quote"><p>Attempts [by companies] to discourage working “off the clock” misfire, as millennials read them not as permission to stop working, but a means to further distinguish themselves by being available anyway.</p></blockquote>
  105. <p>In other words: Attempts by companies like Google or Freshly to create services that save you time misfire, as millennials see them not as services that will give them more time to relax, but as services that will increase the amount of time they’re available to work.</p>
  106. <p>As employees in a hyperproductive, work-obsessed world, we’ve become acutely aware of any opportunity for optimization. Our Instagram feeds are filled with every possible combination of meal delivery service and online shopper that exists. Startups emerge daily to automate every mundane activity ever scrawled on and scratched off a legal pad.</p>
  107. <p>The escalators I take to work are filled with the same desperate faces and vacant eyes I feel staring through me on the subway, except instead of standing still, they’re bounding up it, subconsciously aware that below their feet is yet another opportunity to optimize on an existing convenience. This, if anything, is a symptom of our current moment: People ignoring the luxury of a moving staircase in favor of whatever sprinting up it can transport them to faster.</p>
  108. <p>There’s a kind of sick satisfaction derived from optimizing one’s own life, and there’s a good reason: Being able to do so is a status symbol. Only the most successful are free enough to spend their time finding better ways to spend their time. For those at the very top, I imagine these methods of optimization can actually exist in a vacuum; billionaires can optimize for the sake of optimizing, rather than to keep their head above water. For the rest of the world, optimization is a survival mechanism. To them, the tools that are luxuries to those at the top are good for one thing and one thing only: freeing up time that is only ever used to get more done.</p>
  109. <hr class="wp-block-separator">
  110. <p>The one bright side to all this productivity should be that everyone makes more money, but that’s all too often not the case. The popular narrative is that we’re all working harder, but “wages haven’t risen in 40 years,” and “purchasing power is lower now than any point in recent memory.” The economist in me has always struggled with this line of thinking. Wages are only truly relevant indicators of wealth in the sense that they allow you increased control over how you spend your time. If you’re earning a wage and a service comes along that saves you the time and effort you’d normally have to expend to access a certain good (read: Freshly for meals), that service effectively increases the value of your existing wage. Thus, even though you’re not earning any more money, you’re now wealthier.</p>
  111. <p>For consumers, services like Google and Freshly do exactly this.</p>
  112. <p>The media, though — and a select few politicians — prefer a different narrative. “There’s a finite amount of money in the world,” they effectively claim, “and since we’re making less, and tech companies are making more, it follows that tech companies are to blame for wage stagnation, which is a net bad, always.”</p>
  113. <p>Reality, though, isn’t that simple.</p>
  114. <p>Though companies like Google and Amazon do generate healthy — and yes, <a href="https://tradingeconomics.com/united-states/corporate-profits" rel="noreferrer noopener" target="_blank">quite frankly absurd</a> — returns for their executive teams and shareholders, they’re valuable because people find whatever they offer to be worth more than whatever they’re being asked to pay for it. In the case of Google, that offering is time (via frictionless access to information), and its price is effectively zero. The partial rationalization I make for stagnant wages, then, is that Google and services like it allow people to get more out of the same wage.</p>
  115. <p>In this world, Google and its contemporaries are to blame for wage stagnation, but only because they’re creating a world where wages are no longer necessarily synonymous with wealth. Ergo, wage stagnation at the hands of tech companies — everyone’s favorite narrative — is a feature, not a bug.</p>
  116. <p>The problem with this line of thinking, though, gets at the root of both the millennial obsession with work and the tendency to burn out.</p>
  117. <hr class="wp-block-separator">
  118. <p>Let’s return to the prisoner’s dilemma as it pertains to the millennial “obsession with work.” When presented with time-saving utilities (Google, Freshly, etc.) and effectively given the option to use them to either (a) relax or (b) optimize and work harder, every millennial’s dominant strategy is to optimize and work harder. This explains why it doesn’t feel like our lives are getting easier even as things have never been better. We’re adjusting our behavior in the exact same, suboptimal way to every supposed convenience modernity throws at us.</p>
  119. <p>This also explains why productivity apps — which includes Amazon and Google because their services save time — proliferate like Medusa’s heads. Each one births a dozen more because, in the modern era, the best way to spend your time is finding better ways to spend your time.</p>
  120. <figure class="wp-block-image"><img src="https://zandernethercutt.files.wordpress.com/2019/02/d764f-1fdomxxwbcjjdu665olix6q.png" alt=""><figcaption>Credit: <a href="https://www.freshly.com/" rel="noreferrer noopener" target="_blank">Freshly</a>. Photo by author.</figcaption></figure>
  121. <p>Take Freshly as an example again. As we’ve noted, Freshly implicitly promises at least several hours a week in saved time by not having to “get in the grocery line,” “watch water boil,” or “plan the week’s meals.” With that hour (or two), it claims, you can “get a good workout in,” “watch the game in real time,” or “plan a movie night.”</p>
  122. <p>And all of these are fantastic things, but it isn’t hard to imagine three new services arising in the near future as a response to Freshly’s success. First, a gym productivity app that claims to “shred you in half the time.” Second, an algorithmic highlight tape that captures the best moments of every game and delivers them to you. And third, a service that gives you the same level of content you’d expect from a cinema, but promises you won’t have to leave the couch. The kicker? All of these services (a) already exist, and (b) are now to Freshly exactly what Freshly was at some point to some other time-saving utility. Like Freshly, all of these new, hypothetical services also save time that can — and will — be used to find even more ways to save time, ad infinitum.</p>
  123. <p>Optimization begets optimization and says we’re its beneficiaries, and in many ways, we are. But given our reliable ignorance of what our lives have conditioned us to do with free time (read: optimize and work harder), we’re better characterized as optimization’s subjects, along for the ride as our pace of life accelerates endlessly.</p>
  124. <p>Yuval Harari may have put it best in <em>Sapiens</em> when he wrote:</p>
  125. <blockquote class="wp-block-quote"><p>One of history’s few iron laws is that luxuries tend to become necessities and to spawn new obligations. Once people get used to a certain luxury, they take it for granted. Then they begin to count on it. Finally they reach a point where they can’t live without it.</p></blockquote>
  126. <p>This, at its core, is the process that leads to burnout.</p>
  127. <hr class="wp-block-separator">
  128. <p>A rather elegant solution to the prisoner’s dilemma was proposed years ago, after the initial thought experiment was conceived. The idea was to have players engage in repeated versions of the same game and have the payoffs of each game carry over into the next round. The rationale was simple: upon realizing the game would continue to be played, people would also realize it was in their best interest to cooperate. This is a pessimistic view of society, but it’s also an accurate one.</p>
  129. <p>Humanity cooperates because historical precedent (read: repeated games) dictates doing so — with very few exceptions — is everyone’s dominant strategy.</p>
  130. <p>When you play out the prisoner’s dilemma game in real life with the repeated games wrinkle added, the results are what you’d expect: People begin to cooperate. The problem with this solution is that while it works to inspire cooperation on a small scale, global cooperation is much harder.</p>
  131. <p>This gets at why we make suboptimal decisions at a global scale: There isn’t yet a feasible way to facilitate repeated games between seven billion individuals. Even if there were, and we could all agree to only use time-saving utilities to relax for the rest of our lives, all it would take for the entire system to unravel would be one individual cheating on the agreement, optimizing, and working harder.</p>
  132. <p>Given this impossibility of global coordination, we will continue to behave in our own self-interests. And we’ll continue to make suboptimal decisions. We’re playing a rigged game, and every time we do, our pace of life accelerates, and the world moves faster.</p>
  133. <p>The acceleration of our collective pace of life is not a result of stupidity or irrationality; rather, it is a symptom of what is perfectly predicted by the prisoner’s dilemma at a global scale: Hyper-rational individuals making hyper-rational decisions on how to spend their time by launching into an inescapable arms race of productivity. Burnout is inevitable.</p>
  134. <hr class="wp-block-separator">
  135. <h4><strong>time snack</strong></h4>
  136. <p>/tīm/ /snak/</p>
  137. <p><em>noun</em></p>
  138. <p>noun: <strong>time snack</strong>; plural noun: <strong>time snacks</strong></p>
  139. <ol><li>Often annoying moments of pseudo-leisure created by computers when they stop to save a file or to search for software updates or merely to mess with your mind.</li></ol>
  140. <p>— excerpt from <em>The Age of Earthquakes</em>, by Shannon Basar, Douglas Coupland, and Hans Ulrich Obrist</p>
  141. <hr class="wp-block-separator">
  142. <p>The one silver lining here is that millennials, to our credit, seem generally relieved by the knowledge that burnout has a name. Like “depression” or “anxiety,” labeling a condition everyone’s feeling legitimizes it. It also gives those experiencing it the hope that it might be addressed — because it indicates that it needs to be addressed. What is less clear is whether that hope is justified, true as it is that global coordination is impossible, and there will always be someone using the next great convenience to work harder than you.</p>
  143. <p>This, more than anything, is why we will remain the burnout generation.</p>
  144. <p>It isn’t because we see intrinsic value in the absurd hours we put in, though to cope, many of us have convinced ourselves we do. It’s because the rules of the game we play dictate that working those hours — and outworking everyone else — is our dominant strategy. When we see long weekends and think “work before play,” when we see Friday nights and think “sleep before clubs,” when we see escalators as accelerators and not opportunities to “just take a second,” we’re nothing more than hyper-rational prisoners making a decision that would be inaccurately characterized as a dilemma because the answer is obvious.</p>
  145. <p>When given the choice, we optimize.</p>
  146. <p>Then we work.</p>
  147. </article>
  148. <hr>
  149. <footer>
  150. <p>
  151. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  153. </svg> Accueil</a> •
  154. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  155. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  156. </svg> Suivre</a> •
  157. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  158. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  159. </svg> Pro</a> •
  160. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  161. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  162. </svg> Email</a> •
  163. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  164. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  165. </svg> Légal</abbr>
  166. </p>
  167. <template id="theme-selector">
  168. <form>
  169. <fieldset>
  170. <legend><svg class="icon icon-brightness-contrast">
  171. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  172. </svg> Thème</legend>
  173. <label>
  174. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  175. </label>
  176. <label>
  177. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  178. </label>
  179. <label>
  180. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  181. </label>
  182. </fieldset>
  183. </form>
  184. </template>
  185. </footer>
  186. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  187. <script>
  188. function loadThemeForm(templateName) {
  189. const themeSelectorTemplate = document.querySelector(templateName)
  190. const form = themeSelectorTemplate.content.firstElementChild
  191. themeSelectorTemplate.replaceWith(form)
  192. form.addEventListener('change', (e) => {
  193. const chosenColorScheme = e.target.value
  194. localStorage.setItem('theme', chosenColorScheme)
  195. toggleTheme(chosenColorScheme)
  196. })
  197. const selectedTheme = localStorage.getItem('theme')
  198. if (selectedTheme && selectedTheme !== 'undefined') {
  199. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  200. }
  201. }
  202. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  203. window.addEventListener('load', () => {
  204. let hasDarkRules = false
  205. for (const styleSheet of Array.from(document.styleSheets)) {
  206. let mediaRules = []
  207. for (const cssRule of styleSheet.cssRules) {
  208. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  209. continue
  210. }
  211. // WARNING: Safari does not have/supports `conditionText`.
  212. if (cssRule.conditionText) {
  213. if (cssRule.conditionText !== prefersColorSchemeDark) {
  214. continue
  215. }
  216. } else {
  217. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  218. continue
  219. }
  220. }
  221. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  222. }
  223. // WARNING: do not try to insert a Rule to a styleSheet you are
  224. // currently iterating on, otherwise the browser will be stuck
  225. // in a infinite loop…
  226. for (const mediaRule of mediaRules) {
  227. styleSheet.insertRule(mediaRule.cssText)
  228. hasDarkRules = true
  229. }
  230. }
  231. if (hasDarkRules) {
  232. loadThemeForm('#theme-selector')
  233. }
  234. })
  235. </script>
  236. </body>
  237. </html>