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 25KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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>New coronavirus variant: What do we know? (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_2020-06-19.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 type="text/javascript">
  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://www.bbc.com/news/health-55388846">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>New coronavirus variant: What do we know?</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.bbc.com/news/health-55388846" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <div data-component="image-block" class="css-vk3nhx-ComponentWrapper e1xue1i80"><figure class="css-2y05cd-StyledFigure e34k3c20"><div class="css-kwaqyc-StyledFigureContainer e34k3c22"><span class="css-1xtcmof-Placeholder e16icw910"><span><noscript><img alt="A computer-generated graphic of the virus in front of red blood cells" srcset="https://ichef.bbci.co.uk/news/240/cpsprodpb/69EF/production/_116191172_gettyimages-1212213051.jpg 240w, https://ichef.bbci.co.uk/news/320/cpsprodpb/69EF/production/_116191172_gettyimages-1212213051.jpg 320w, https://ichef.bbci.co.uk/news/480/cpsprodpb/69EF/production/_116191172_gettyimages-1212213051.jpg 480w, https://ichef.bbci.co.uk/news/624/cpsprodpb/69EF/production/_116191172_gettyimages-1212213051.jpg 624w, https://ichef.bbci.co.uk/news/800/cpsprodpb/69EF/production/_116191172_gettyimages-1212213051.jpg 800w, https://ichef.bbci.co.uk/news/976/cpsprodpb/69EF/production/_116191172_gettyimages-1212213051.jpg 976w" src="https://c.files.bbci.co.uk/69EF/production/_116191172_gettyimages-1212213051.jpg" loading="lazy" class="css-evoj7m-Image ee0ct7c0"/></noscript></span></span><span class="css-1ecljvk-StyledFigureCopyright e34k3c23"><span class="css-oyqyoe-VisuallyHidden e1y6uwnp0">image copyright</span>Getty Images</span></div></figure></div>
  69. <pre><code>&lt;div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"&gt;&lt;div class="css-83cqas-RichTextContainer e5tfeyi2"&gt;&lt;p&gt;&lt;b class="css-14iz86j-BoldText e5tfeyi0"&gt;The rapid spread of a new variant of coronavirus has been blamed for the introduction of strict tier four mixing rules for millions of people, harsher restrictions on mixing at Christmas in England, Scotland and Wales, and other countries placing the UK on a travel ban.&lt;/b&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  70. </code></pre>
  71. <p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>So how has it gone from being non-existent to the most common form of the virus in parts of England in a matter of months?</p></div></div>
  72. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The government's advisers on new infections now say they have "high" confidence that it is more able to transmit than other variants. </p></div></div>
  73. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>All the work is at an early stage, contains huge uncertainties and a long list of unanswered questions. </p></div></div>
  74. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>As I've written before, <a href="https://www.bbc.co.uk/news/health-55312505" class="css-yidnqd-InlineLink e1no5rhv0">viruses mutate all the time and it's vital to keep a laser focus</a> on whether the virus' behaviour is changing. </p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">Why is this variant causing concern?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Three things are coming together that mean it is attracting attention:</p></div></div>
  75. <div data-component="unordered-list-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><div class="css-1pzprxn-BulletListContainer e5tfeyi3"><ul role="list"><li>It is rapidly replacing other versions of the virus</li><li>It has mutations that affect part of the virus likely to be important </li><li>Some of those mutations have already been shown in the lab to increase the ability of the virus to infect cells</li></ul></div></div></div>
  76. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>All of these come together to build a case for a virus that can spread more easily. </p></div></div>
  77. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>However, we do not have absolute certainty. New strains can become more common simply by being in the right place at the right time - such as London, which had only tier two restrictions until recently. </p></div></div>
  78. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>But already the justification for tier four restrictions is in part to reduce the spread of the variant.</p></div></div>
  79. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>"Laboratory experiments are required, but do you want to wait weeks or months [to see the results and take action to limit the spread]? Probably not in these circumstances," Prof Nick Loman, from the Covid-19 Genomics UK Consortium, told me.</p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">How much faster is it spreading? </h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>It was first detected in September. In November around a quarter of cases in London were the new variant. This reached nearly two-thirds of cases in mid-December. </p></div></div>
  80. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>You can see how the variant has come to dominate the results of testing in some centres such as the Milton Keynes Lighthouse Laboratory.</p></div></div>
  81. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Mathematicians have been running the numbers on the spread of different variants in an attempt to calculate how much of an edge this one might have. </p></div></div>
  82. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>But teasing apart what is due to people's behaviour and what is due to the virus is hard.</p></div></div>
  83. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The figure mentioned by Prime Minister Boris Johnson was that the variant may be up to 70% more transmissible. He said this may be increasing the R number - which indicates if an epidemic is growing or shrinking - by 0.4. </p></div></div>
  84. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>During the talk he said: "It is really too early to tell… but from what we see so far it is growing very quickly, it is growing faster than [a previous variant] ever grew, but it is important to keep an eye on this."</p></div></div>
  85. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>There is no "nailed on" figure for how much more infectious the variant may be. Scientists, whose work is not yet public, have told me figures both much higher and much lower than 70%. </p></div></div>
  86. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>But there remain questions about whether it is any more infectious at all. </p></div></div>
  87. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>"The amount of evidence in the public domain is woefully inadequate to draw strong or firm opinions on whether the virus has truly increased transmission," said Prof Jonathan Ball, a virologist at the University of Nottingham. </p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">How far has it spread?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>It is thought the variant either emerged in a patient in the UK or has been imported from a country with a lower ability to monitor coronavirus mutations.</p></div></div>
  88. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The variant can be found across the UK, except Northern Ireland, but it is heavily concentrated in London, the South East and eastern England. Cases elsewhere in the country do not seem to have taken off. </p></div></div>
  89. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Data from Nextstrain, which has been monitoring the genetic codes of the viral samples around the world, suggest cases in Denmark and Australia have come from the UK. The Netherlands has also reported cases.</p></div></div>
  90. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>A similar variant that has emerged in South Africa shares some of the same mutations, but appears to be unrelated to this one.</p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">Has this happened before?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The virus that was first detected in Wuhan, China, is not the same one you will find in most corners of the world. </p></div></div>
  91. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The <a href="https://www.biorxiv.org/content/10.1101/2020.04.29.069054v1" class="css-yidnqd-InlineLink e1no5rhv0">D614G mutation emerged in Europe in February</a> and became the globally dominant form of the virus. </p></div></div>
  92. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Another, called A222V, spread across Europe and <a href="https://www.medrxiv.org/content/10.1101/2020.10.25.20219063v2.full.pdf" class="css-yidnqd-InlineLink e1no5rhv0">was linked to people's summer holidays in Spain</a>.</p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">What do we know about the new mutations?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>An initial analysis of the new variant has been published and <a href="https://virological.org/t/preliminary-genomic-characterisation-of-an-emergent-sars-cov-2-lineage-in-the-uk-defined-by-a-novel-set-of-spike-mutations/563" class="css-yidnqd-InlineLink e1no5rhv0">identifies 17 potentially important alterations</a>. </p></div></div>
  93. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>There have been changes to the spike protein - this is the key the virus uses to unlock the doorway to our body's cells. </p></div></div>
  94. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>One mutation called N501Y alters the most important part of the spike, known as the "receptor-binding domain".</p></div></div>
  95. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>This is where the spike makes first contact with the surface of our body's cells. Any changes that make it easier for the virus to get inside are likely to give it an edge. </p></div></div>
  96. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>"It looks and smells like an important adaptation," said Prof Loman.</p></div></div>
  97. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The other mutation - a H69/V70 deletion, in which a small part of the spike is removed - has emerged several times before, including famously in infected mink.</p></div></div>
  98. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Work by Prof Ravi Gupta at the University of Cambridge has suggested this mutation increases infectivity two-fold in lab experiments. </p></div></div>
  99. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Prof Gupta told me: "It is rapidly increasing, that's what's worried government, we are worried, most scientists are worried."</p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">Where has it come from?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The variant is unusually highly mutated.</p></div></div>
  100. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>The most likely explanation is the variant has emerged in a patient with a weakened immune system that was unable to beat the virus.</p></div></div>
  101. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Instead their body became a breeding ground for the virus to mutate. </p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">Does it make the infection more deadly?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>There is no evidence to suggest that it does, although this will need to be monitored.</p></div></div>
  102. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>However, just increasing transmission would be enough to cause problems for hospitals. </p></div></div>
  103. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>If the new variant means more people are infected more quickly, that would in turn lead to more people needing hospital treatment.</p></div></div><p data-component="crosshead-block" class="css-mysbf6-ComponentWrapper-CrossheadComponentWrapper e1xue1i84"><h2 class="css-qozapo-StyledHeading e1fj1fc10">Will the vaccines work against the new variant?</h2></p><div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Almost certainly yes, or at least for now. </p></div></div>
  104. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>All three leading vaccines develop an immune response against the existing spike, which is why the question comes up.</p></div></div>
  105. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Vaccines train the immune system to attack several different parts of the virus, so even though part of the spike has mutated, the vaccines should still work.</p></div></div>
  106. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>"But if we let it add more mutations, then you start worrying," said Prof Gupta.</p></div></div>
  107. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>"This virus is potentially on a pathway for vaccine escape, it has taken the first couple of steps towards that."</p></div></div>
  108. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>Vaccine escape happens when the virus changes so it dodges the full effect of the vaccine and continues to infect people.</p></div></div>
  109. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>This may be the most concerning element of what is happening with the virus.</p></div></div>
  110. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>This variant is just the latest to show the virus is continuing to adapt as it infects more and more of us. </p></div></div>
  111. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>A presentation by Prof David Robertson, from the University of Glasgow on Friday, concluded: "<a href="https://www.youtube.com/watch?v=G3CT9N89L-c&amp;feature=youtu.be" class="css-yidnqd-InlineLink e1no5rhv0">The virus will probably be able to generate vaccine escape mutants</a>."</p></div></div>
  112. <div data-component="text-block" class="css-uf6wea-RichTextComponentWrapper e1xue1i83"><div class="css-83cqas-RichTextContainer e5tfeyi2"><p>That would put us in a position similar to flu, where the vaccines need to be regularly updated. Fortunately the vaccines we have are very easy to tweak.</p></div></div></p>
  113. </main>
  114. </article>
  115. <hr>
  116. <footer>
  117. <p>
  118. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  119. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  120. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  121. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  122. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  123. </p>
  124. <template id="theme-selector">
  125. <form>
  126. <fieldset>
  127. <legend>Thème</legend>
  128. <label>
  129. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  130. </label>
  131. <label>
  132. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  133. </label>
  134. <label>
  135. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  136. </label>
  137. </fieldset>
  138. </form>
  139. </template>
  140. </footer>
  141. <script type="text/javascript">
  142. function loadThemeForm(templateName) {
  143. const themeSelectorTemplate = document.querySelector(templateName)
  144. const form = themeSelectorTemplate.content.firstElementChild
  145. themeSelectorTemplate.replaceWith(form)
  146. form.addEventListener('change', (e) => {
  147. const chosenColorScheme = e.target.value
  148. localStorage.setItem('theme', chosenColorScheme)
  149. toggleTheme(chosenColorScheme)
  150. })
  151. const selectedTheme = localStorage.getItem('theme')
  152. if (selectedTheme && selectedTheme !== 'undefined') {
  153. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  154. }
  155. }
  156. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  157. window.addEventListener('load', () => {
  158. let hasDarkRules = false
  159. for (const styleSheet of Array.from(document.styleSheets)) {
  160. let mediaRules = []
  161. for (const cssRule of styleSheet.cssRules) {
  162. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  163. continue
  164. }
  165. // WARNING: Safari does not have/supports `conditionText`.
  166. if (cssRule.conditionText) {
  167. if (cssRule.conditionText !== prefersColorSchemeDark) {
  168. continue
  169. }
  170. } else {
  171. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  172. continue
  173. }
  174. }
  175. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  176. }
  177. // WARNING: do not try to insert a Rule to a styleSheet you are
  178. // currently iterating on, otherwise the browser will be stuck
  179. // in a infinite loop…
  180. for (const mediaRule of mediaRules) {
  181. styleSheet.insertRule(mediaRule.cssText)
  182. hasDarkRules = true
  183. }
  184. }
  185. if (hasDarkRules) {
  186. loadThemeForm('#theme-selector')
  187. }
  188. })
  189. </script>
  190. </body>
  191. </html>