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

3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
3 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  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>Pourquoi mesurer le taux de CO2 peut-il nous aider à lutter contre la COVID-19 ? (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://www.adioscorona.org/questions-reponses/2021-04-15-mesurer-taux-co2-pour-lutter-contre-covid19.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>Pourquoi mesurer le taux de CO2 peut-il nous aider à lutter contre la COVID-19 ?</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://www.adioscorona.org/questions-reponses/2021-04-15-mesurer-taux-co2-pour-lutter-contre-covid19.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p><strong>
  71. L’aération est une des solutions majeures pour lutter contre les maladies transmises par aérosol comme la COVID-19. Mais comment savoir si une pièce est suffisamment aérée ? Le taux de CO2 dans une pièce, un gaz produit lors de la respiration, nous informe sur le renouvellement de l’air dans la pièce. Sa mesure peut servir d’indicateur d’aération !
  72. </strong></p>
  73. <div id="a-target">
  74. <p><img src="https://adioscorona.org/assets/images/CO2-classe-ecole-aeration.jpg"></p>
  75. <p>Malgré tous les efforts mis en œuvre, l’épidémie de COVID-19 se poursuit et les phases de confinement – déconfinement – reconfinement s’enchaînent. Le coronavirus se transmet principalement par des gouttelettes et aérosols contenant des particules de SARS-CoV-2 (voir la question <a href="https://www.adioscorona.org/questions-reponses/2020-04-23-comment-le-covid-19-s%E2%80%99attrape-t-il.html">Comment la COVID-19 s’attrape-t-elle ?</a>). Les aérosols sont des micro-gouttelettes produites lorsque l’on respire. Dans les lieux clos, ils se retrouvent en suspension dans l’air jusqu’à plusieurs mètres de la personne qui les a produites, et peuvent y rester pendant plusieurs heures.</p>
  76. <p>Le masque filtre une partie des aérosols, mais il devient moins efficace si la quantité d’aérosols est trop importante. Une autre mesure, très efficace pour limiter la transmission de virus transmis par aérosols, est de réduire la concentration d’aérosols en les diluant. Pour diminuer la concentration des aérosols dans une pièce, il suffit d’aérer avec de l’air extérieur ! Il faut alors ouvrir grand les fenêtres pour renouveler complètement l’air de la pièce.</p>
  77. <p><strong>L’air est-il suffisamment renouvelé dans les lieux clos ?</strong></p>
  78. <p>Que ce soit dans les écoles, dans les entreprises ou dans les transports en commun, il semble que les protocoles actuels de ventilation soient souvent insuffisants. Il est important d’ouvrir les fenêtres dans les lieux clos, quelques minutes toutes les 30 min, et en continu dans les transports en commun (rames de métro, de RER, bus et tramway) pour diluer la quantité d’aérosols et limiter la propagation du coronavirus.</p>
  79. <p><strong>En quoi le taux de CO2 nous informe t-il sur la quantité d’aérosols ?</strong></p>
  80. <p>Le CO2 est produit par la respiration humaine en même temps que les aérosols. Plus on respire, plus le CO2 et les aérosols s’accumulent dans l’air d’un lieu clos. Le taux de CO2 nous informe donc sur la concentration d’aérosols. Contrairement aux aérosols viraux, l’avantage avec le CO2 c’est qu’il est très facile de mesurer en temps réel sa concentration avec des capteurs !</p>
  81. <p><strong>Quel est le taux de CO2 idéal ?</strong></p>
  82. <p>Le CO2 étant produit à chaque expiration, il nous indique la proportion d’air qui est déjà passée par des poumons humains. Le taux normal de CO2 dans l’air extérieur est de 400 ppm (parties par million). Une augmentation de 400 ppm par rapport au taux de base (c’est-à-dire une valeur de 800 ppm) correspond à un air dont 1% est déjà passé par des poumons humains. En France, le Haut Conseil de la Santé Publique recommande de ne pas dépasser 800 ppm dans les commerces.
  83. Si l’air d’une pièce est régulièrement renouvelé, la concentration en CO2 restera en dessous de 800 ppm et la concentration en aérosols sera faible. Dans le cadre de la lutte contre la COVID-19, mesurer le taux de CO2 est une façon de vérifier si l’air est suffisamment renouvelé.</p>
  84. <h4><u>Sources</u></h4>
  85. <p>Etude de modélisation qui montre que l’aération d’une pièce combine au port du masque par tous les individus dans la pièce peut réduire par 5 à 10 le risque d’infection.</p>
  86. <a href="https://pubmed.ncbi.nlm.nih.gov/33153155/" target="_blank">Lelieveld, J., Helleis, F., Borrmann, S., Cheng, Y., Drewnick, F., Haug, G., ... &amp; Pöschl, U. (2020). Model Calculations of Aerosol Transmission and Infection Risk of COVID-19 in Indoor Environments. International Journal of Environmental Research and Public Health, 17(21), 8114.</a>
  87. <br>
  88. <p>Les particules de SARS-CoV-2 peuvent rester stables (même taille, morphologie et aspect) dans des aérosols pendant 16h, ce qui suggère que ces particules restent infectieuses après un long délai en suspension.</p>
  89. <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7454081/" target="_blank">Fears, A. C., Klimstra, W. B., Duprex, P., Hartman, A., Weaver, S. C., Plante, K. S., ... &amp; Roy, C. J. (2020). Persistence of severe acute respiratory syndrome coronavirus 2 in aerosol suspensions. Emerging infectious diseases, 26(9), 2168.</a>
  90. <br>
  91. <p>L’aération des transports en commun est déjà recommandée dans plusieurs pays : aux Etats-Unis</p>
  92. <a href="https://trimet.org/health/" target="_blank">Buses will run with open windows (weather permitting).</a>
  93. <br>
  94. <p>L’aération des transports en commun est déjà recommandée dans plusieurs pays : au Japon.</p>
  95. <a href="https://www.tokyometro.jp/lang_en/info/205771.html?width=816&amp;height=650" target="_blank">Passengers who will use Tokyo Metro lines during rush hour are asked to be understanding and cooperative with regard to opening the windows of train cars in order to ventilate their interior.</a>
  96. <br>
  97. <p>L’aération des transports en commun est déjà recommandée dans plusieurs pays : en Corée.</p>
  98. <a href="http://m.koreaherald.com/amp/view.php?ud=20200512000313" target="_blank">Air-conditioned buses in Seoul to run with windows open amid virus woes.</a>
  99. <br>
  100. <p>Recommandations du Québec pour l’aération dans les écoles et en milieu de soins. Ventilation et transmission de la covid-19 en milieu scolaire et en milieu de soins.</p>
  101. <a href="https://publications.msss.gouv.qc.ca/msss/fichiers/2020/20-210-375W.pdf" target="_blank">Rapport du groupe d’experts scientifiques et techniques (janvier 2021). Dernier accès le 14/04/21</a>
  102. <br>
  103. <p>Article en français qui explique comment bien aérer les pièces et qui explique comment utiliser les chiffres de la concentration en CO2. La concentration en CO2 de l’air expiré est environ 4%, soit 40 000 ppm. Une dilution de l’air expiré d’un facteur 50 (2% de l’air de la pièce est de l’air expiré) ajoute ainsi une concentration de CO2 de 40 000/50=800 ppm. La concentration lue sur le capteur correspond à la somme de la concentration extérieure et de cet écart, soit 400+ 800=1200 ppm. De même, une concentration totale de 800 ppm correspond à un écart de 400 ppm avec l’air extérieur, soit une dilution de 400/40 000=0,01=1%.</p>
  104. <a href="https://www.pourlascience.fr/sr/idees-physique/comment-bien-aerer-les-pieces-20353.php" target="_blank">B. Semin, E. Kierlik, J-M. Courty. (2000). Comment bien aérer les pièces. Pour la science, 518.</a>
  105. <br>
  106. <p>Covid-19 : avis sur le protocole sanitaire renforcé proposé pour les commerces, Haut Conseil de la santé publique</p>
  107. <a href="https://www.hcsp.fr/Explore.cgi/AvisRapportsDomaine?clefr=946" target="_blank">HCSP, 22/11/2020</a>
  108. <br>
  109. <p>Étude de mesure de l’efficacité de filtrations de différents masques.</p>
  110. <a href="https://pubs.acs.org/doi/10.1021/acsnano.0c03252" target="_blank">Konda, A., Prakash, A., Moss, G. A., Schmoldt, M., Grant, G. D., &amp; Guha, S. (2020). Aerosol Filtration Efficiency of Common Fabrics Used in Respiratory Cloth Masks. ACS Nano.</a>
  111. <br>
  112. <p>Un enfant a été contaminé suite à un trajet en bus dans lequel voyageaient également deux personnes en provenance de Wuhan, qui se sont avérées atteintes de la COVID-19.</p>
  113. <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7108143/" target="_blank">Jiehao, C., Jin, X., Daojiong, L., Zhi, Y., Lei, X., Zhenghai, Q., ... &amp; Mei, Z. (2020). A case series of children with 2019 novel coronavirus infection: clinical and epidemiological features. Clinical Infectious Diseases, 71(6), 1547-1551.</a>
  114. <br>
  115. <p>Plusieurs personnes ont été contaminées suite à un trajet en bus de 1h40 alors que l’individu contagieux atteint de COVID-19 était à plus de 6 mètres.</p>
  116. <a href="https://www.researchgate.net/publication/340587916_Airborne_Transmission_of_COVID-19_Epidemiologic_Evidence_from_Two_Outbreak_Investigations" target="_blank">Shen, Y., Li, C., Dong, H., Wang, Z., Martinez, L., Sun, Z., ... &amp; Xu, G. (2020). Airborne transmission of COVID-19: epidemiologic evidence from two outbreak investigations.</a>
  117. <br>
  118. <p>Une étude détaillée de personnes qui ont voyagé en train entre le 19 décembre 2019 et le 6 mars 2020 en Chine, a révélé que 234 passagers ont probablement été contaminés dans le train. Dans au moins 13 cas, la contamination a eu lieu alors que l’individu contagieux était sorti du train. Ceux qui étaient dans la même rangée que l’individu contagieux ont eu 10 fois plus de risque d’attraper la COVID-19 que ceux placés une ou deux rangées plus loin.</p>
  119. <a href="https://academic.oup.com/cid/article/72/4/604/5877944" target="_blank">Hu, M., Lin, H., Wang, J., Xu, C., Tatem, A. J., Meng, B., ... &amp; Lai, S. (2020). The risk of COVID-19 transmission in train passengers: an epidemiological and modelling study. Clinical Infectious Diseases.</a>
  120. <br>
  121. <p>Une étude des 103 cas de contamination COVID-19 possiblement liés au travail en Asie jusqu'à avril 2020 montre que les professions les plus à risque d’attraper le coronavirus SARS-CoV-2 sont, après les personnels soignants, les chauffeurs de bus et de taxi et les travailleurs dans le secteur du transport.</p>
  122. <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0233588" target="_blank">Lan, F. Y., Wei, C. F., Hsu, Y. T., Christiani, D. C., &amp; Kales, S. N. (2020). Work-related COVID-19 transmission in six Asian countries/areas: A follow-up study. PloS one, 15(5), e0233588.</a>
  123. <br>
  124. <p>Une analyse de 318 cas de contamination en “cluster” au début de l’épidémie (quand les gens ne portaient pas/peu de masques) a montré que 34% des cas ont eu lieu dans un transport en commun, avec une moyenne de 3,8 personnes infectées par voyage. </p>
  125. <a href="https://onlinelibrary.wiley.com/doi/full/10.1111/ina.12766" target="_blank">Qian, H., Miao, T., Liu, L., Zheng, X., Luo, D., &amp; Li, Y. (2020). Indoor transmission of SARS‐CoV‐2. Indoor air.</a>
  126. <br>
  127. <p>Etude sur un modèle animal (hamster) qui montre que le SARS-CoV-2 se transmet par aérosols sans contact direct entre hamsters.</p>
  128. <a href="https://www.nature.com/articles/s41586-020-2342-5" target="_blank">Sia, S. F., Yan, L. M., Chin, A. W., Fung, K., Choy, K. T., Wong, A. Y., ... &amp; Yen, H. L. (2020). Pathogenesis and transmission of SARS-CoV-2 in golden hamsters. Nature, 583(7818), 834-838. </a>
  129. <br>
  130. <p>Etude sur un modèle animal (furets) qui montre que le SARS-CoV-2 se transmet par aérosols sans contact direct entre furets placés dans des cages différentes mais sous le même flux d’air.</p>
  131. <a href="https://www.nature.com/articles/s41467-020-17367-2" target="_blank">Richard, M., Kok, A., de Meulder, D., Bestebroer, T. M., Lamers, M. M., Okba, N. M., ... &amp; Herfst, S. (2020). SARS-CoV-2 is transmitted via contact and via the air between ferrets. Nature communications, 11(1), 1-6.</a>
  132. <br>
  133. <p>Cette étude réalisée dans une université de Taipei (Taiwan) démontre le rôle de la ventilation pour diminuer la transmission de la tuberculose, maladie respiratoire qui se transmet par aérosols. La concentration de CO2 a été utilisée pour mesurer la ventilation. Cette étude a montré qu’une ventilation qui permet d’avoir une concentration de CO2 inférieure à 1000 ppm entraîne une diminution de 97% de l’incidence de la tuberculose chez les cas contacts.</p>
  134. <a href="https://onlinelibrary.wiley.com/doi/full/10.1111/ina.12639" target="_blank">Du, C. R., Wang, S. C., Yu, M. C., Chiu, T. F., Wang, J. Y., Chuang, P. C., ... &amp; Fang, C. T. (2020). Effect of ventilation improvement during a tuberculosis outbreak in underventilated university buildings. Indoor air, 30(3), 422-432.</a>
  135. <br>
  136. <p>Etude comparative dans une résidence d’étudiants entre un bâtiment bien ventilé (rénové récemment avec un système de ventilation alimenté 100% par de l’air extérieur) et un bâtiment mal ventilé (l’air est recyclé sans apport d’air extérieur). Le taux de CO2 est en moyenne de 1230 ppm dans le bâtiment bien ventilé et de 1492 ppm dans le bâtiment mal ventilé. Le taux de ventilation par pièce est en moyenne de 11,8 L/s (Litre par seconde) dans le bâtiment bien ventilé et de 4 L/s dans le bâtiment mal ventilé. Le taux d’infection par des maladies transmises par aérosols (ARI, acute respiratory infection) est en moyenne de 2,1% dans le bâtiment bien ventilé et de 97,9 % dans le bâtiment mal ventilé.</p>
  137. <a href="https://www.sciencedirect.com/science/article/pii/S0160412019341108" target="_blank">Zhu, S., Jenkins, S., Addo, K., Heidarinejad, M., Romo, S. A., Layne, A., ... &amp; Srebric, J. (2020). Ventilation and laboratory confirmed acute respiratory infection (ARI) rates in college residence halls in College Park, Maryland. Environment international, 137, 105537.</a>
  138. <br>
  139. <p>Dans une église, un choriste qui avait la COVID-19 et qui a chanté à plusieurs reprises a infecté 12 personnes. Les enregistrements vidéo des offices ont montré que les personnes qui ont été infectées étaient assises dans la même allée, jusqu'à 15 m du choriste, sans contact physique étroit, ce qui suggère une transmission par voie aérienne.</p>
  140. <a href="https://wwwnc.cdc.gov/eid/article/27/6/21-0465_article?ACSTrackingID=USCDC_333-DM54062&amp;ACSTrackingLabel=Latest%20Expedited%20Articles%20-%20Emerging%20Infectious%20Diseases%20Journal%20-%20April%205%2C%202021&amp;deliveryName=USCDC_333-DM54062" target="_blank">Katelaris, A. L., Wells, J., Clark, P., Norton, S., Rockett, R., Arnott, A., ... &amp; Bag, S. K. (2021). Epidemiologic Evidence for Airborne Transmission of SARS-CoV-2 during Church Singing, Australia, 2020. Emerging Infectious Diseases, 27(6).</a>
  141. </article>
  142. <hr>
  143. <footer>
  144. <p>
  145. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  146. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  147. </svg> Accueil</a> •
  148. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  149. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  150. </svg> Suivre</a> •
  151. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  153. </svg> Pro</a> •
  154. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  155. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  156. </svg> Email</a> •
  157. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  158. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  159. </svg> Légal</abbr>
  160. </p>
  161. <template id="theme-selector">
  162. <form>
  163. <fieldset>
  164. <legend><svg class="icon icon-brightness-contrast">
  165. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  166. </svg> Thème</legend>
  167. <label>
  168. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  169. </label>
  170. <label>
  171. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  172. </label>
  173. <label>
  174. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  175. </label>
  176. </fieldset>
  177. </form>
  178. </template>
  179. </footer>
  180. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  181. <script>
  182. function loadThemeForm(templateName) {
  183. const themeSelectorTemplate = document.querySelector(templateName)
  184. const form = themeSelectorTemplate.content.firstElementChild
  185. themeSelectorTemplate.replaceWith(form)
  186. form.addEventListener('change', (e) => {
  187. const chosenColorScheme = e.target.value
  188. localStorage.setItem('theme', chosenColorScheme)
  189. toggleTheme(chosenColorScheme)
  190. })
  191. const selectedTheme = localStorage.getItem('theme')
  192. if (selectedTheme && selectedTheme !== 'undefined') {
  193. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  194. }
  195. }
  196. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  197. window.addEventListener('load', () => {
  198. let hasDarkRules = false
  199. for (const styleSheet of Array.from(document.styleSheets)) {
  200. let mediaRules = []
  201. for (const cssRule of styleSheet.cssRules) {
  202. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  203. continue
  204. }
  205. // WARNING: Safari does not have/supports `conditionText`.
  206. if (cssRule.conditionText) {
  207. if (cssRule.conditionText !== prefersColorSchemeDark) {
  208. continue
  209. }
  210. } else {
  211. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  212. continue
  213. }
  214. }
  215. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  216. }
  217. // WARNING: do not try to insert a Rule to a styleSheet you are
  218. // currently iterating on, otherwise the browser will be stuck
  219. // in a infinite loop…
  220. for (const mediaRule of mediaRules) {
  221. styleSheet.insertRule(mediaRule.cssText)
  222. hasDarkRules = true
  223. }
  224. }
  225. if (hasDarkRules) {
  226. loadThemeForm('#theme-selector')
  227. }
  228. })
  229. </script>
  230. </body>
  231. </html>