Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Ви не можете вибрати більше 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 роки тому
3 роки тому
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  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>Tag #école — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #école">
  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. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #école</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 rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2021/11/19/" title="Lien permanent vers cet article">Capteurs</a> (2021-11-19)</h2>
  75. <blockquote>
  76. <p>La qualité de l’air dans les écoles est une préoccupation du réseau scolaire depuis de nombreuses années, et ce, bien avant la pandémie de COVID-19. Récemment, le ministère de l’Éducation (MEQ) a fait l’acquisition de 90&#8239;000&nbsp;lecteurs de dioxyde de carbone (CO<sub>2</sub>). Ces outils permettront aux directions d’établissement de <mark>prendre des actions</mark> pour assurer le maintien d’une bonne qualité de l’air dans les classes de leur école.</p>
  77. <p>Les lecteurs de CO<sub>2</sub> seront installés par le Centre de services scolaire de Montréal (CSSDM) dans toutes les classes.</p>
  78. <p><cite><em><a href="http://app.dialoginsight.com/T/OFSYS/SM3/365/2/S/F/1936/21070517/ZHsjKgZe.html">Installation des lecteurs de CO<sub>2</sub></a></em> (<a href="/david/cache/2021/7e777a9c9804873a1a80623828f7003f/">cache</a>)</cite></p>
  79. </blockquote>
  80. <p>La bonne nouvelle de la journée.</p>
  81. <p>On pourra toujours discuter des seuils plus tard, pour l’instant&nbsp;: installons et mesurons.</p>
  82. <h2><a href="/david/2021/11/10/" title="Lien permanent vers cet article">Éducation</a> (2021-11-10)</h2>
  83. <blockquote>
  84. <p>L’éducation, c’est surtout de la pacification des jeunes foules. […] <mark>Les futurs dominants se bardent de diplômes pour s’innocenter de l’exploitation qu’ils feront subir.</mark> S’ils se retrouvent au sommet, c’est parce qu’ils ont bataillé pour recevoir l’onction méritocratique. Mais déjà, pour une salle des profs lambda, l’idée que l’écoledelarépublique puisse trier socialement les enfants au lieu d’en faire des citoyens illuminés par la connaissance, c’est dur à avaler.</p>
  85. <p><cite><em><a href="https://lundi.am/Je-veux-plus-aller-a-l-ecole">«&nbsp;Je veux plus aller à l’école&nbsp;»</a></em> (<a href="/david/cache/2021/37cf7bad62d7e5b4e5244b9a1ddf9713/">cache</a>)</cite></p>
  86. </blockquote>
  87. <p>Il y a des jours où je me demande pourquoi est-ce que je l’amène à l’école. Et puis il n’y en a pas d’autres.</p>
  88. <h2><a href="/david/2021/10/28/" title="Lien permanent vers cet article">Lâcheté</a> (2021-10-28)</h2>
  89. <blockquote>
  90. <p>On s’était fait, à l’usure, à l’idée monstrueuse que le Covid-19&nbsp;était une maladie juste pour les vieux et les faibles. <mark>On se fait à l’idée, non moins monstrueuse, que ce ne sera bientôt plus qu’une maladie de pays pauvres.</mark> Vae victis. Le «&nbsp;lâche soulagement&nbsp;» dont parlait Édouard Daladier après les accords de Munich… On est sauvés et tant pis pour le reste du monde. Préparez Noël. Consommez. Oubliez.</p>
  91. <p><cite><em><a href="https://prototypekblog.wordpress.com/2021/10/28/on-sous-estime-ce-qui-sest-passe/">On sous-estime ce qui s’est passé</a></em> (<a href="/david/cache/2021/b0518096cdfacc89f9d5792966e5a3b7/">cache</a>)</cite></p>
  92. </blockquote>
  93. <p>Il va falloir oublier de la même façon que l’on doit fermer les yeux sur tellement de choses au quotidien. Pour conserver un semblant de santé mentale décente. Pour accepter de vivre au dépens de tant d’autres. Pour masquer cela aux suivant·es.</p>
  94. <hr />
  95. <blockquote>
  96. <p>Les élèves sont invités à se déguiser et nous voulons vous sensibiliser sur ce qui est accepté ou non à l’école.</p>
  97. <p>Il est inacceptable de porter un costume faisant la promotion ou la démonstration de violence. Ainsi, nous vous demandons d’éviter les éléments suivants&nbsp;:</p>
  98. <ul>
  99. <li>Sang et marques de violence&#8239;;</li>
  100. <li>Outils tels que couteaux, haches et armes en tous genres&#8239;;</li>
  101. <li>Costumes thématiques d’émissions ou de films violents.</li>
  102. </ul>
  103. <p><cite>Extrait d’un courriel de l’école.</cite></p>
  104. </blockquote>
  105. <p>Quelle forme de violence souhaite-t-on cacher aux enfants&#8239;? Quelles discussions ces représentations pourraient provoquer&#8239;? Avec quel(s) arbitre(s)&#8239;?!</p>
  106. <hr />
  107. <blockquote>
  108. <p>Si l’argent n’existait plus on serait tellement libres.</p>
  109. </blockquote>
  110. <p>Tes réflexions sont parfois tellement troublantes fils, tu n’as pas idée d’à quel point ça m’inspire et alimente un espoir vacillant.</p>
  111. <hr />
  112. <blockquote>
  113. <p>C’est peut-être simplement dans le «&nbsp;sourire [des enfants] qui [n]ous font éclater la poitrine&nbsp;» que nous retrouvons cette force d’affronter l’incertitude de la vie et le courage d’être.</p>
  114. <p><cite><em>Rupture(s)</em>, Claire Marin</cite></p>
  115. </blockquote>
  116. <h2><a href="/david/2021/09/25/" title="Lien permanent vers cet article">Atelier</a> (2021-09-25)</h2>
  117. <details>
  118. <summary>Déplier pour lire le contenu de la publication</summary>
  119. <p>J’ai motivé une rencontre autour des <a href="/david/2021/06/19/" title="Échecs">échecs</a> entre enfants de sa classe. Quelques heures au parc et je peux déjà identifier qu’il y a trop d’attentes de la part des parents pour pouvoir aménager un espace d’apprentissage qui soit enthousiasmant.</p>
  120. <p>Comment divertir leur attention de manière non violente&#8239;? Si je plaide en faveur d’un moment entre jeunes, quelle devient alors ma place&#8239;? De quelle façon discuter de positions sans que les joueur·euses se sentent jugé·es&#8239;?</p>
  121. <p>Quelques idées&nbsp;:</p>
  122. <ul>
  123. <li>faire jouer les adultes entre ell·eux, à côté&#8239;;</li>
  124. <li>imaginer de nouvelles façons d’équilibrer les niveaux&#8239;;</li>
  125. <li>me retenir de jouer.</li>
  126. </ul>
  127. <p>Il n’y a pas que les jeunes qui ont à apprendre de leurs propres échecs…</p>
  128. </details>
  129. <h2><a href="/david/2021/09/24/" title="Lien permanent vers cet article">Militantisme</a> (2021-09-24)</h2>
  130. <details>
  131. <summary>Déplier pour lire le contenu de la publication</summary>
  132. <p>En créant un espace de <a href="/david/2021/09/01/" title="Rentrée">discussion entre parents</a>, cela nous a permis d’élargir aussi le champ des interactions et d’introduire le politique dans notre groupe.</p>
  133. <p>C’est l’occasion de partager sur le <a href="https://fr.wikipedia.org/wiki/Pensionnats_pour_Autochtones_au_Canada#Journ%C3%A9e_nationale_de_la_v%C3%A9rit%C3%A9_et_de_la_r%C3%A9conciliation">chandail orange</a> et comment l’aborder en famille, de faire circuler des pétitions importantes pour l’école, d’organiser des activités extra-scolaires.</p>
  134. <p>Après une année et demie de Covid, on sent bien que les échanges entre personnes — qui feraient de toute façon partie du même <em>cluster</em> — sont plus rapides et fluides qu’à l’accoutumé.</p>
  135. <p>Une autre forme d’intégration…</p>
  136. </details>
  137. <h2><a href="/david/2021/09/01/" title="Lien permanent vers cet article">Rentrée</a> (2021-09-01)</h2>
  138. <details>
  139. <summary>Déplier pour lire le contenu de la publication</summary>
  140. <p>Lettre écrite ce soir à chaud. On verra si je l’envoie finalement demain. L’année pourrait être compliquée.</p>
  141. <blockquote>
  142. <p>Chers parents,</p>
  143. <p>Je suis le père d’Alexandre (on vient souvent en vélo) et j’ai récupéré vos courriels dans le bottin incomplet de l’année dernière, il manque 6&nbsp;familles. S’il y a un autre espace de discussion entre parents je suis prêt à le rejoindre.</p>
  144. <p>Je ne sais pas trop par quoi commencer suite au rendez-vous de ce soir avec l’enseignant de nos enfants, je me sens un peu démuni et anxieux. Il y a plusieurs choses qui me préoccupent et qui ne peuvent être qu’intuitions après 1h de visio et quelques jours de classe&nbsp;:</p>
  145. <ol>
  146. <li>Le fait qu’il n’y ait eu aucune mention d’empathie, de bienveillance ou d’émotions dans les propos tenus me rend assez circonspect. Que nos enfants soient doués dans les matières scolaires, on le sait, leurs défis sont ailleurs.</li>
  147. <li>Le déni d’avoir besoin de se faire accompagner dans ce nouvel environnement auquel ne s’appliquent plus les mêmes règles ou schémas de pensées. L’ennui, l’attention ou la curiosité sont des concepts qui prennent une nouvelle dimension dans ce contexte.</li>
  148. <li>Le manque de considération lorsqu’on soulève des problèmes qui sont déjà survenus et l’attitude défensive qui en découle. J’ai l’impression que cela n’est pas propice au dialogue et à l’apaisement des points déjà chauds (intégration, évaluation).</li>
  149. </ol>
  150. <p>Il y en aurait d’autres et je vous laisse rebondir si vous le sentez, je n’arrive pas avec des solutions mais peut-être que si nous sommes nombreux·ses à ressentir des frustrations nous pourrions déjà nous serrer les coudes et envisager des solutions collectives pour aborder ces prochains mois de manière plus sereine.</p>
  151. <p>L’un des défis que nous avons est de rendre l’école suffisamment attrayante pour permettre à notre fils de développer des relations sociales avec ses amis. J’espère que cette année ne provoquera pas une forme de rejet suite à une expérience déplaisante.</p>
  152. <p>Bonne soirée,<br />
  153. David</p>
  154. <p>PS&nbsp;: J’espère pouvoir sourire en relisant ce courriel dans quelques mois, au pire ça aura permis de prendre un premier contact maladroit&nbsp;:-).</p>
  155. <p>PPS&nbsp;: Si vous ne souhaitez pas prendre part à ces échanges, je suis désolé de ne pas avoir respecté votre consentement en premier lieu compte tenu de la situation. Faites-le moi savoir.</p>
  156. </blockquote>
  157. <p><mark>Finalement envoyé.</mark> Beaucoup de discussions depuis 💚.</p>
  158. </details>
  159. <h2><a href="/david/2021/06/01/" title="Lien permanent vers cet article">Pédagogie</a> (2021-06-01)</h2>
  160. <details>
  161. <summary>Déplier pour lire le contenu de la publication</summary>
  162. <blockquote>
  163. <p>Nous, pédagogues du début du XXIème siècle, avons reçu un héritage plutôt simple mais maintenant totalement obsolète. <mark>Nous sommes libres de ne pas accepter cet héritage en toute conscience.</mark> Bien évidemment je ne me reconnais pas dans le système militaire Prussien encore fortement en place dans les systèmes éducatifs (les résistances aux changements demeurent vivaces), alors que les textes officiels du programme de l’éducation nationale préconisent l’inverse, ou du moins d’autres formes d’enseignement, davantage adapatifs.</p>
  164. <p><cite><em><a href="https://pedagogieagile.com/2021/05/22/pedagogie-vs-societe/">Pédagogie vs société&#8239;?</a></em> (<a href="/david/cache/2021/2ad199083faa7d454a78412588a7773a/">cache</a>)</cite></p>
  165. </blockquote>
  166. <p>J’apprends beaucoup de ces rappels historiques, de ce cheminement dans le domaine de la pédagogie et de la matière vivante que cela constitue pour l’enseignant·e. Sans compter le paradoxe entre le système éducatif et la société, ce couple tension/incompréhension dont on a peut-être besoin. Ce bouc-émissaire nécessaire pour que l’on accepte de laisser son enfant dans un environnement que l’on ne contrôle pas. L’acceptation de son délabrement afin d’être certain que l’on pourrait faire mieux «&nbsp;si on avait le temps&nbsp;».</p>
  167. <p>Et si je prenais ce temps…</p>
  168. <blockquote>
  169. <p>C’est à mon sens la plus difficile des professions dans la mesure où elle ne produit rien de tangible. Elle n’est pas en dehors de nous. La pédagogie est un lien <em>invisible</em>, basé sur l’information. Elle touche uniquement l’humain en utilisant l’élément le plus complexe, c’est-à-dire le langage. La pédagogie est la compétence qui relie chaque humain pour les faire progresser, et pour faire progresser chaque génération d’humains. La pédagogie, c’est aussi la capacité à s’organiser en permanence dans un monde VICA&nbsp;: volatile, incertain, complexe, ambigu.</p>
  170. <p><cite><em><a href="https://pedagogieagile.com/2021/05/17/fin-dun-premier-cycle-agile-pedagogique/">Fin d’un premier cycle agile pédagogique</a></em> (<a href="/david/cache/2021/383f0f99a7f493b66f782d02dca6edef/">cache</a>)</cite></p>
  171. </blockquote>
  172. </details>
  173. <h2><a href="/david/2021/03/24/" title="Lien permanent vers cet article">Rareté</a> (2021-03-24)</h2>
  174. <details>
  175. <summary>Déplier pour lire le contenu de la publication</summary>
  176. <blockquote>
  177. <p>Voilà pourquoi les NFT affolent et agitent autant les internets en ce moment. Parce que chacun voit bien qu’il ne vont rien changer en surface, tout en changeant possiblement plein de choses en profondeur. Parce que de la même manière que le capitalisme linguistique s’était attaqué à la langue en tant que bien commun, cette nouvelle forme de capitalisme de la copie («&nbsp;<mark>copytalism</mark>&nbsp;» diraient nos amis anglo-saxons s’ils avaient inventé ce terme avant moi) s’attaque aux biens numériques en tant que possibles appropriations communes.</p>
  178. <p><cite><em><a href="https://www.affordance.info/mon_weblog/2021/03/nft-loriginal-et-lacopie.html">NFT&nbsp;: l’original et l’acopie</a></em> (<a href="/david/cache/2021/fe8d34354b3f82a0f5eb2158e314b8f6/">cache</a>)</cite></p>
  179. </blockquote>
  180. <p>J’observais récemment des enfants jouer dans la cour et j’étais frappé par le produit de la rareté. Un simple glaçon<sup>*</sup> devenait alors le centre de l’attention (et de la convoitise) du fait de son unicité. Cet objet — auquel des esprits toujours libres eurent tôt fait de donner des vertus quasi-magiques — était l’objet d’une controverse quant à sa destinée. Les un·es voulaient le râper pour en faire de la glycérine (véridique&#8239;!), les autres comptaient le mettre au sommet de leur château. Cette différence de points de vue a fait l’objet d’une longue négociation qui faisait sourire les parents (enfin je crois, pas facile avec les masques) mais surtout qui établissait des relations sociales.</p>
  181. <p>De cette anecdote est sorti de mon esprit — un peu moins libre — l’idée que la rareté était peut-être importante pour générer des liens sociaux. Et que le capitalisme était notre outil inter-générationnel pour conserver ces liens. Je suis rentré à la maison sur mon vélo en essayant de me <a href="/david/2021/03/18/" title="Fatigue">fatiguer</a> le plus possible…</p>
  182. <p><sup>*</sup> Ce bout de glaçon était en somme le contraire d’un marché liquide. <em>Tadum kshh.</em></p>
  183. </details>
  184. </main>
  185. <hr>
  186. <footer>
  187. <p>
  188. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  189. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  190. </svg> Accueil</a> •
  191. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  192. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  193. </svg> Suivre</a> •
  194. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  195. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  196. </svg> Pro</a> •
  197. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  198. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  199. </svg> Email</a> •
  200. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  201. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  202. </svg> Légal</abbr>
  203. </p>
  204. <template id="theme-selector">
  205. <form>
  206. <fieldset>
  207. <legend><svg class="icon icon-brightness-contrast">
  208. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  209. </svg> Thème</legend>
  210. <label>
  211. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  212. </label>
  213. <label>
  214. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  215. </label>
  216. <label>
  217. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  218. </label>
  219. </fieldset>
  220. </form>
  221. </template>
  222. </footer>
  223. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  224. <script>
  225. function loadThemeForm(templateName) {
  226. const themeSelectorTemplate = document.querySelector(templateName)
  227. const form = themeSelectorTemplate.content.firstElementChild
  228. themeSelectorTemplate.replaceWith(form)
  229. form.addEventListener('change', (e) => {
  230. const chosenColorScheme = e.target.value
  231. localStorage.setItem('theme', chosenColorScheme)
  232. toggleTheme(chosenColorScheme)
  233. })
  234. const selectedTheme = localStorage.getItem('theme')
  235. if (selectedTheme && selectedTheme !== 'undefined') {
  236. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  237. }
  238. }
  239. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  240. window.addEventListener('load', () => {
  241. let hasDarkRules = false
  242. for (const styleSheet of Array.from(document.styleSheets)) {
  243. let mediaRules = []
  244. for (const cssRule of styleSheet.cssRules) {
  245. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  246. continue
  247. }
  248. // WARNING: Safari does not have/supports `conditionText`.
  249. if (cssRule.conditionText) {
  250. if (cssRule.conditionText !== prefersColorSchemeDark) {
  251. continue
  252. }
  253. } else {
  254. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  255. continue
  256. }
  257. }
  258. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  259. }
  260. // WARNING: do not try to insert a Rule to a styleSheet you are
  261. // currently iterating on, otherwise the browser will be stuck
  262. // in a infinite loop…
  263. for (const mediaRule of mediaRules) {
  264. styleSheet.insertRule(mediaRule.cssText)
  265. hasDarkRules = true
  266. }
  267. }
  268. if (hasDarkRules) {
  269. loadThemeForm('#theme-selector')
  270. }
  271. })
  272. </script>
  273. </body>
  274. </html>