Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  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 #eau — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #eau">
  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 #eau</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-2023" 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/2023/03/02/" title="Lien permanent vers cet article">Jour&nbsp;1</a> (2023-03-02)</h2>
  75. <p>Je profite de cette semaine de relâche pour aller faire un tour en forêt, dans des conditions qui s’annoncent être assez difficiles. Il faudra que je parle du manque de précision des prévisions météorologiques canadiennes à un&nbsp;moment.</p>
  76. <p>J’arrive sur le parking après plus d’une heure de route derrière un véhicule de déneigement. La neige est bien collante et il y a déjà une quinzaine de centimètres tombée dans la matinée. Je profite des traces de raquettes d’un couple qui vient d’arriver pour ne pas trop galérer avec le traîneau mais même les skis à écailles accrochent un peu trop à mon goût. Je suis obligé de forcer dans les descentes pour avancer&#8239;! Sans compter le traîneau qui racle bien les bords du chemin et qui prend des kilos au cours de&nbsp;l’avancée…</p>
  77. <figure>
  78. <a href="#2023-03-02-traineau-arrivee"
  79. title="Cliquer pour une version haute résolution">
  80. <picture>
  81. <source
  82. srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
  83. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  84. type="image/webp">
  85. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  86. <img
  87. src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
  88. width="1512" height="2016"
  89. srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
  90. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  91. fetchpriority="high"
  92. decoding="sync"
  93. alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
  94. </picture>
  95. </a>
  96. <a href="#_" class="lightbox" id="2023-03-02-traineau-arrivee">
  97. <picture style="margin:0 auto;">
  98. <source
  99. srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
  100. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  101. type="image/webp">
  102. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  103. <img
  104. src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
  105. width="1512" height="2016"
  106. srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
  107. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  108. fetchpriority="high"
  109. decoding="sync"
  110. alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
  111. </picture>
  112. </a>
  113. <figcaption>Ce que ça donne à l’arrivée, transporter de la neige n’a pas grand intérêt, il y en aura à&nbsp;l’arrivée.</figcaption>
  114. </figure>
  115. <p>Je finis par trouver un coin qui n’est pas un emplacement de camping (bien pour le bois) et qui est pas mal en retrait du sentier tracé (bien pour moi). Le gros avantage de l’hiver avec plus d’un mètre de neige, c’est que je peux vraiment sculpter mon lieu de résidence tel que je l’entends indépendamment du relief, de la végétation ou de&nbsp;l’humidité.</p>
  116. <p>C’est parti pour une corvée de bois, en raquettes. J’en prends toujours un peu plus que de rigueur en hiver car on ne sait jamais trop ce qu’il peut se passer (blessure/immobilisation par exemple) et c’est un élément important de sécurité par ces&nbsp;températures.</p>
  117. <figure>
  118. <a href="#2023-03-02-feu-levitation"
  119. title="Cliquer pour une version haute résolution">
  120. <picture>
  121. <source
  122. srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
  123. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  124. type="image/webp">
  125. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  126. <img
  127. src="/static/david/2023/2023-03-02-feu-levitation.jpg"
  128. width="1512" height="2016"
  129. srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
  130. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  131. fetchpriority="high"
  132. decoding="sync"
  133. alt="Un feu dans un foyer surélevé.">
  134. </picture>
  135. </a>
  136. <a href="#_" class="lightbox" id="2023-03-02-feu-levitation">
  137. <picture style="margin:0 auto;">
  138. <source
  139. srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
  140. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  141. type="image/webp">
  142. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  143. <img
  144. src="/static/david/2023/2023-03-02-feu-levitation.jpg"
  145. width="1512" height="2016"
  146. srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
  147. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  148. fetchpriority="high"
  149. decoding="sync"
  150. alt="Un feu dans un foyer surélevé.">
  151. </picture>
  152. </a>
  153. <figcaption>C’est parti pour quelques heures à entretenir un&nbsp;feu.</figcaption>
  154. </figure>
  155. <p>Je continue de tester ce foyer surélevé en hiver. Il est lourd mais avoir un feu efficace pour faire fondre la neige et se réchauffer sans qu’il ne coule est très appréciable. À force de <a href="/david/2023/02/10/" title="Jour 1">faire</a> <a href="/david/2023/02/11/" title="Jour 2">du</a> <a href="/david/2023/02/12/" title="Jour 3">glamping</a>, j’en avais oublié à quel point il est fastidieux de passer son temps à produire de l’eau liquide. Je suis à 100&nbsp;mètres de la rivière mais je n’ose pas m’approcher sur la glace pour aller en récupérer une casserole entière vu les&nbsp;conditions.</p>
  156. <p>J’ai choisi d’emporter mon appareil photo et trois objectifs pour cette sortie. Alors je passe une bonne partie de l’après-midi à explorer les alentours en essayant de ne pas trop me mouiller avec toute la neige qui charge les résineux. Même si je suis crevé par le trajet, je passe de bons moments à explorer cet environnement. Je me rends compte que j’ai maintenant suffisamment confiance en moi pour prendre mon temps avant de monter le&nbsp;camp.</p>
  157. <p>J’ai quand même tapé une bonne plateforme avec les raquettes pour lui laisser le temps de geler avant d’aménager l’espace sous mon tipi du XXI<sup>e</sup> siècle. Iels annoncent -15°C dans la nuit, je vais enfin pouvoir tester mon duvet dans les conditions qu’il mérite. Un peu <a href="/david/2023/03/03/">inconscient de ce qui m’attend</a>, je me couche en regardant le feu crépiter, les joies de l’hiver… j’étais aussi parti pour essayer de voir des aurores boréales mais vu la vallée encaissée dans laquelle je suis, associée à une lune bien pleine, j’ai la flemme de me relever dans la nuit. Le vent s’est levé et de la neige chute des arbres par&nbsp;rafales.</p>
  158. <hr />
  159. <p>Davantage de <a href="https://media.larlet.fr/2023-03-ouareau-01.html">photos disponibles par ici</a>.</p>
  160. <h2><a href="/david/2023/01/21/" title="Lien permanent vers cet article">Jour&nbsp;1</a> (2023-01-21)</h2>
  161. <p>L’objectif de cette sortie est de faire une répétition pour la sortie en groupe <a href="/david/2023/01/03/" title="Préparation">que je prépare</a>. J’espérais pouvoir tester le matériel dans des conditions froides et il faisait malheureusement juste frais. À tel point que je doutais de pouvoir passer sur le lac, ce qui est (était&#8239;?) plutôt rare pour un&nbsp;21&nbsp;janvier…</p>
  162. <p>J’arrive sur le parking avec beaucoup de matériel et de vêtements. Déjà là en me changeant, je sens bien que ça va être différent de mes autres sorties hivernales, j’arrive à le faire sans être enfermé dans la voiture&#8239;! Je fais deux portages pour arriver jusqu’au lac et j’harnache le traineau. Mon poids doit être autour de 100&nbsp;kilos sur les skis, le traineau autour des 50, ça fait pas mal de poids au cm² et la glace est fine car on est sur un redoux. Je décide de longer la bordure sud car c’est celle la plus à l’ombre des&nbsp;arbres.</p>
  163. <figure>
  164. <a href="#2023-01-21-selfie-traineau"
  165. title="Cliquer pour une version haute résolution">
  166. <picture>
  167. <source
  168. srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
  169. sizes="min(100vw, calc(100vh * 2048 / 2726))"
  170. type="image/webp">
  171. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  172. <img
  173. src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
  174. width="2048" height="2726"
  175. srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
  176. sizes="min(100vw, calc(100vh * 2048 / 2726))"
  177. fetchpriority="high"
  178. decoding="sync"
  179. alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
  180. </picture>
  181. </a>
  182. <a href="#_" class="lightbox" id="2023-01-21-selfie-traineau">
  183. <picture style="margin:0 auto;">
  184. <source
  185. srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
  186. sizes="min(100vw, calc(100vh * 2048 / 2726))"
  187. type="image/webp">
  188. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  189. <img
  190. src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
  191. width="2048" height="2726"
  192. srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
  193. sizes="min(100vw, calc(100vh * 2048 / 2726))"
  194. fetchpriority="high"
  195. decoding="sync"
  196. alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
  197. </picture>
  198. </a>
  199. <figcaption>Il est très rare que je fasse des égoportraits mais là j’aimais bien voir le téléphone dans les&nbsp;lunettes.</figcaption>
  200. </figure>
  201. <p>J’avais prévu de traverser l’intégralité du lac dans la longueur, je décide finalement de m’arrêter à mi-chemin car je flippe un peu pour ma sécurité, le soleil tape fort et même la couche de neige n’est pas si épaisse. Par chance, je décide de m’arrêter juste à un endroit qui est un emplacement de camping. J’avais aussi prévu de dormir sur le lac en mode répétition mais la terre ferme me parait quand même plus sûre vu les&nbsp;conditions.</p>
  202. <p>Hop, passage des skis aux raquettes pour aplatir l’emplacement de la tente puis du feu. Je commence à être rôdé et je teste un nouveau foyer portable qui me permet de ne pas voir mon feu couler dans la neige. Ce premier essai est concluant même si c’est très lourd (presque un kilo). Il faudra que j’ajoute une partie sur <a href="https://nature.larlet.fr/froid/#feu">la section dédiée</a>.</p>
  203. <figure>
  204. <a href="#2023-01-21-feu-foyer"
  205. title="Cliquer pour une version haute résolution">
  206. <picture>
  207. <source
  208. srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
  209. sizes="min(100vw, calc(100vh * 2048 / 2731))"
  210. type="image/webp">
  211. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  212. <img
  213. src="/static/david/2023/2023-01-21-feu-foyer.jpg"
  214. width="2048" height="2731"
  215. srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
  216. sizes="min(100vw, calc(100vh * 2048 / 2731))"
  217. fetchpriority="high"
  218. decoding="sync"
  219. alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
  220. </picture>
  221. </a>
  222. <a href="#_" class="lightbox" id="2023-01-21-feu-foyer">
  223. <picture style="margin:0 auto;">
  224. <source
  225. srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
  226. sizes="min(100vw, calc(100vh * 2048 / 2731))"
  227. type="image/webp">
  228. <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
  229. <img
  230. src="/static/david/2023/2023-01-21-feu-foyer.jpg"
  231. width="2048" height="2731"
  232. srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
  233. sizes="min(100vw, calc(100vh * 2048 / 2731))"
  234. fetchpriority="high"
  235. decoding="sync"
  236. alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
  237. </picture>
  238. </a>
  239. <figcaption>J’essaye habituellement de faire des petits feux économes et efficaces, j’ai un peu forcé pour la&nbsp;photo…</figcaption>
  240. </figure>
  241. <p>Je passe l’après-midi et la soirée dans des conditions idéales, je suis juste frustré de ne rien avoir pris pour dessiner. Je ne pensais pas pouvoir tenir aussi longtemps les mains nues… J’en profite pour refaire les réserves d’eau chaude et liquide, vérifier la pertinence d’une partie de l’équipement et amasser plus de bois qu’il n’en&nbsp;faut.</p>
  242. <p>À 20&nbsp;heures, il fait -8°C et je n’ai même pas eu à enfiler ma dernière couche, c’est bien la première fois que je suis frustré de ne pas me geler. Je vais faire un tour sur le lac, le silence est complet, le ciel est chargé et sombre, sensation très étrange que celle de marcher dans la seule lumière&nbsp;disponible.</p>
  243. <h2><a href="/david/2023/01/13/" title="Lien permanent vers cet article">Eaux&nbsp;grises</a> (2023-01-13)</h2>
  244. <blockquote>
  245. <p>Le système SPAREAU réceptionne les eaux grises par écoulement gravitaire au point le plus bas de votre habitation (rez-de-chaussée, cave, sous-sol, vide sanitaire). Ces eaux sont ensuite réceptionnées puis filtrées avant d’être envoyées dans le(s) réservoir(s) des&nbsp;WC.</p>
  246. <p>Utiliser de l’eau potable pour alimenter la chasse d’eau des toilettes est une&nbsp;aberration&#8239;!</p>
  247. <p><cite><em><a href="https://spareau.fr/solution/">Spareau pour les&nbsp;particuliers</a></em></cite></p>
  248. </blockquote>
  249. <p>Je réfléchis à cela depuis de très nombreuses année —&nbsp;que je sois sous la douche ou aux toilettes&nbsp;— et je suis ravi qu’il commence à y avoir des solutions clés en main pour de tels&nbsp;systèmes.</p>
  250. <p>C’est l’une des raisons qui me donnent envie d’avoir un lieu où je pourrais expérimenter dans des économies personnelles d’énergies/ressources à une autre&nbsp;échelle.</p>
  251. </main>
  252. <hr>
  253. <footer>
  254. <p>
  255. <nobr>
  256. <a href="/david/" title="Aller à l’accueil"
  257. ><svg class="icon icon-home">
  258. <use
  259. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  260. ></use>
  261. </svg>
  262. Accueil</a
  263. >
  264. </nobr>
  265. <nobr>
  266. <a href="/david/log/" title="Accès au flux RSS"
  267. ><svg class="icon icon-rss2">
  268. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  269. </svg>
  270. Suivre</a
  271. >
  272. </nobr>
  273. <nobr>
  274. <a href="http://larlet.com" title="Go to my English profile" data-instant
  275. ><svg class="icon icon-user-tie">
  276. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  277. </svg>
  278. Pro</a
  279. >
  280. </nobr>
  281. <nobr>
  282. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  283. ><svg class="icon icon-mail">
  284. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  285. </svg>
  286. Email</a
  287. >
  288. </nobr>
  289. <nobr>
  290. <abbr
  291. class="nowrap"
  292. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  293. ><svg class="icon icon-hammer2">
  294. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  295. </svg>
  296. Légal</abbr
  297. >
  298. </nobr>
  299. </p>
  300. <template id="theme-selector">
  301. <form>
  302. <fieldset>
  303. <legend><svg class="icon icon-brightness-contrast">
  304. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  305. </svg> Thème</legend>
  306. <label>
  307. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  308. </label>
  309. <label>
  310. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  311. </label>
  312. <label>
  313. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  314. </label>
  315. </fieldset>
  316. </form>
  317. </template>
  318. </footer>
  319. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  320. <script>
  321. function loadThemeForm(templateName) {
  322. const themeSelectorTemplate = document.querySelector(templateName)
  323. const form = themeSelectorTemplate.content.firstElementChild
  324. themeSelectorTemplate.replaceWith(form)
  325. form.addEventListener('change', (e) => {
  326. const chosenColorScheme = e.target.value
  327. localStorage.setItem('theme', chosenColorScheme)
  328. toggleTheme(chosenColorScheme)
  329. })
  330. const selectedTheme = localStorage.getItem('theme')
  331. if (selectedTheme && selectedTheme !== 'undefined') {
  332. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  333. }
  334. }
  335. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  336. window.addEventListener('load', () => {
  337. let hasDarkRules = false
  338. for (const styleSheet of Array.from(document.styleSheets)) {
  339. let mediaRules = []
  340. for (const cssRule of styleSheet.cssRules) {
  341. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  342. continue
  343. }
  344. // WARNING: Safari does not have/supports `conditionText`.
  345. if (cssRule.conditionText) {
  346. if (cssRule.conditionText !== prefersColorSchemeDark) {
  347. continue
  348. }
  349. } else {
  350. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  351. continue
  352. }
  353. }
  354. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  355. }
  356. // WARNING: do not try to insert a Rule to a styleSheet you are
  357. // currently iterating on, otherwise the browser will be stuck
  358. // in a infinite loop…
  359. for (const mediaRule of mediaRules) {
  360. styleSheet.insertRule(mediaRule.cssText)
  361. hasDarkRules = true
  362. }
  363. }
  364. if (hasDarkRules) {
  365. loadThemeForm('#theme-selector')
  366. }
  367. })
  368. </script>
  369. </body>
  370. </html>