123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458 |
- <!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>
- Étiquette #partage
- — David Larlet</title>
- <meta name="description" content="Publications relatives au tag #partage">
- <!-- 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)">
- <!-- Is that even respected? Retrospectively? What a shAItshow…
- https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
- <meta name="robots" content="noai, noimageai">
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2024-01-28.css">
- <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_regular.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_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 data-instant-intensity="viewport-all">
- <article>
-
- <header>
- <hgroup>
- <h1>#partage</h1>
- <p>Publications relatives à cette étiquette</p>
- </hgroup>
- </header>
- <nav>
- <p>
- <a href="/david/" title="Aller à l’accueil">
- Accueil</a>
- •
- <a rel="tags"
- href="/david/2024/#tags"
- title="Liste de toutes les étiquettes">
- Étiquettes</a>
- •
- <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
- •
- <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
- </p>
- </nav>
-
- <h2>
- <a href="/david/2024/01/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time>
- </h2>
-
- <p>Je termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et OSM-FR.</p>
- <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer 😇).</p>
- <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p>
-
- <blockquote>
- <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un « mécénat en nature ou de compétence ». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en numéraire.</p>
- <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
- </blockquote>
-
- <blockquote>
- <p>Le prêt de main d’œuvre : l’entreprise met à disposition d’un organisme éligible au mécénat un ou plusieurs salariés. C’est l’organisme qui pilote la mission et qui peut faire figure d’autorité fonctionnelle dans ce cadre. Le temps et la fréquence du mécénat de compétences peuvent considérablement varier en fonction des besoins : il peut aussi bien s’agir d’une mission courte, même d’une seule demi-journée, que d’une mission plus longue voir d’un plein temps dans la limite de 3 ans.</p>
- <p><cite><em><a data-link-domain="cci.fr" href="https://www.cci.fr/actualites/le-mecenat-de-competences-comment-le-mettre-en-place-et-mobiliser-les-equipes">Source</a></em></cite></p>
- </blockquote>
- <p>Lorsque les dons sont effectués en nature, il est nécessaire de procéder à leur valorisation :</p>
- <ul>
- <li>pour le calcul de la réduction d’impôt que déclare l’entreprise ;</li>
- <li>pour la réintégration extra-comptable de la valeur du don par l’entreprise ;</li>
- <li>pour l’établissement du reçu fiscal par l’organisme bénéficiaire du don ;</li>
- <li>pour la détermination des éventuels contreparties remises à l’entreprise par l’organisme bénéficiaire du don.</li>
- </ul>
- <h2 id="comment-valoriser-un-don-au-titre-dun-mecenat-de-competence">Comment valoriser un don au titre d’un mécénat de compétence ? <a href="#comment-valoriser-un-don-au-titre-dun-mecenat-de-competence" title="Ancre vers cette partie">#</a></h2>
- <blockquote>
- <p>Pour chaque salarié mis à disposition, ce don est évalué à son coût de revient, à savoir la somme de sa rémunération et des charges sociales y afférentes dans la limite de trois fois le montant du plafond mentionné à l’article L. 241-3 du code de la sécurité sociale (CSS), soit 10 284 € par mois en 2022.</p>
- <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
- </blockquote>
- <p>Ce n’est donc <strong>pas un TJM</strong> mais un <em>coût de revient</em>.</p>
-
- <blockquote>
- <p>A la suite de l’adoption de la <a data-link-domain="legifrance.gouv.fr" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000043964778">loi du 24 août 2021 confortant le respect des principes de la République</a>, l’administration fiscale a rappelé que <mark>la valorisation du don relève de la seule responsabilité de l’entreprise mécène</mark> qu’il s’agisse d’un don sous forme de biens (dons alimentaires notamment), de services ou d’une mise à disposition de personnel. Un <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/2041-mec-sd_4032.pdf">nouveau modèle de reçu fiscal</a> a été publié le 10 juin 2022.</p>
- </blockquote>
- <h2 id="avantages-fiscaux">Avantages fiscaux <a href="#avantages-fiscaux" title="Ancre vers cette partie">#</a></h2>
- <blockquote>
- <p>Le mécénat de compétences ouvre droit à un avantage fiscal. Concrètement, comme pour toute action de mécénat, le « don » de compétences de l’entreprise ouvrira droit à une réduction d’impôts de 60% du montant du salaire chargé du salarié mis à disposition. Cet avantage est accessible à tous les types d’entreprises, sans montant minimum de don.</p>
- <p><cite><em><a data-link-domain="economie.gouv.fr" href="https://www.economie.gouv.fr/files/Guide-pratique-mecenat-competences-novembre2021.pdf">Source</a></em></cite></p>
- </blockquote>
- <h2 id="modele">Modèle <a href="#modele" title="Ancre vers cette partie">#</a></h2><p>Un modèle de <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/Modele-de-convention-de-mecenat-d-entreprise.docx">convention de mécénat</a>, <a data-link-domain="associations.gouv.fr" href="https://www.associations.gouv.fr/IMG/pdf/asso_mecenat_2021_v1b.pdf">un autre</a> et <a data-link-domain="occitanie.developpement-durable.gouv.fr" href="https://www.occitanie.developpement-durable.gouv.fr/IMG/pdf/ex_convention_mecenat_competences_cle065a53.pdf">encore un autre</a>.</p>
- <p>En synthèse, il faut :</p>
- <h3>Les coordonnées</h3>
- <p>Entre :</p>
- <p>L’entreprise …, statut, dont le siège social est au …,<br />
- Représentée par …, fonction,<br />
- Ci-après dénommée « le mécène »,</p>
- <p>Et</p>
- <p>L’association …, sise au …,<br />
- Représentée par son Président ( ?), …<br />
- Ci-après dénommée « l’association »,</p>
- <p>Vu la loi n°2003-79 du 1<sup>er</sup> août 2003 relative au mécénat, aux associations et aux fondations et notamment les dispositions codifiées à l’article 238 bis du code général des impôts.</p>
- <h3>(optionnel) Préambule (contexte)</h3>
- <ul>
- <li>objet du mécénat de l’entreprise, de la fondation…</li>
- <li>objet de l’association : présentation de sa mission/vocation générale, et laïus sur le
- projet qu’ils portent en commun avec l’entreprise le cas échéant</li>
- <li>rencontre de ces deux objets ?</li>
- </ul>
- <h3>Ce qui est convenu</h3>
- <p>Il est convenu et décidé ce qui suit :</p>
- <ul>
- <li>La présente convention a pour objet de définir les conditions du soutien à l’association pour le projet suivant : (descriptif de l’action ou de la manifestation)</li>
- <li>L’entreprise mécène s’engage à mettre à disposition le personnel suivant : représentant une valeur de … € sur la période de …</li>
- </ul>
-
- <blockquote>
- <p>Pour valoriser ce mécénat de compétences, l’entreprise s’engage à comptabiliser et à valoriser le temps passé sur la mission sus nommée, soit le nombre d’heures passées x salaire horaire chargé (son commissaire aux comptes devra valider ce montant de salaire chargé).</p>
- <p>L’association pourra ainsi remettre à l’entreprise un reçu fiscal précisant le nombre d’heures et le coût équivalent donné à l’association.</p>
- <p>Conformément à l’article 238bis du code général des impôts, ce don en temps donnera droit à une réduction d’impôt égale à 60 % du montant des sommes versées dans la limite de 0,5% du C.A. HT.</p>
- </blockquote>
- <h3>Conditions</h3>
- <ul>
- <li>(optionnel / à adapter) L’association s’engage à faire figurer le nom de l’entreprise donatrice sur les supports d’information de l’action ou de la manifestation.</li>
- <li>La présente convention est établie en vertu des dispositions de l’article 238 bis du CGI</li>
- <li>La présente convention prendra effet à sa date de signature et prendra fin le ….</li>
- </ul>
- <p>Dans le cas où l’une des parties ne respecterait pas ses obligations contractuelles, cette convention serait résiliée de plein droit. En cas de litige, les parties conviennent d’une conciliation à l’amiable.</p>
- <h3>Signatures</h3>
- <p>Date, lieu et signatures :<br />
- A … le …<br />
- Représentant de l’entreprise / Représentant de l’association</p>
-
-
- <nav>
- <p>
-
- <a href="/david/2024/commun/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#commun</a>
-
- <a href="/david/2024/documentation/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#documentation</a>
-
- <a href="/david/2024/partage/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#partage</a>
-
- <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
- </p>
- </nav>
-
-
- <h2>
- <a href="/david/2024/01/26/" title="Lien permanent vers cet article">Cargo</a> <time datetime="2024-01-26">26 janvier 2024</time>
- </h2>
-
-
- <blockquote lang="en">
- <p>I think the actual harm of signing git commits is to perpetuate an engineering culture of unquestioningly cargo-culting sophisticated and complex tools like cryptographic signatures into new contexts where they have no use.</p>
- <p>Just from a baseline utilitarian philosophical perspective, for a given action A, all else being equal, it’s always better not to do A, because taking an action always has some non-zero opportunity cost even if it is just the time taken to do it. Epsilon cost and zero benefit is still a net harm. This is even more true in the context of a complex system. Any action taken in response to a rule in a system is going to interact with all the other rules in that system. You have to pay complexity-rent on every new rule. <mark>So an apparently-useless embellishment like signing commits can have potentially far-reaching consequences in the future.</mark></p>
- <p><cite><em><a data-link-domain="blog.glyph.im" href="https://blog.glyph.im/2024/01/unsigned-commits.html" hreflang="en">Unsigned Commits</a> <a href="/david/cache/2024/ce5fdc61fd66cdb9ce548fb543eba986/" title="Copie locale au 2024-01-25" hreflang="en">
- <svg xmlns="http://www.w3.org/2000/svg"
- width="20" height="20" viewBox="0 0 24 24"
- fill="none" stroke="currentColor"
- stroke-width="2" stroke-linecap="square" stroke-linejoin="round"
- ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1">
- </path>
- </svg>
- <span class="sr-only">[archive]</span>
- </a></em></cite></p>
- </blockquote>
- <p>J’avoue avoir sauté sur l’occasion lorsque j’en ai eu la possibilité avec <a data-link-domain="git-tower.com" href="https://www.git-tower.com/help/guides/integration/gpg/mac">mon client git</a> pour avoir le badge vert sur Microsoft GitHub et Gitlab sans trop me poser de questions. C’était peut-être une erreur et je vais faire mûrir ma réflexion maintenant qu’on m’a mis le nez dedans.</p>
- <p>Entre <em>refus de parvenir</em> et auto-défense numérique.</p>
- <a href="#hr-50" title="Lien vers cette section de la page"><hr id="hr-50" /></a>
-
- <blockquote>
- <p>Cette lutte ne créera pas un mouvement de masse…<br />
- Mais elle est un ingrédient, parmi de nombreuses autres luttes territoriales, qui toutes façonnent ces mêmes possibilités affectives…<br />
- Se sentir coïncider non pas avec soi-même mais avec un milieu de vie…<br />
- Se sentir maillé à un vaste collectif d’humains et de non-humains…<br />
- Des affects, qui constituent la nécessaire force motrice du mouvement que nous espérons voir croître.</p>
- <p><cite><em><a data-link-domain="puntish.blogspot.com" href="http://puntish.blogspot.com/2024/01/defendre-le-glacier-de-la-grave.html">Défendre le glacier de La Grave</a></em></cite></p>
- </blockquote>
- <p>La justesse d’Alessandro Pignocchi et les couleurs de ses aquarelles 💚.</p>
- <a href="#hr-51" title="Lien vers cette section de la page"><hr id="hr-51" /></a>
-
- <blockquote lang="en">
- <p>Every time I have told someone “I want to replace PDF“, the statement has been met with extreme skepticism. Hopefully this document has convinced you that <mark>HTML-via-EPUB could potentially be a viable</mark> and desirable document format for the future.</p>
- <p><cite><em><a data-link-domain="willcrichton.net" href="https://willcrichton.net/notes/portable-epubs/" hreflang="en">Portable EPUBs</a> <a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" title="Copie locale au 2024-01-25" hreflang="en">
- <svg xmlns="http://www.w3.org/2000/svg"
- width="20" height="20" viewBox="0 0 24 24"
- fill="none" stroke="currentColor"
- stroke-width="2" stroke-linecap="square" stroke-linejoin="round"
- ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1">
- </path>
- </svg>
- <span class="sr-only">[archive]</span>
- </a></em></cite></p>
- </blockquote>
- <p>Superbe initiative qui rappelle cruellement ce <a data-link-domain="xkcd.com" href="https://xkcd.com/927/">célèbre XKCD</a> mais qui m’est franchement bien plus utilisable qu’un PDF, quel que soit le lecteur… à part pour en récupérer la source avec mon extracteur maison. Cela me fait découvrir <a data-link-domain="nota-lang.org" href="https://nota-lang.org/">Nota</a> au passage.</p>
- <p>Un simple individu peut-il faire bouger des choses dans le domaine ?</p>
- <a href="#hr-52" title="Lien vers cette section de la page"><hr id="hr-52" /></a>
-
- <blockquote>
- <p>Les sites et outils numériques que je propose</p>
- <p><cite><em><a data-link-domain="eyssette.github.io" href="https://eyssette.github.io/">Cédric Eyssette</a></em></cite></p>
- </blockquote>
- <p>Beaucoup de belles et frugales choses (autour de markdown) à explorer sur cet espace.</p>
-
-
- <nav>
- <p>
-
- <a href="/david/2024/gratitude/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#gratitude</a>
-
- <a href="/david/2024/partage/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#partage</a>
-
- <a href="/david/2024/psychologie/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#psychologie</a>
-
- <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
- </p>
- </nav>
-
-
-
-
- <form action="/david/recherche/" method="get">
- <fieldset>
- <legend>Recherche</legend>
- <label for="input-search">Termes de votre recherche :</label>
- <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
- <input type="submit" value="Chercher">
- <p id="indexation-infos">
- <small>
- Seuls les contenus de ces 8 dernières années sont indexés.
- </small>
- </p>
- </fieldset>
- </form>
-
- <aside>
- <theme-toggle></theme-toggle>
- </aside>
- </article>
- <hr>
- <footer>
- <p>
- <a href="/david/" title="Aller à l’accueil">Accueil</a>
- •
- <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
- •
- <a href="http://larlet.com"
- title="Go to my English profile"
- data-instant>Pro</a>
- •
- <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
- •
- <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
- </p>
- <template id="theme-selector">
- <form>
- <style type="text/css">
- fieldset div {
- text-align: center;
- }
- </style>
- <fieldset>
- <legend>Thème</legend>
- <div>
- <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>
- </div>
- </fieldset>
- </form>
- </template>
- </footer>
- <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
- <script>
- class ThemeToggle extends HTMLElement {
- constructor() {
- super()
- const themeSelectorTemplate = document.querySelector('#theme-selector')
- const form = themeSelectorTemplate.content.firstElementChild
- this.attachShadow({ mode: 'open' })
- this.shadowRoot.appendChild(form.cloneNode(true))
- }
-
- connectedCallback() {
- const form = this.shadowRoot.querySelector('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 colorsLayer = undefined
- let hasDarkRules = false
- for (const styleSheet of Array.from(document.styleSheets)) {
- let mediaRules = []
- for (const layerRule of styleSheet.cssRules) {
- if (!(layerRule instanceof CSSLayerBlockRule)) {
- continue
- }
- if (layerRule.name === 'colors') {
- colorsLayer = layerRule
- }
- for (const cssRule of layerRule.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) {
- // Safari requires the `0` second parameter (even if default).
- colorsLayer.insertRule(mediaRule.cssText, 0)
- hasDarkRules = true
- }
- }
-
- if (hasDarkRules) {
- if ('customElements' in window && !customElements.get('theme-toggle')) {
- customElements.define('theme-toggle', ThemeToggle)
- }
- }
- })
- </script>
-
- </body>
- </html>
|