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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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 Had the COVID-19 Vaccine the Whole Time (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://nymag.com/intelligencer/2020/12/moderna-covid-19-vaccine-design.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>We Had the COVID-19 Vaccine the Whole Time</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.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://nymag.com/intelligencer/2020/12/moderna-covid-19-vaccine-design.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div class="article-content inline" data-editable="content" itemprop="articleBody">
  71. <div class="lede-image-wrapper inline horizontal">
  72. <picture> <source media="(min-resolution: 192dpi) and (min-width: 1180px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1180px)" srcset="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.2x.rhorizontal.w700.jpg 2x"></source> <source media="(min-width: 1180px) " srcset="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.rhorizontal.w700.jpg"></source> <source media="(min-resolution: 192dpi) and (min-width: 768px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px)" srcset="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.2x.rhorizontal.w700.jpg 2x"></source> <source media="(min-width: 768px)" srcset="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.rhorizontal.w700.jpg"></source> <source media="(min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2)" srcset="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.2x.rhorizontal.w700.jpg"></source> <img src="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.rhorizontal.w700.jpg" class="lede-image" data-src="https://pyxis.nymag.com/v1/imgs/47c/fc9/621dbf6b0a589406bd7d2ccddfb2a65463-col-1-vaccine.rhorizontal.w700.jpg" data-content-img alt=""> </picture>
  73. <div class="lede-image-data">
  74. <p class="attribution">
  75. In August 1957, Dr. Joseph Ballinger gave a nurse at a New York hospital the first H2N2-vaccine shot to be administered in the city.
  76. <span class="credit">Photo: AP Photo/AP2009</span>
  77. </p>
  78. </div>
  79. </div>
  80. <p class="clay-paragraph_drop-cap" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib2wreh000k6wn9a6yd8qa7@published" data-word-count="202">You may be surprised to learn that of the trio of long-awaited coronavirus vaccines, the most promising, Moderna’s mRNA-1273, which <a href="https://www.thecut.com/2020/11/a-second-covid-vaccine-may-be-nearly-95-percent-effective.html">reported a 94.5 percent efficacy rate</a> on November 16, had been designed by January 13. This was just two days after the genetic sequence had been made public in an act of scientific and humanitarian generosity that resulted in China’s Yong-Zhen Zhang’s being temporarily forced out of his lab. In Massachusetts, the Moderna vaccine design took all of one weekend. It was completed before China had even acknowledged that the disease could be transmitted from human to human, more than a week before the first confirmed coronavirus case in the United States. By the time the first American death was announced a month later, the vaccine had already been manufactured and shipped to the National Institutes of Health for the beginning of its Phase I clinical trial. This is — as the country and the world are rightly celebrating — the fastest timeline of development in the history of vaccines. It also means that for the entire span of the pandemic in this country, which has already killed more than 250,000 Americans, we had the tools we needed to prevent it .</p>
  81. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327h0001t3g6fnkphsf6c@published" data-word-count="108">To be clear, I don’t want to suggest that Moderna should have been allowed to <a href="https://nymag.com/intelligencer/2020/12/what-we-know-about-u-s-covid-19-vaccine-distribution-plan.html">roll out its vaccine</a> in February or even in May, when interim results from its Phase I trial demonstrated its basic safety. “That would be like saying we put a man on the moon and then asking the very same day, ‘What about going to Mars?’ ” says Nicholas Christakis, who directs Yale’s Human Nature Lab and whose new book, <a href="https://www.amazon.com/Apollos-Arrow-Profound-Enduring-Coronavirus/dp/0316628212?ascsubtag=%5B%5Din%5Bp%5Dckib2wrch00006wn9pez37kva&amp;tag=thestrategistsite-20" data-track-type="product-link" data-track-id=""><em>Apollo’s Arrow</em></a><em>,</em> sketches the way COVID-19 may shape our near-term future. Moderna’s speed was “astonishing,” Christakis says, though the design of other vaccines was nearly as fast: BioNTech with Pfizer, Johnson &amp; Johnson, AstraZeneca.</p>
  82. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327lu001u3g6fymch6hvv@published" data-word-count="321">Could things have moved faster from design to deployment? Given the grim prospects for winter, it is tempting to wonder. Perhaps, in the future, we will. But given existing vaccine infrastructure, probably not. Already, as Baylor’s Peter Hotez pointed out to me, “Operation Warp Speed” meant running clinical trials simultaneously rather than sequentially, manufacturing the vaccine at the same time, and authorizing the vaccine under “emergency use” in December based only on preliminary data that doesn’t track the long-term durability of protection or even measure the vaccine’s effect on transmission (only how much it protects against disease). And as Georgetown virologist Angela Rasmussen told me, the name itself may have needlessly risked the trust of Americans already concerned about the safety of this, or any, vaccine. Indeed, it would have been difficult in May to find a single credentialed epidemiologist, vaccine researcher, or public-health official recommending a rapid vaccine rollout — though, it’s worth noting, as early as July the <em>MIT Technology Review</em> <a href="https://www.technologyreview.com/2020/07/29/1005720/george-church-diy-coronavirus-vaccine/">reported</a> that a group of 70 scientists in the orbit of Harvard and MIT, including “celebrity geneticist” George Church, were taking a totally DIY nasal-spray vaccine, never even intended to be tested, and developed by a personal genomics entrepreneur named Preston Estep (also the author of a self-help-slash-life-extension book called <em>The Mindspan Diet</em>). China began administering a vaccine to its military in June. Russia approved its version in August. And while most American scientists worried about the speed of those rollouts, and the risks they implied, our approach to the pandemic here raises questions, too, about the strange, complicated, often contradictory ways we approach matters of risk and uncertainty during a pandemic — and how, perhaps, we might think about doing things differently next time. That a vaccine was available for the entire brutal duration may be, to future generations trying to draw lessons from our death and suffering, the most tragic, and ironic, feature of this plague.</p>
  83. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckic49y6s000s3g6fc7er99g8@published" data-word-count="249">For all of modern medical history, Christakis writes in <em>Apollo’s Arrow</em>, vaccines and cures for infectious disease have typically arrived, if they arrive, only in the end stage of the disease, once most of the damage had already been done and the death rate had dramatically declined. For measles, for scarlet fever, for tuberculosis, for typhoid, the miracle drugs didn’t bring rampant disease to a sudden end — they shut the door for good on outbreaks that had largely died out already. This phenomenon is called the McKeown hypothesis — that medical interventions tend to play only a small role compared to public-health measures, socioeconomic advances, and the natural dynamics of the disease as it spreads through a population. The new coronavirus vaccines have arrived at what counts as warp speed, but not in time to prevent what CDC director Robert Redfield predicts will be “the most difficult time in the public-health history of this nation,” and do not necessarily represent a reversal of the McKeown hypothesis: The country may still reach herd immunity through natural disease spread, Christakis says, at roughly the same time as the rollout of vaccines is completed. Redfield believes there may be 200,000 more American deaths to come. This would mean what Christakis calls a “once-in-a-century calamity” had unfolded start-to-finish between the time the solution had been found and the time we felt comfortable administering it. A half a million American lives would have been lost in the interim. Around the world, considerably more.</p>
  84. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327nk001v3g6f7j0o7ebe@published" data-word-count="228">In weighing other risks and uncertainties, Americans have been much less cautious,<strong> </strong>and not just in the case of marching maskless into Wal-Marts. On March 28, on what would normally be considered very thin evidentiary ground, the FDA issued an emergency-use authorization for the drug hydroxychloroquine. On May 1, it issued an EUA for remdesevir. On August 23, it issued another for convalescent plasma (the practice of injecting antibodies from the blood of recovered patients into those sick with the disease). These were all speculative authorizations — gambles, without concrete evidence, that existing treatments which scientists and doctors had some reason to suspect might help with the treatment of COVID-19 would be both safe and effective. All of these bets were lost. None of them, in the end, proved effective. Hydroxychloroquine, famously, proved dangerous, too, increasing risk of death in patients receiving it. Just one drug, the steroid dexamethasone, has proven to be a worthwhile treatment for COVID-19 in a randomized control trial — though given too early, it too can be dangerous. And at least some of the threefold decline in COVID-19 fatality rates observed over the spring and summer, the University College of London disease geneticist Francois Balloux told me recently, can be attributed to doctors no longer trying so many experimental treatments and focusing instead on the basic, old-fashioned job of simply keeping patients alive.</p>
  85. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327q5001w3g6f5uhz1qb5@published" data-word-count="306">The treatment dilemmas facing physicians and patients in the early stages of a novel pandemic are, of course, not the same as the dilemma of rushing a new vaccine to a still-healthy population — we defer to the judgment of desperate patients, with physicians inclined to try to help them, but not to the desires of vaccine candidates, no matter how desperate. An unsafe vaccine, like the one for polio that killed ten and paralyzed 200 in 1955, could cause medical disaster and public-health backlash — though, as Balloux <a href="https://twitter.com/ballouxfrancois/status/1334226473327206400?s=11">points out</a>, since none of the new coronavirus vaccines use real viral material, that kind of accident, which affected one in a thousand recipients, would be impossible. (These days, one adverse impact in a million is the rule-of-thumb threshold of acceptability.) An ineffective vaccine could also give false security to those receiving it, thereby helping spread the disease by providing population-scale license to irresponsible behavior (indoor parties, say, or masklessness). But on other matters of population-level guidance, our messaging about risk has been erratic all year, too. In February and March, we were warned against the use of masks, in part on the grounds that a false sense of security would lead to irresponsible behavior — on balance, perhaps the most consequential public-health mistake in the whole horrid pandemic. In April, with schools already shut, we closed playgrounds. In May, beaches — unable or unwilling to live with even the very-close-to-zero risk of socializing outside (often shaming those who gathered there anyway). But in September, we opened bars and restaurants and gyms, inviting pandemic spread even as we knew the seasonality of the disease would make everything much riskier in the fall. The whole time, we also knew that the Moderna vaccine was essentially safe. We were just waiting to know for sure that it worked, too.</p>
  86. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327rq001x3g6fnu0bfbq7@published" data-word-count="221">None of the scientists I spoke to for this story were at all surprised by either outcome — all said they expected the vaccines were safe and effective all along. Which has made a number of them wonder whether, in the future, at least, we might find a way to do things differently — without even thinking in terms of trade-offs. Rethinking our approach to vaccine development, they told me, could mean moving faster without moving any more recklessly. A layperson might look at the 2020 timelines and question whether, in the case of an onrushing pandemic, a lengthy Phase III trial — which tests for efficacy — is necessary. But the scientists I spoke to about the way this pandemic may reshape future vaccine development were more focused on how to accelerate or skip Phase I, which tests for safety. More precisely, they thought it would be possible to do all the research, development, preclinical testing, and Phase I trials for new viral pandemics before those new viruses had even emerged — to have those vaccines sitting on the shelf and ready to go when they did. They also thought it was possible to do this for nearly the entire universe of potential future viral pandemics — at least 90 percent of them, one of them told me, and likely more.</p>
  87. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327tn001y3g6fqth82bzy@published" data-word-count="95">As Hotez explained to me, the major reason this vaccine timeline has shrunk is that much of the research and preclinical animal testing was done in the aftermath of the 2003 SARS pandemic (that is, for instance, how we knew to target the spike protein). This would be the model.<strong> </strong>Scientists have a very clear sense of which virus families have pandemic potential, and given the resemblance of those viruses, can develop not only vaccines for all of them but also ones that could easily be tweaked to respond to new variants within those families.</p>
  88. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckic4qvva000x3g6frxsy4szl@published" data-word-count="151">“We do this every year for influenza,” Rasmussen says. “We don’t know which influenza viruses are going to be circulating, so we make our best guess. And then we formulate that into a vaccine using essentially the same technology platform that all the other influenza vaccines are based on.” The whole process takes a few months, and utilizes a “platform” that we already know is basically safe. With enough funding, you could do the same for viral pandemics, and indeed conduct Phase I trials for the entire set of possible future outbreaks before any of them made themselves known to the public. In the case of a pandemic produced by a new strain in these families, you might want to do some limited additional safety testing, but because the most consequential adverse effects take place in the days right after the vaccine is given, that additional diligence could be almost immediate.</p>
  89. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327xq001z3g6fvrzh5ilv@published" data-word-count="221">According to Florian Krammer, a vaccine scientist at Mount Sinai, you could do all of this at a cost of about $20 million to $30 million per vaccine and, ideally, would do so for between 50 and 100 different viruses — enough, he says, to functionally cover all the phylogenies that could give rise to pandemic strains in the future. (“It’s extremely unlikely that there is something out there that doesn’t belong to one of the known families, that would have been flying under the radar,” he says. “I wouldn’t be worried about that.”) In total, he estimates, the research and clinical trials necessary to do this would cost between $1 billion and $3 billion. So far this year, the U.S. government has spent more than $4 trillion on pandemic relief. Functionally, it’s a drop in the bucket, though Krammer predicts our attention, and the funding, will move on once this pandemic is behind us, leaving us no more prepared for the next one. When he compares the cost of such a project to the Pentagon’s F-35 — you could build vaccines for five potential pandemics for the cost of a single plane, and vaccines for all of them for a fraction of the cost of that fighter-jet program as a whole — he isn’t signaling confidence it will happen, but the opposite.</p>
  90. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib327zd00203g6fkbpbhei9@published" data-word-count="179">Krammer spent the early months of the pandemic focused on serological testing — it was his lab that gave New York City its first clear picture of just how far the pandemic had spread through the five boroughs in the spring— but recently, he has turned his attention to how to accelerate the timeline of vaccine delivery. In <a href="https://www.cell.com/med/fulltext/S2666-6340(20)30027-1">a just-published paper in <em>Cell</em></a><em>,</em> he suggests it isn’t just that Phase I clinical work and the larger, longer Phase II safety trials which could be done preemptively, entirely before the arrival of new pandemics. Some Phase III efficacy testing, he says, could be done then, as well — especially for existing rather than novel strains. “To look for immunogenicity”—whether scientists can provoke the right immune response — “you don’t even have to develop the vaccine,” he says. “You can make antigens in the research center and just test it — that’s pretty inexpensive.” And if a Phase III trial were deemed necessary, it could start just weeks after the disease was identified and conclude in as soon as ten weeks.</p>
  91. <p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/ckib3283j00213g6fg1wb034c@published" data-word-count="102">If we do all that, he says, the entire timeline could be compressed to as few as three months. The production and distribution of a vaccine adds considerable cost, bureaucracy, and even some chaos, as we’re likely about to see. But three months from the design of the Moderna vaccine was April 13. The second and third surges, the return to school and the long-dreaded fall, 225,000 more deaths and 50 million more infections — all of that still lay ahead. Shave another month off somehow and you’re at March 13, the day the very first person in New York City died.</p>
  92. </div>
  93. </article>
  94. <hr>
  95. <footer>
  96. <p>
  97. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  98. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  99. </svg> Accueil</a> •
  100. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  101. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  102. </svg> Suivre</a> •
  103. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  104. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  105. </svg> Pro</a> •
  106. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  107. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  108. </svg> Email</a> •
  109. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  110. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  111. </svg> Légal</abbr>
  112. </p>
  113. <template id="theme-selector">
  114. <form>
  115. <fieldset>
  116. <legend><svg class="icon icon-brightness-contrast">
  117. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  118. </svg> Thème</legend>
  119. <label>
  120. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  121. </label>
  122. <label>
  123. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  124. </label>
  125. <label>
  126. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  127. </label>
  128. </fieldset>
  129. </form>
  130. </template>
  131. </footer>
  132. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  133. <script>
  134. function loadThemeForm(templateName) {
  135. const themeSelectorTemplate = document.querySelector(templateName)
  136. const form = themeSelectorTemplate.content.firstElementChild
  137. themeSelectorTemplate.replaceWith(form)
  138. form.addEventListener('change', (e) => {
  139. const chosenColorScheme = e.target.value
  140. localStorage.setItem('theme', chosenColorScheme)
  141. toggleTheme(chosenColorScheme)
  142. })
  143. const selectedTheme = localStorage.getItem('theme')
  144. if (selectedTheme && selectedTheme !== 'undefined') {
  145. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  146. }
  147. }
  148. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  149. window.addEventListener('load', () => {
  150. let hasDarkRules = false
  151. for (const styleSheet of Array.from(document.styleSheets)) {
  152. let mediaRules = []
  153. for (const cssRule of styleSheet.cssRules) {
  154. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  155. continue
  156. }
  157. // WARNING: Safari does not have/supports `conditionText`.
  158. if (cssRule.conditionText) {
  159. if (cssRule.conditionText !== prefersColorSchemeDark) {
  160. continue
  161. }
  162. } else {
  163. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  164. continue
  165. }
  166. }
  167. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  168. }
  169. // WARNING: do not try to insert a Rule to a styleSheet you are
  170. // currently iterating on, otherwise the browser will be stuck
  171. // in a infinite loop…
  172. for (const mediaRule of mediaRules) {
  173. styleSheet.insertRule(mediaRule.cssText)
  174. hasDarkRules = true
  175. }
  176. }
  177. if (hasDarkRules) {
  178. loadThemeForm('#theme-selector')
  179. }
  180. })
  181. </script>
  182. </body>
  183. </html>