davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!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>Why I chose to leave my successful UX career (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://uxdesign.cc/why-i-chose-to-leave-my-successful-ux-career-737704fd2b96">

<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>Why I chose to leave my successful UX career</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://uxdesign.cc/why-i-chose-to-leave-my-successful-ux-career-737704fd2b96" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p id="ca9a" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn kt"><span class="s ku kv kw ej kx ky kz la lb at">A</span><strong class="jz gr">fter a few scrappy startups, I landed a role at Google, then switched to Facebook, where I gained more money and leadership opportunities</strong>. My career plan was moving along smoothly; I never imagined leaving. Move to San Francisco, cultivate UX mentorships, build credibility, and earn a multi-six-figure income while solving the world’s most critical problems.</p>
<p id="7597" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">But gradually, my inner pain grew too loud to ignore. It’s been one year since I turned in my credentials at Facebook, and I have no desire to continue building a career in technology.</p>
<p id="849c" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Despite the<span id="rmm"><span id="rmm"> </span></span>external success, I felt anxious, disillusioned, tired, stressed out, and overwhelmed with my basic tasks. I burned out and felt like a failure.</p>
<p id="9e99" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">But with an excellent fall-back portfolio and large savings fund, I took an open-ended soul-searching sabbatical. Through Jungian depth therapy, trauma healing, and several shadow work methods, I discovered two key root causes for my burnout:</p>
<ul class=""><li id="d666" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks lc ld le hn"><strong class="jz gr">Dysfunctional family: </strong>My therapist helped me identify multiple narcissists in my birth family and adult relationships; decades of abuse had significantly damaged my self-worth. As a result, I developed codependency tendencies, people-pleasing, and perfectionism. With low self-esteem, I sucked at having personal boundaries.</li><li id="f603" class="jx jy gq jz b hp lf kb kc hs lg ke kf kg lh ki kj kk li km kn ko lj kq kr ks lc ld le hn"><strong class="jz gr">Cultural patriarchy: </strong>Growing up in conservative Christianity, I assumed the “women can’t be leaders” style of sexism mainly existed in religious realms. But as I immerse myself in Jungian psychology and feminine literature, I see the core imbalances in our workplace structures (and in myself). We need much more than sexual harassment training for a sense of balance.</li></ul>
<p id="1b8e" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Now, I’ve begun metabolizing anger from emotional, sexual, and physical abuse into creative work that empowers and frees others. I’m discovering that burnout and toxic work environments are merely surface issues, symptoms of much deeper dysfunctions.</p>
<p id="b910" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">As I leaped into the fires of uncertainty, I felt ready to get very uncomfortable.</p>
<p></div></div></section>
<div class="n p db lk ll lm" role="separator"><span class="ln iq ca lo lp lq"></span><span class="ln iq ca lo lp lq"></span><span class="ln iq ca lo lp"></span></div></p>
<section class="gj gk gl du gm"><div class="n p"><div class="au av aw ax ay gn ba v">
<h2 id="c66d" class="lr ls gq bf lt lu lv kb lw lx ly ke lz ma mb mc md me mf mg mh mi mj mk ml mm hn">I believed technology would solve huge problems.</h2><p id="c9c8" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">Through investigative tech writing in my previous career, I became enthralled with emerging technologies like AI, drones, self-driving cars, and AR/VR. Automation gave us more free time; VR simulations could increase <a href="https://www.mscnewswire.co.nz/news-sectors/reporters-desk/item/3702-3-exciting-construction-industry-uses-for-mixed-reality-augmented-reality-virtual-reality.html" class="el jw" rel="noopener nofollow">safety for construction</a> work and soothe PTSD symptoms. <a href="https://disruptiveviews.com/autonomous-vehicles-world-better-place/" class="el jw" rel="noopener nofollow">Self-driving cars</a> would save millions of lives, eliminating human error behind the wheel.</p><p id="b9f2" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Working in technology seemed like the best way for me to have a significant positive impact. But ultimately, people make the technology we use, and our numerous unsolved human problems surface into the products we build.</p><blockquote class="ms"><p id="8d83" class="mt mu gq bf mv mw mx my mz na nb ks dx">When we don’t deal with our inner shadows, they surface in inconvenient, unpredictable ways.</p></blockquote></div></div></section>
<div class="n p db lk ll lm" role="separator"><span class="ln iq ca lo lp lq"></span><span class="ln iq ca lo lp lq"></span><span class="ln iq ca lo lp"></span></div>
<section class="gj gk gl du gm"><div class="n p"><div class="au av aw ax ay gn ba v">
<h2 id="8428" class="lr ls gq bf lt lu lv kb lw lx ly ke lz ma mb mc md me mf mg mh mi mj mk ml mm hn">1. Productivity culture breeds dysfunction.</h2><p id="2085" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">Growing up, I adopted masculine values; I was “one of the boys.” I liked being a tomboy, playing football and video games, getting competitive, earning high grades, and generally optimizing everything. I lost all respect for femininity because I never wanted to seem weak and emotional.</p><p id="d726" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">But we need a balance of masculinity and femininity to ground our ambitions, like yin and yang. Instead, I grew addicted to productivity in an effort to prove my value, but most people would just say I was good at my job. Like codependency hiding in monogamy culture, workaholism hides easily in the tech industry.</p><p id="dc27" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">“We’re an industry that likes to burn people out and not have respect for people’s lives outside of work. I think the industry is kind of perverted,” said <a href="https://www.marsdd.com/news/how-tech-startups-are-trying-to-fix-its-workaholism-problem/" class="el jw" rel="noopener nofollow">Jason Fried</a>, co-founder of project management app Basecamp.</p>
<h2 id="7a63" class="lr ls gq bf lt lu nc kb lw lx nd ke lz ma ne mc md me nf mg mh mi ng mk ml mm hn">2. Building the wrong thing faster doesn’t help.</h2><p id="4d6d" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">As I improved my UX research skills, I felt empowered to lead teams with human insights, detailing the most crucial problems for us to solve. But my starry-eyed optimism began to fade as reality set in: engineers far outnumber researchers even in the most human-centric companies.</p><p id="e620" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Instead, I found myself spending many hours trying to understand what the team had built and finding a problem for their solution. Though I had this challenge with startups, I hoped larger companies would actually be more user-centric. So much for solving critical problems.</p><p id="aa36" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Technology has led to many positive changes, but it’s definitely not going to solve our core human issues.</p>
<h2 id="0da4" class="lr ls gq bf lt lu nc kb lw lx nd ke lz ma ne mc md me nf mg mh mi ng mk ml mm hn">3. Power without women is flawed.</h2><p id="e048" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">When I first heard statistics about women making less than men for the same work, I felt infuriated. But solving this problem isn’t just about giving more leadership roles to women; it’s about honoring feminine values and stories equally. But for right now, it generally sucks to be a woman in a male-dominated work environment.</p><p id="78ec" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">“The truth is that around the world, women continue to be disadvantaged by a working culture that is based on the ideological belief that male needs are universal,” writes <a href="https://www.amazon.com/Invisible-Women-Data-World-Designed/dp/1419729071" class="el jw" rel="noopener nofollow">Caroline Criado Perez</a> in “Invisible Women.”</p><p id="1870" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Despite having better <a href="https://hbr.org/2019/06/research-women-score-higher-than-men-in-most-leadership-skills" class="el jw" rel="noopener nofollow">leadership skills</a> than men, we have deeply ingrained negative biases about women and power (remember Adam and Eve and the “fall” of humanity?). Women make up half the world’s population, so why don’t our power structures reflect feminine needs, struggles, and desires?</p>
<h2 id="3b70" class="lr ls gq bf lt lu nc kb lw lx nd ke lz ma ne mc md me nf mg mh mi ng mk ml mm hn">4. Without psychological safety, teamwork sucks.</h2><p id="9aef" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">As I asked questions to define problems, I felt like our main issues were with collaboration (or lack of). When our engineering manager interrupted or dismissed my ideas in staff meetings, I sensed a “king of the hill” culture. The loudest, most authoritative-sounding voice gains the most influence, impact, and respect.</p><p id="3022" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Though I was brave enough to address these issues head-on, people kept reminding me that culture changes very slowly.</p><p id="13df" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">As it turns out, the most <a href="https://hbr.org/2017/08/high-performing-teams-need-psychological-safety-heres-how-to-create-it" class="el jw" rel="noopener nofollow">high-performing teams</a> have psychological safety in common, an atmosphere where people are more supportive than competitive. As a sensitive person, these micro-aggressions often sent me into fight-or-flight mode and dampened my enthusiasm. Suddenly I was having emotional breakdowns at work; now I understand why.</p>
<h2 id="f785" class="lr ls gq bf lt lu nc kb lw lx nd ke lz ma ne mc md me nf mg mh mi ng mk ml mm hn">5. Childhood trauma affects people in weird ways.</h2><p id="6879" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">Though I knew my past impacted me, I had no idea how intensely. As children, we are entirely dependent on our parents and usually morph to please them for our survival. Discovering narcissistic personality disorder caused a massive perspective shift for me; it was the tip of the iceberg for me to finally understand where my unhelpful patterns came from.</p><p id="dfeb" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Our bodies hold infinite wisdom as well as every unprocessed painful experience throughout our lives. But without the tools and attention to <a href="https://www.amazon.com/Body-Keeps-Score-Healing-Trauma/dp/0143127748" class="el jw" rel="noopener nofollow">process trauma</a>, toxic behaviors go unchecked.</p><p id="5845" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Once I understood how trauma impacts us, my coworkers’ behaviors made more sense. Things like mansplaining, interrupting, lack of empathy, or dominating conversations rang more clearly as threatened egos. I sensed a lot of inner pain in the bodies around me.</p>
<h2 id="495b" class="lr ls gq bf lt lu nc kb lw lx nd ke lz ma ne mc md me nf mg mh mi ng mk ml mm hn">6. Without firm boundaries, you will crash.</h2><p id="182c" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">What if we taught boundary setting in schools or company workshops? We’d likely have way fewer burnout cases. A large 2018 study of tech workers showed over 57% reported currently <a href="https://www.teamblind.com/blog/index.php/2018/05/29/close-to-60-percent-of-surveyed-tech-workers-are-burnt-out-credit-karma-tops-the-list-for-most-employees-suffering-from-burnout/" class="el jw" rel="noopener nofollow">feeling burned out</a>. I’m far from the only one who felt drained and cynical in tech.</p><p id="f1c2" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">When I faced my fear of embarrassment to share my realization with a coworker, she advised me to set better boundaries (like it was no big deal). But without the confidence to be assertive, I regularly took on too many responsibilities.</p><p id="a0af" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Additionally, I felt pressured to perform constantly, steadily increasing my workload from my managers and teammates.</p>
<h2 id="b3be" class="lr ls gq bf lt lu nc kb lw lx nd ke lz ma ne mc md me nf mg mh mi ng mk ml mm hn">7. Profit over people feels disheartening.</h2><p id="99c8" class="jx jy gq jz b hp mn kb kc hs mo ke kf kg mp ki kj kk mq km kn ko mr kq kr ks gj hn">As an optimist who believes in solving real problems, the profit-first culture began to drain me. Leadership always seemed to prioritize profitable features over user problems.</p><p id="d8b4" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">I chose to work in large companies because I wanted to master my field and have more opportunities for a positive impact. But I remember vividly when one manager told me: “You just care too much,” followed by a “stay in your lane” speech. <em class="nh">Was muting my passion a prerequisite for professional success?</em></p><p id="efa6" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Far from feeling appreciated for my enthusiasm, I felt like an enemy of productivity for asking hard-to-answer questions and being difficult to manage.</p></div></div></section>
<div class="n p db lk ll lm" role="separator"><span class="ln iq ca lo lp lq"></span><span class="ln iq ca lo lp lq"></span><span class="ln iq ca lo lp"></span></div>
<section class="gj gk gl du gm"><div class="n p"><div class="au av aw ax ay gn ba v"><p id="8d61" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn kt"><span class="s ku kv kw ej kx ky kz la lb at">O</span><strong class="jz gr">verall, my UX journey was thrilling, empowering, and tiring.</strong> Over years of work, I strengthened many transferable skills like problem-solving, empathy, persistence, storytelling, communication, big-picture thinking, and curiosity. I did earn a lot of money while making millions of people’s lives a bit easier.</p><p id="df24" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">But more importantly, I built confidence in myself and my ability to walk away from something that isn’t good for me, even when others won’t understand.</p><p id="985d" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Looking back, I feel grateful for the pain that led to personal insight. Plus, I know the experience of success itself transfers well.</p><p id="a9ca" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">As I reconnect with my intuition and authentic creativity, I feel far more alive and aligned with fulfilling work. After spending thousands of hours with soul-searching inner work, I know three things for sure:</p><ul class=""><li id="7259" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks lc ld le hn">My body is incredibly wise; I will trust my intuition above all else.</li><li id="8db4" class="jx jy gq jz b hp lf kb kc hs lg ke kf kg lh ki kj kk li km kn ko lj kq kr ks lc ld le hn">Without a balance of masculinity and femininity, culture grows toxic.</li><li id="ed4b" class="jx jy gq jz b hp lf kb kc hs lg ke kf kg lh ki kj kk li km kn ko lj kq kr ks lc ld le hn">My wellbeing matters far more than material gain or status.</li></ul><p id="897f" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn"><strong class="jz gr">I believe breakdowns lead to breakthroughs. </strong>After being in numerous toxic-masculine environments, I feel clear that my sensitivity, self-awareness, compassion, fire, unique perspective, kindness, and boldness are priceless gifts. Fragmenting myself to fit in has never led to fulfilling work or relationships.</p><p id="7764" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn">Instead of chasing recognition, I choose to validate myself.</p><p id="2900" class="jx jy gq jz b hp ka kb kc hs kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks gj hn"><em class="nh">“May I have the courage today to live the life that I would love, to postpone my dream no longer, but do at last what I came here for, and waste my heart on fear no more,” — John O’Donohue.</em></p>
</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>