123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357 |
- <!doctype html><!-- This is a valid HTML5 document. -->
- <!-- Screen readers, SEO, extensions and so on. -->
- <html lang="fr">
- <!-- Has to be within the first 1024 bytes, hence before the `title` element
- See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
- <meta charset="utf-8">
- <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
- <!-- The viewport meta is quite crowded and we are responsible for that.
- See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <!-- Required to make a valid HTML5 document. -->
- <title>Tag #nostalgie — David Larlet</title>
- <meta name="description" content="Publications relatives au tag #nostalgie">
- <!-- That good ol' feed, subscribe :). -->
- <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
- <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
- <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
- <link rel="manifest" href="/static/david/icons2/site.webmanifest">
- <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
- <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
- <meta name="msapplication-TileColor" content="#f7f7f7">
- <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
- <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
- <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
- <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
- <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>
- <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>
- <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>
- <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
- <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
- <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
- <script>
- function toggleTheme(themeName) {
- document.documentElement.classList.toggle(
- 'forced-dark',
- themeName === 'dark'
- )
- document.documentElement.classList.toggle(
- 'forced-light',
- themeName === 'light'
- )
- }
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme !== 'undefined') {
- toggleTheme(selectedTheme)
- }
- </script>
-
- <style type="text/css">
- details[open] summary {
- display: none;
- }
- </style>
-
- <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
-
-
- <header>
- <h1>Publications relatives au tag #nostalgie</h1>
- </header>
- <nav>
- <p class="center">
- <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
- </svg> Accueil</a>
- • <a rel="tags" href="/david/#tags-2023" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
- </svg> Étiquettes</a>
- </p>
- </nav>
- <hr>
- <main>
- <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
-
- <h2><a href="/david/2023/07/28/" title="Lien permanent vers cet article">France</a> (2023-07-28)</h2>
-
-
-
- <blockquote>
- <p>Si vous êtes venus pour m’aider, vous perdez votre temps. Mais si vous êtes venus parce que votre libération est liée à la mienne, alors travaillons ensemble.</p>
- <p><cite>Lilla Watson (militante autochtone australienne)</cite></p>
- </blockquote>
- <p>Sentiment toujours très particulier pour l’expatrié que je suis de faire un séjour dans son pays de naissance.</p>
- <p>Il y a les paysages, les personnes, les odeurs, les situations à la fois si réelles et si cotonneuses. Comme si les émotions étaient encore sous le coup du décalage horaire. Comme si l’éphémère se devait d’être intense, presque sur-joué. Comme si l’enjeu pouvait être un retour. Ou encore plus de kérosène.</p>
- <p>Il y a le monde. Partout. Tout le temps. L’impression d’être asphyxié dans ces petites rues caniculaires (coucou Pomme). Et l’inquiétude qui monte de se demander ce qu’il va arriver à toutes ces personnes. Dans l’étuve, les grenouilles apprécient l’eau chaude tant qu’il y en a — moins les moustiques tigres.</p>
- <p>Il y a les montagnes, celles que l’on évalue en se cassant la nuque. Celles qui aspirent et inspirent. Qui permettent de se sentir vivant… à en perdre le souffle. Qui requièrent de s’élever pour élargir sa vision du monde. Celles qui me manquent tant. Je n’ai pas arrêté de faire du sport, j’ai arrêté d’être attiré par des sommets.</p>
- <p>Il y a <em>toujours</em> cette ambiance nauséabonde qui se traduit en un chapelet de micro-agressions auxquelles on ne peut être pleinement sensible lorsqu’on baigne dedans. C’est leur absence, ailleurs, qui les rend d’autant plus visibles. Ma parentalité en France serait une épreuve pour justifier des abus injustifiables (et je croule déjà sous mes propres contradictions).</p>
- <p>Il y a les retrouvailles, les fruits mûrs, les rigolades, le non soutenable qui étire les yeux et les sourires. La culpabilité d’imposer ce manque — et sa compensation — à un enfant aussi, qui peut difficilement rationaliser depuis le cocon familial si douillet des vacances. Il y a les reproches qui grandissent avec le besoin de se construire une jeune identité. Il y a les proches qui vieillissent avec la peur de devoir déconstruire leurs in·certitudes.</p>
- <p>Il y a læ covid. Ah non, pardon 🫣.</p>
- <p>Il y a la France.</p>
-
-
-
-
- <h2><a href="/david/2023/05/06/" title="Lien permanent vers cet article">SudWeb</a> (2023-05-06)</h2>
-
-
- <p>12 mars 2013 :</p>
-
- <blockquote>
- <p>Je vais pas mal intervenir ces prochains mois, peut-être l’occasion de se rencontrer et d’échanger</p>
- <p><cite><em><a href="/david/blog/2013/conferences-diversite/">Conférences et diversité</a></em></cite></p>
- </blockquote>
- <p>13 mars 2013 :</p>
-
- <blockquote>
- <p><em>Je pense maintenant qu’il est plus important d’avoir une ligne éditoriale cohérente et surprenante.</em> C’est un exercice très difficile de savoir répondre aux attentes d’un public tout en le bousculant (un peu). Qu’il ne reparte <strong>peut-être pas pleinement satisfait mais avec des questions restées sans réponses.</strong> Des pistes à creuser. Des mondes à explorer. […]</p>
- <p><strong>La question revient finalement à positionner pour les organisateurs le curseur de la curiosité.</strong> Doit-elle venir des participants ou être imposée par les organisateurs et les orateurs ? Vaste débat.</p>
- <p><cite><em><a href="/david/blog/2013/conferences-editorialisation/">Conférences et éditorialisation</a></em></cite></p>
- </blockquote>
- <p>19 mai 2013 :</p>
-
- <blockquote>
- <p>Une question ouverte en guise de conclusion sans avoir vraiment de proposition technique concrète pour continuer le débat. Après réflexion (et de nombreuses discussions), je ne pense pas qu’il soit pertinent de continuer en ligne par contre je serais ravi que les discussions continuent ici ou ailleurs en espérant avoir semé quelques graines qui pourront germer de proche en proche.</p>
- <p><cite><em><a href="/david/blog/2013/quete-sens/">Une quête de sens</a></em></cite></p>
- </blockquote>
- <p>30 mai 2015 :</p>
-
- <blockquote>
- <p><em>J’ai peur</em> de mes propres contradictions au sujet de la consanguinité.</p>
- <p><em>Je suis content</em> d’avoir pu voir autant d’orateurs qui n’ont pas l’habitude de s’exprimer en public. Ça change des rockstars qui en sont à la quinzième représentation de leur tournée de conférences.</p>
- <p><cite><em><a href="/david/stream/2015/05/30/">Je suis SudWeb</a></em></cite></p>
- </blockquote>
- <p>5 février 2016 :</p>
-
- <blockquote>
- <p>Il y a beaucoup de choses à explorer pour changer la relation organisateur/conférencier/spectateur et la proposition est toujours la même : tous participants pour fluidifier les échanges et encourager l’intelligence collective. Passer du être ensemble au faire ensemble.</p>
- <p>On n’achète plus un billet mais on devient membre d’une association qui porte le projet auquel on peut participer financièrement et/ou par un travail avec une gouvernance démocratique. <em>La conférence n’est plus un évènement ponctuel mais un bien commun qui vit tout au long de l’année, que l’on s’approprie et que l’on fait évoluer ensemble.</em></p>
- <p><cite><em><a href="/david/blog/2016/coorganisation-conferences/">Co-organisation de conférences</a></em></cite></p>
- </blockquote>
- <p>28 mai 2016 :</p>
-
- <blockquote>
- <p>Les éditions de cette conférence se suivent mais ne se ressemblent pas si ce n’est dans leur recherche de singularité. Chaque intervention donne envie d’aller interagir avec l’orateur pour échanger plus que d’ouvrir son <em>laptop</em>. Derrière ces sujets non-techniques se cachent des réflexions plus profondes qui n’interrogent plus le <em>comment</em> mais le <em>pourquoi</em> et de plus en plus le <em>pourquoi pas</em> ?</p>
- <p><cite><em><a href="/david/blog/2016/sudweb-2016/">SudWeb 2016</a></em></cite></p>
- </blockquote>
- <p>29 août 2017 :</p>
-
- <blockquote>
- <p>Avoir plusieurs années d’expérience donne d’autant plus de légitimité pour expérimenter et d’assurance pour se relever en cas d’échec (encore faudrait-il définir cette éventualité). Un événement récurrent donne la chance de pouvoir considérer chaque itération comme une page blanche, les « acquis » ne se font pas sur les formats mais sur le réseau (ou micro-culture) qui se recrée à chaque fois. Renforcer des liens pour le sentiment d’appartenance d’un côté, en relâcher d’autres pour être inclusif par ailleurs. <strong>Une communauté vieillissante aspirera toujours à plus de sécurité et de confort.</strong> Et est-ce une raison valable pour les lui accorder ? :-)</p>
- <p><cite><em><a href="/david/blog/2017/besoin-experience/">Besoin et expérience</a></em></cite></p>
- </blockquote>
- <p>12 janvier 2018 :</p>
-
- <blockquote>
- <p>Est-ce qu’il y a des évènements où un incident a été à l’origine d’un dépôt de plainte de la part de l’organisation ? Et si oui quelles en ont été les suites ? Une jurisprudence serait la bienvenue.</p>
- <p><em>PS : ne croyez pas que je tape toujours sur SudWeb, ce n’est qu’un exemple (plutôt bon en l’occurence) et c’est surtout le seul événement pour lequel j’ai encore un intérêt car ils sont plein de vitalité et ça fait plaisir :-).</em></p>
- <p><cite><em><a href="/david/stream/2018/01/12/">Code d’(in)conduite</a></em></cite></p>
- </blockquote>
- <p>26 janvier 2021 :</p>
-
- <blockquote>
- <p>Il y a peu, j’écrivais que je donnais des conférences "avant de prendre conscience qu’il était important de laisser la place à d’autres moins privilégié·e·s/plus diversifié·e·s". Et indirectement, cela m’a permis de prendre du recul et eu aussi pour conséquence de ne plus me motiver du tout à aller dans les conférences « classiques ». […]</p>
- <p>Je suis tiraillé entre co-créer de nouvelles choses ou faire acte de présence et de promotion des endroits qui comptent pour d’autres et leurs offrent un espace de visibilité non négligeable</p>
- <p><cite><em><a href="/david/2021/01/26/">Conférences</a></em></cite></p>
- </blockquote>
- <p>5 octobre 2021 :</p>
-
- <blockquote>
- <p>Quel que soit le format, j’ai fini par remarquer (il m’a fallu une dizaine d’années tout de même…) que ces évènements favorisent l’entre-soi et donnent une ascendance aux organisateur·ices et participant·es actif·ves. Ce statut est malsain car il permet des comportements déplacés de la part des personnes ayant davantage de pouvoir, d’autant plus lorsqu’une foule est réunie.</p>
- <p><cite><em><a href="/david/2021/10/05/">Conférences 2</a></em></cite></p>
- </blockquote>
- <p>J’avais besoin de cet historique incomplet pour me pointer mes propres incohérences et suivre l’évolution de ma pensée au cours des années. De l’avantage d’avoir une mémoire externalisée.</p>
- <p>SudWeb a une place toute particulière dans mon cœur, j’ai <a href="/david/stream/2010/#tw-27452935068">participé à sa création</a>, j’y suis intervenu dans ce que je considère être <a href="/david/blog/2013/quete-sens/">l’apogée de ce que je pouvais faire dans un groupe</a>, je m’y suis fait des ami·es (coucou Amanda 🇨🇦), j’y ai vu des personnes grandir, mûrir, se remettre en question et j’allais boucler la boucle en motivant une personne à participer.</p>
- <p>Lorsque j’ai appris que le sujet de <a href="https://ynote.hk/">Fanny</a> avait été retenu, j’étais vraiment très content qu’un espace de parole et d’interactions lui soit proposé. Lorsque le programme complet (qui n’est plus en ligne) est sorti, je me suis posé beaucoup de questions. Je ressentais un <a href="https://eldritch.cafe/@davidbruant/110311929122033704">certain malaise</a> (<a href="/david/cache/2023/e211e38b6e8dd18119e0ff18464d2414/">cache</a>) à ce que des personnes sur-représentées dans ces évènements le soient encore une fois. Je me suis vraiment demandé ce qui avait pu motiver ces choix et je crois que j’aurais aimé une communication plus claire à ce sujet pour essayer de comprendre plutôt que d’être dans l’interprétation.</p>
- <p>L’évènement a depuis été annulé car pas assez de personnes étaient motivées par cette rencontre. Difficile d’en tirer des conclusions à chaud. Difficile de savoir au bout de combien de personnes est-ce que ça devenait rentable (financièrement ?). Facile de faire des liens de cause à effet erronés en écoutant uniquement ma micro-bulle. Facile d’imaginer que ça n’ait pas été facile pour les personnes bénévoles qui se sont motivées pour l’organisation cette année.</p>
- <p>On peut lire actuellement sur la <a href="https://sudweb.fr/2023/">page 2023 de l’évènement</a> (<a href="/david/cache/2023/32448878bfcad6dd5d1bcb2b626f1a9d/">cache</a>) :</p>
-
- <blockquote>
- <p>Ne vous arrêtez pas, ne vous arrêtez jamais.</p>
- </blockquote>
- <p>Ça me questionne beaucoup aussi : c’est correct de s’asseoir faire une pause pour ne pas se brûler, d’accepter la déception de ce qui vient de se produire, de prendre le temps d’aller demander pourquoi est-ce que ça ne s’est pas passé, de libérer ses émotions maladroitement.</p>
- <p>C’est ce que je suis en train d’essayer de faire à mon échelle.</p>
-
-
-
-
- <h2><a href="/david/2023/02/07/" title="Lien permanent vers cet article">Madeleine</a> (2023-02-07)</h2>
-
-
- <p>Ma madeleine du jour m’a été offerte par <a href="https://latitude77.org">Aurélien</a> qui pointait vers <a href="https://lightdock.org/">LightDock</a>, ce qui m’a rappelé mon stage de master et mes <a href="/david/biologeek/archives/20051017-parser-un-fichier-pdb-en-python-facilement-et-efficacement/">premiers pas en Python</a>. Où l’on remarque qu’il y a 18 ans, les <em>list-comprehensions</em> et les <code>__methodes_magiques__</code> devaient être récentes…</p>
- <p>Mais au fait, que s’est-il passé ces 20 dernières années en bio-informatique ? Est-ce encore une matière (hybride) à part entière ou le <em>in silico</em> a-t-il fini par bouffer la madeleine ?</p>
- <hr />
- <p>🚲 Où j’apprends que la piste cyclable en bas de chez moi est considéré comme « bonne » <a href="https://numerique.banq.qc.ca/patrimoine/details/52327/3393377">depuis pas mal de temps</a>.</p>
- <hr />
-
- <blockquote>
- <p>🌱 J’ai fait des études d’agriculture biologique et ce milieu m’a dégoûté. On est dans la production. Et dans la production, soit tu t’auto-exploites, soit tu exploites de la main-d’oeuvre. <mark>Dans le bio, l’essentiel de la main-d’oeuvre, ce sont des sans-papiers.</mark> Cette réalité embarrasse énormément ceux qui croient que le bio est le summum de l’alternative. À une époque, avec des copains, on avait organisé des dépôts de paniers de légumes à Bruxelles. On est allé travailler dans le lieu de production situé à une vingtaine de kilomètres de Bruxelles. On s’est retrouvé avec des sans-papiers. Les dessous de la production échappent aux radars. Pourtant, en y réfléchissant, si les gens étaient payés décemment, c’est le quadruple du prix qu’on devrait payer. Eux, aux Fraternités ouvrières, ils ne font pas de la production. Ils n’essaient pas de te vendre une production éthique ou biologique. Ils te disent : « Vas-y, expérimente ». C’est une incitation à expérimenter l’autonomie.</p>
- <p><cite><em><a href="https://www.rayonvertcinema.org/benjamin-hennot-interview/">Benjamin Hennot : Interview</a></em> (<a href="/david/cache/2023/ee7eb9c245d1b2c4b91b8dda4cd7d318/">cache</a>)</cite></p>
- </blockquote>
-
- <blockquote lang="en">
- <p>🎯 No, we need to move our attention back to the folks that have been right all along. The people who never gave up on semantic markup, CSS, and progressive enhancement for most sites. The people who, when slinging JS, have treated it as special occasion food. <mark>The tools and communities whose culture puts the user ahead of the developer</mark> and hold evidence of doing better for users in the highest regard.</p>
- <p><cite><em><a href="https://infrequently.org/2023/02/the-market-for-lemons/">The Market for Lemons</a></em> (<a href="/david/cache/2023/5b35e3f3639ceb7d9f684aa81979f304/">cache</a>)</cite></p>
- </blockquote>
-
- <blockquote lang="en">
- <p>✍️ To feed my blogging, I am constantly reading books, magazine articles, academic papers, and a sprawling network of blogs (I follow about 400 via my RSS feed on Feedly). Much as writing catalyzes thinking, <mark>reading catalyzes writing;</mark> the vast majority of ideas I get for blog posts come from reading something and having it trigger a “wait, what about …” moment.</p>
- <p><cite><em><a href="https://clivethompson.medium.com/how-blogging-changes-the-way-you-think-526734dc86d1">How Blogging Changes The Way You Think</a></em> (<a href="/david/cache/2023/9caf3cf36d339cfffad8582583493204/">cache</a>)</cite></p>
- </blockquote>
- <hr />
-
- <blockquote lang="en">
- <p>🙈 Wikis, unless you have someone whose job it is to maintain the wiki, is where knowledge goes to die</p>
- <p><cite><em><a href="https://cloudisland.nz/@aurynn/109808680824741796">@aurynn@cloudisland.nz sur mastodon</a></em></cite></p>
- </blockquote>
-
- <blockquote>
- <p>🤯 une voiture, c’est jamais qu’un gros fauteuil roulant, hein.</p>
- <p><cite><em><a href="https://mamot.fr/@ffoodd/109796035120760099">@ffoodd@mamot.fr sur mastodon</a></em></cite></p>
- </blockquote>
-
- <blockquote lang="en">
- <p>👀 I have been in tech so long, I only have one question when I hear of a new invention.<br />
- Will it be used for war, porn or surveillance?</p>
- <p><cite><em><a href="https://eupolicy.social/@why0hy/109749311459562949">@why0hy@eupolicy.social sur mastodon</a></em></cite></p>
- </blockquote>
-
-
-
-
- </main>
-
-
- <hr>
-
- <footer>
- <p>
- <nobr>
- <a href="/david/" title="Aller à l’accueil"
- ><svg class="icon icon-home">
- <use
- xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
- ></use>
- </svg>
- Accueil</a
- >
- </nobr>
- •
- <nobr>
- <a href="/david/log/" title="Accès au flux RSS"
- ><svg class="icon icon-rss2">
- <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
- </svg>
- Suivre</a
- >
- </nobr>
- •
- <nobr>
- <a href="http://larlet.com" title="Go to my English profile" data-instant
- ><svg class="icon icon-user-tie">
- <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
- </svg>
- Pro</a
- >
- </nobr>
- •
- <nobr>
- <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
- ><svg class="icon icon-mail">
- <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
- </svg>
- Email</a
- >
- </nobr>
- •
- <nobr>
- <abbr
- class="nowrap"
- title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
- ><svg class="icon icon-hammer2">
- <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
- </svg>
- Légal</abbr
- >
- </nobr>
- </p>
- <template id="theme-selector">
- <form>
- <fieldset>
- <legend><svg class="icon icon-brightness-contrast">
- <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
- </svg> Thème</legend>
- <label>
- <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
- </label>
- <label>
- <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
- </label>
- <label>
- <input type="radio" value="light" name="chosen-color-scheme"> Clair
- </label>
- </fieldset>
- </form>
- </template>
- </footer>
- <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
- <script>
- function loadThemeForm(templateName) {
- const themeSelectorTemplate = document.querySelector(templateName)
- const form = themeSelectorTemplate.content.firstElementChild
- themeSelectorTemplate.replaceWith(form)
-
- form.addEventListener('change', (e) => {
- const chosenColorScheme = e.target.value
- localStorage.setItem('theme', chosenColorScheme)
- toggleTheme(chosenColorScheme)
- })
-
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme && selectedTheme !== 'undefined') {
- form.querySelector(`[value="${selectedTheme}"]`).checked = true
- }
- }
-
- const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
- window.addEventListener('load', () => {
- let hasDarkRules = false
- for (const styleSheet of Array.from(document.styleSheets)) {
- let mediaRules = []
- for (const cssRule of styleSheet.cssRules) {
- if (cssRule.type !== CSSRule.MEDIA_RULE) {
- continue
- }
- // WARNING: Safari does not have/supports `conditionText`.
- if (cssRule.conditionText) {
- if (cssRule.conditionText !== prefersColorSchemeDark) {
- continue
- }
- } else {
- if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
- continue
- }
- }
- mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
- }
-
- // WARNING: do not try to insert a Rule to a styleSheet you are
- // currently iterating on, otherwise the browser will be stuck
- // in a infinite loop…
- for (const mediaRule of mediaRules) {
- styleSheet.insertRule(mediaRule.cssText)
- hasDarkRules = true
- }
- }
- if (hasDarkRules) {
- loadThemeForm('#theme-selector')
- }
- })
- </script>
-
- </body>
- </html>
|