|
|
|
@@ -0,0 +1,244 @@ |
|
|
|
<!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>TJM - le Taux Journalier Militant (archive) — David Larlet</title> |
|
|
|
<meta name="description" content="Publication mise en cache pour en conserver une trace."> |
|
|
|
<!-- 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> |
|
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow"> |
|
|
|
<meta content="origin-when-cross-origin" name="referrer"> |
|
|
|
<!-- Canonical URL for SEO purposes --> |
|
|
|
<link rel="canonical" href="https://www.24joursdeweb.fr/2022/tjm-tarif-journalier-militant/"> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> |
|
|
|
|
|
|
|
|
|
|
|
<article> |
|
|
|
<header> |
|
|
|
<h1>TJM - le Taux Journalier Militant</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 href="https://www.24joursdeweb.fr/2022/tjm-tarif-journalier-militant/" title="Lien vers le contenu original">Source originale</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p><strong>L’argent a une place prépondérante dans nos vies</strong>.<br> |
|
|
|
On tâtonne avec de l’argent de poche. Parfois on choisit nos études en fonction — de ce qu’elles vont coûter, de ce que ça va rémunérer. On <i>négocie</i> notre salaire — étalon de nos compétences, échelon de comparaison. Parfois on en manque, parfois on a ce qu’il faut et parfois on le fait même <i>travailler</i><sup id="cite-ref-1"><a href="#cite-note-1">1</a></sup>.</p> |
|
|
|
<p>L’argent est un sujet tellement important… qu’on n’en parle pas.</p> |
|
|
|
<p>On « découvre » le salaire des autres au hasard d’un fichier mal rangé sur le <i>Drive</i>.<br> |
|
|
|
On réalise que pour un intitulé et une expérience de poste similaires, on gagne moins qu’un ou une camarade.<br> |
|
|
|
Au repas de famille, on angoisse d’avance du moment où Jean-Côme sortira nonchalamment qu’il dépense un <abbr title="Salaire Minimum de Croissance">SMIC</abbr> par mois en bouteilles de vin. Quand ce n’est pas au tour de Luc-André de se plaindre de l’annulation de sa retraite spirituelle en Inde, parce que le cours des cryptomonnaies s’est effondré.</p> |
|
|
|
<p>On fixe parfois notre <strong>taux journalier moyen</strong> (<abbr>TJM</abbr>) <i>en fonction</i> des autres<sup id="cite-ref-2"><a href="#cite-note-2">2</a></sup> : <i>au moins tant</i> (parce que ce sont les prix du marché) mais <i>moins que bidule</i> (parce qu’il est plus expérimenté). Et tant pis si on facture en quatre jours ce que notre maraichèr‧e gagne en vingt-cinq — <strong>on ne peut pas travailler et résoudre les problèmes du monde en même temps</strong>.</p> |
|
|
|
<p>Et bien… <em>pourquoi pas</em> ?</p> |
|
|
|
<p class="section">Je vous propose des <strong>actions concrètes pour rediriger une partie de nos privilèges</strong> en tant que personnes bien payées dans le domaine de la <i>tech</i>. Ces actions sont basées sur une dizaine d’années de mise en pratique : ce n’est ni exhaustif, ni universel, ni mieux-disant. Vous sentez que vous feriez différemment ? C’est sûrement une voie plus intéressante à suivre — entre autres, parce que c’est là que réside votre motivation.</p> |
|
|
|
<div> |
|
|
|
<h2>Militer avec de l’argent</h2> |
|
|
|
<p>Difficile d’envisager de <em>donner du temps</em> quand la semaine est suffisamment éprouvante avec les transports, cinq journées de travail, gérer les émotions des autres et prendre soin de soi ainsi que de personnes à charge.</p> |
|
|
|
<p>Voici quelques pistes pour se réapproprier la portée de notre facturation.</p> |
|
|
|
<h3>Dédier une fraction de son tarif-jour</h3> |
|
|
|
<p>Cela pourrait revenir à déterminer un petit montant de chaque journée facturée — par exemple 50€ de 600€ — et le reverser à un projet ou association qui vous tient à cœur. Vous avez facturé dix jours dans le mois et vous trouvez que donner 500€ c’est peu ? Et bien c’est déjà ça, commençons par ça. On verra bien le mois prochain.</p> |
|
|
|
<p>Vous êtes salarié‧e dans une équipe qui facture à la journée ? Et bien pourquoi ne pas appliquer ce principe à <em>chaque</em> journée facturée par <em>chaque</em> personne, disons sur <em>un</em> projet ? La discussion en équipe concernant le « à qui donner ? » crée également l’occasion de mieux se connaître :</p> |
|
|
|
<blockquote><p>Tu voudrais donner au <a href="https://www.alternativesforestieres.org/-Faire-un-don-">Réseau des Alternatives Forestières</a> ? Je n’avais aucune idée que la majorité des forêts étaient privées, ni qu’il y avait un enjeu climatique et de biodiversité les concernant.</p></blockquote> |
|
|
|
<p>Si un client vous demande de baisser votre tarif, vous pouvez lui proposer de le <em>maintenir</em> (et de donner la différence) ou, grand luxe, de le monter (et de donner la différence). Une belle occasion de l’associer à votre démarche.</p> |
|
|
|
<h3>Décider d’un montant en fin d’exercice annuel</h3> |
|
|
|
<p>La méthode d’attribution est à décider avec les personnes qui ont participé à créer ces richesses : un pourcentage (1% du chiffre d’affaires, 10% des bénéfices, etc.), un montant fixe (5 000€, deux fois 2 500€, etc.), une enveloppe par personne (500€, deux fois 250€, etc.).</p> |
|
|
|
<p>Imaginez que vous recevez des chèques cadeaux en fin d’année : au lieu de financer du déchet ou de la consommation pour notre confort individuel, ce même argent pourrait contribuer à <a href="https://terredeliens.org/national/hub-ferme/">financer l’achat de terrain agricole avec Terre de Liens</a>. Peut-être au bénéfice d’ancien‧nes dév en reconversion, d’ailleurs ?</p> |
|
|
|
<h3>Rémunérer d’autres au même tarif</h3> |
|
|
|
<p>J’ai participé à plusieurs formations où j’ai demandé à l’équipe organisatrice d’augmenter le prix final<sup id="cite-ref-3"><a href="#cite-note-3">3</a></sup>: le stage durait quatre jours et mon tarif-jour est de 600€? Alors ce sera 2 400€ sur la facture qu’iels m’adresseront. Ça nous donne à la fois un miroir de ce qu’on coûte et on transfère directement ce pouvoir sous forme de reconnaissance financière.</p> |
|
|
|
<p>Ça sera peut-être un non-événement dans une formation technologique… mais dans le milieu de <a href="https://fr.wikipedia.org/wiki/%C3%89ducation_populaire">l’éducation populaire</a>, ça surprendra de suite — et révèlera les disparités qui nous traversent. Les structures qui pratiquent le prix libre comprendront immédiatement l’impact : ça leur offre un précieux temps de qualité.</p> |
|
|
|
<p>Vous travaillez en binôme d’indépendant‧e sur un projet ? Facturez au même tarif-jour — surtout si votre camarade a l’habitude de facturer moins. C’est un bel endroit où des hommes cisgenres peuvent faire rejaillir leur privilège envers des camarades qui n’auraient pas osé demander, qui sont payé‧es 25% de moins, etc.</p> |
|
|
|
<h3>Réaliser des projets à prix libre<sup id="cite-ref-4"><a href="#cite-note-4">4</a></sup></h3> |
|
|
|
<p>En rapprochant le montant de ma trésorerie, mon besoin annuel de salaire et combien j’ai facturé dans l’année, arrive le <strong>jour du petit dépassement</strong> : celui où tout jour travaillé crée davantage de confort et épaissira un matelas sécurisant.</p> |
|
|
|
<p>Dit autrement : arrive un moment dans l’année où j’ai du temps professionnel (en journée, en semaine) que je ne suis pas obligé de facturer (mon salaire étant déjà payé).<br> |
|
|
|
Dis encore autrement : au lieu de me faire tout le temps payer au « prix du marché » (valeur marchande), je gagne en capacité à me faire payer à hauteur des moyens de la structure cliente (prix libre, valeur non-marchande).</p> |
|
|
|
<p>Je propose cette formule à des personnes avec qui j’ai envie de travailler, avec qui je suis accordé sur les valeurs (dans mon cas : environnement & biodiversité, diffusion de connaissances libres, récits de vie) sans pour autant être du travail gratuit. On se met d’accord sur le périmètre de travail (par exemple : refaire un site web), la méthode (par exemple : simili-SCRUM), et on le fait ensemble, à notre rythme (pas de <i>date de mise à mort</i><sup id="cite-ref-5"><a href="#cite-note-5">5</a></sup>). Peut-être que ça se traduira par un mercredi sur deux pendant huit mois. Peut-être que ça se résumera à chaque vendredi pendant un trimestre.</p> |
|
|
|
<p>Si c’est notre budget temps, autant le dépenser sur ce qui leur apporte le plus de valeur.</p> |
|
|
|
<p><strong>On tient mutuellement les comptes du temps passé</strong> — une manière de montrer qu’on fait équipe et qu’il n’y a pas de rapport client/fournisseur. Et <strong>les discussions sur l’argent en fin de projet font grandir tout le monde</strong> : il y a peu d’intérêt à faire la conversion temps/argent, à part pour se remercier de s’être créé un cadre de travail idéal, de confiance et de qualité.</p> |
|
|
|
</div> |
|
|
|
<div class="section"> |
|
|
|
<h2>Militer avec du temps</h2> |
|
|
|
<p>Qu’on soit indépendant‧e ou salarié‧e subordonné‧e, que faire si on est au maximum de nos capacités financières ? Ou qu’on n’a pas la main dessus, à part avec ses deniers personnels ? Et bien, <strong>travailler une journée de moins par semaine</strong><sup id="cite-ref-6"><a href="#cite-note-6">6</a></sup>. En se libérant du temps <em>en journée</em>, on préserve nos soirées pour être en compagnie de nos ami‧es (notre réseau de soutien affectif), ou pratiquer des activités <em>ressourçantes</em>, par exemple<em>.</em></p> |
|
|
|
<p>Et les 20% de salaire en moins me direz-vous ? C’est l’occasion de couper dans les dépenses les moins importantes (<em>ciao</em> Netflix, <em>hello</em> la médiathèque), de sortir la voiture une journée de moins par semaine, de s’éviter les transports en commun, de se cuisiner un repas de plus et… d’avoir besoin de moins de temps pour récupérer en fin de semaine.</p> |
|
|
|
<h3>S’accorder du répit, s’entraîner, s’exercer</h3> |
|
|
|
<blockquote><p>Thomas, tu es en train d’écrire que pour militer il faut d’abord « glandouiller sur le canapé »<sup id="cite-ref-7"><a href="#cite-note-7">7</a></sup> ?</p></blockquote> |
|
|
|
<p>Oh que oui : récupérer de l’espace dans la tête, reposer le corps de nos courses incessantes, prendre l’air, observer les choses autour de nous. Avoir tout loisir de se regarder dans un miroir en se demandant « qu’est-ce que j’ai envie de faire avec moi-même ? » — sans qu’une personne ne passe et nous dise quoi faire de <em>bien</em> (selon <em>son</em> référentiel).</p> |
|
|
|
<p>Dans un second temps, quand on a récupéré de l’énergie, s’offrir le plaisir de faire ces choses qui demandent de la pratique pour monter en aisance — dessin, peinture, course à pied, boulange, écriture, couture, etc. Des choses pour soi dont on garde une satisfaction lorsque l’écran d’ordinateur est éteint.</p> |
|
|
|
<p>Enfin seulement, <q>ton temps offrir tu pourras</q><sup id="cite-ref-8"><a href="#cite-note-8">8</a></sup>.</p> |
|
|
|
<h3>Résoudre un problème sur lequel on se sent à l’aise</h3> |
|
|
|
<p>Si je n’avais qu’une journée à passer dans les locaux d’une association qui attire ma curiosité, qu’est-ce que je leur proposerais ? Qu’est-ce qui me coûte peu d’efforts et qui leur ajoute de la légèreté ?</p> |
|
|
|
<p>C’est comme ça qu’une fois, j’ai contacté une revue pour leur proposer de leur offrir une journée de mon temps sur des sujets informatiques. On a convenu d’une date. Sur place, on a fait l’inventaire de ce qui leur posait problème. Il se trouve qu’iels perdaient beaucoup d’énergie à s’échanger des fichiers entre ordinateurs. Personne n’avait le temps ni acquis les compétences pour résoudre ce problème. C’est ainsi qu’en une heure, j’ai effectué des mises à jour système… et problème résolu !</p> |
|
|
|
<p>Parfois, retirer une épine du pied revient à débloquer un message d’erreur sur un logiciel d’envoi d’e-mail que personne n’a compris, à convertir un logo en vectoriel, à mettre à jour un logiciel de gestion (sauvegarde de base de données, clic sur un bouton, hop c’est fait). On baigne dans des outils numériques sans réaliser qu’ils représentent des obstacles, faute d’interlocuteur‧ice à même de dire « je t’écoute et je suis avec toi ».</p> |
|
|
|
<h3>Échanger du temps et une compétence</h3> |
|
|
|
<p>Une personne souhaite quitter Gmail et toi tu veux apprendre à travailler le bois ? C’est typiquement le genre de choses où on peut convenir que cinq heures de ton temps sont équivalentes à cinq heures de mon temps. Qu’une personne peut apprendre les mécanismes derrière les noms de domaine (« c’est comme un opérateur téléphonique avec portabilité de numéro ») tandis que ta table d’angle de cuisine en bois de récupération prend forme. <a href="https://www.youtube.com/watch?v=ARAQUgkdIvQ">Et de savoir <em>enfin</em> quel est le meilleur type de tournevis</a>.</p> |
|
|
|
<p>Cette réciprocité entre deux personnes n’est pas nécessaire. Ni même le fait de se connaître au préalable. Des <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_d'%C3%A9change_local">Systèmes d’Échange Local</a> (<abbr>SEL</abbr>) servent d’intermédiaires pour annoncer et rechercher des compétences ou services.</p> |
|
|
|
<h3>Devenir bénévole autour d’une thématique qui nous porte</h3> |
|
|
|
<p>Maïtané et moi avons préparé une <a href="https://www.paris-web.fr/2022/conferences/on-se-leve-et-on-se-cassetour-dhorizon-dun-travail-sans-capital.php">présentation sur le rapport au travail pour Paris Web 2022</a>. Nous avons dû nous réfréner sur le nombre de réponses à apporter à la question <a href="https://onseleveetonsecasse.fr/fiches/temps-libre/">à quoi nous sert notre temps libre ?</a> Parce que quand on n’a pas à s’occuper de ces choses après le travail, on a tellement plus d’énergie à y apporter, sans se mettre en danger d’épuisement.</p> |
|
|
|
<p>Les crédos de Maïtané sont le <strong>design et les logiciels libres</strong> ? Alors elle contribue à la dimension design de l’<a href="https://framasoft.org/fr/">association Framasoft</a>.<br> |
|
|
|
Elle est <strong>en colère contre les violences sexistes et sexuelles</strong> ? Alors elle met son énergie à assembler des pages de qualité avec <a href="https://www.noustoutes.org/">#NousToutes</a>.<br> |
|
|
|
Ma préoccupation c’est la <strong>sécheresse dans mon lieu de vie</strong> ? Alors je me rends aux réunions de la <a href="https://www.riviere-drome.fr/">Commission Locale de l’Eau</a>.<br> |
|
|
|
Je vois un enjeu dans l’<strong>alimentation et une agriculture paysanne</strong> ? Alors j’apprends à y voir plus clair en participant aux enquêtes terrains d’un <a href="https://www.natureetprogres.org/comment-simpliquer/">groupe local de Nature & Progrès</a>.</p> |
|
|
|
<p>D’autres personnes mettront leur énergie dans l’organisation d’un festival de thé, dans l’animation d’un calendrier de l’avent (<a href="/remerciements/">merci la belle équipe 👏🏻</a>), dans la préparation de repas dans un centre d’accueil de réfugié‧es, dans la mise en place d’un jardin thérapeutique, etc.</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<h2>OK, et maintenant ?</h2> |
|
|
|
<p>J’encourage à débuter par un <em>petit</em> espace-temps pour <em>jouer</em> avec peu d’enjeux.<br> |
|
|
|
Se dire qu’on essaye un mois pour voir. Sur un petit sujet, rencontre entre les personnes à aider et ce qui vous enthousiasme. Ou de démarrer avec quelque chose de présent dans votre tête depuis longtemps — cette association au coin de la rue, celle dont on lit le journal avec intérêt ou cette étiquette qui attire notre attention au marché fermier.</p> |
|
|
|
<p>Indépendant‧e : on peut faire nos comptes et passer à l’action dès lundi.<br> |
|
|
|
Salarié‧e subordonné‧e : il n’y a plus besoin de patauger entre nos envies de monde désirable et le <em>statu quo</em> du coin baby-foot ou château-fort du bureau.</p> |
|
|
|
<p>Certes, on a le luxe de pouvoir facturer beaucoup — tarif journalier moyen.<br> |
|
|
|
Et maintenant, on a plein d’idées cadeaux pour redistribuer ces richesses — tarif journalier militant.</p> |
|
|
|
<div class="section"> |
|
|
|
<h3>Remerciements</h3> |
|
|
|
<p>Au cas où ça ne serait pas évident : je ne suis pas arrivé là tout seul.<br> |
|
|
|
Je dois beaucoup de ces réflexions à des discussions passionnantes avec <a href="https://noemiegirard.co/">Noémie G</a>, David B, Stéphane L et Sofia B.</p> |
|
|
|
<p>Et au fait de travailler moins de quatre jours par semaine !</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</article> |
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<footer> |
|
|
|
<p> |
|
|
|
<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 href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> |
|
|
|
</svg> Suivre</a> • |
|
|
|
<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-2021-12.svg#icon-user-tie"></use> |
|
|
|
</svg> Pro</a> • |
|
|
|
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> |
|
|
|
</svg> Email</a> • |
|
|
|
<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-2021-12.svg#icon-hammer2"></use> |
|
|
|
</svg> Légal</abbr> |
|
|
|
</p> |
|
|
|
<template id="theme-selector"> |
|
|
|
<form> |
|
|
|
<fieldset> |
|
|
|
<legend><svg class="icon icon-brightness-contrast"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.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> |
