davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!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>Top 9 UX Trends to Watch out in 2022 (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://uxplanet.org/top-9-ux-trends-to-watch-ut-in-2022-9dfc1eeb25a8">

<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>Top 9 UX Trends to Watch out in 2022</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://uxplanet.org/top-9-ux-trends-to-watch-ut-in-2022-9dfc1eeb25a8" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p id="7dc2" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">As we roll into another year of new COVID variants, new social distancing rules, and constantly updating work from home rules, we caught ourselves thinking about what 2022 will look like for UX (user experience )trends. With more time to reflect at home, designers around the world have had a unique opportunity to come up with innovative products and rebuild existing ones. This year, let’s realign with ourselves and understand who we are as designers and what makes us tick.</p>
<p id="c90d" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">For this year’s trends, we’ve rounded up some of the classic as well as up and coming features that we believe will be the biggest UX trends this year 2022.</p>
<h2 id="d05f" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">1. Passwordless Login</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="7324" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">The average user uses at least 30 apps per month, remembering every password is quite a task. Often, a password is required to be a combination of numbers, special characters, and letters, which makes it more difficult to remember. And when we do forget, it becomes super frustrating as we have to go through the whole “forgot password” routine.</p>
<p id="a782" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">A simple solution is a transition to “passwordless” logins. Passwordless logins work like a charm — logging in through your Google account, social media accounts, fingerprints, iris scans, or phone unlock patterns that are just a few taps away!</p>
<p id="51d1" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Microsoft is an example of a brand that has worked hard on removing passwords. Microsoft’s Windows 10 Version 2004 introduced a solution called “Windows 10 Hello,” a biometric system to sign in. Users can now sign in using fingerprint, iris scan, face scan, or a pattern.</p>
<p id="4e97" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Biometric authentication is one technology that can embrace a security-first approach for both the businesses and the users, thus improving User Experience substantially. The promising biometric authentication market has been giving identity to people without being at risk of being impersonated.</p>
<h2 id="5c3f" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">2. Scrollytelling</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="14cc" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Scrolling is an interaction of the past; apps and websites are rapidly moving towards the idea of ‘scrollytelling’. In this experience, the user sees each element on the page come to life through micro-interactions and creative storytelling through the action of scrolling down. There are no clicks, no hassle of choice, and no pop-ups.</p>
<p id="b103" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Users are no longer interested in seeing a long page filled with information; they want to be a part of the narrative — much like in a video game. Scrollytelling does exactly this by providing a more immersive way to engage users.</p>
<p id="ae14" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">This interaction requires designers to not only create cool visuals, but to also think of the story that we want to share, it’s plot, and the people we are telling it to.</p>
<h2 id="3594" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">3. Air Gesture Control</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="00d2" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Air Gesture Control is a touchless mechanism that allows users to control their devices through bodily gestures and air movements. Movements such as waving, pinching, opening of the palms, sliding or swiping, can all be used to initiate various actions. An example of this is users showing their palms to their mobile phones to open the front-facing camera and capture a selfie.</p>
<p id="81af" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">The Google Pixel 4 is fitted with a motion-sensing radar to facilitate many of these touchless interactions, making it a one of its kind device. We will see air gesture control being integrated across the board in 2022 as touchless interactions continue to gain traction in wake of an onslaught of yet more variants of the Covid-19 pandemic.</p>
<h2 id="2308" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">4. Material Design and Desigining For Larger Screens</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="d5f5" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">With people spending more time on their devices than ever before, screen sizes have been drastically increasing. Companies like Google have begun to adapt and optimize their design systems to respond to these new requirements.</p>
<p id="a276" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">This will have a knock-on effect on the entire industry with other competitors looking to jump on the train to compete with Material Design based applications. The rise in popularity of foldables and tablets will mean a greater number of designs for all form factors, and layout and component based responsiveness across devices. We all know that design based considerations are different for mobile and web. 2022 could just be the year to herald in a new age of synchronous design across screen sizes.</p>
<h2 id="bf22" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">5. Advanced Personalisation</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="d15d" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Advanced personalization makes use of emotive and sensory design in order to fine-tune technology to every need and want of an individual user.</p>
<p id="73c9" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Personalized UX is a very powerful tool for designers and businesses alike — we have all experienced it via what appears in our Netflix feed, the types of ads we see on Instagram, or the related products that appear while browsing through Amazon.</p>
<p id="95dd" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Not just from a user experience standpoint, but when users see personalized options, they are more likely to convert. In a world where we’re overwhelmed with options every time we open a device or website, personalization can make all the difference in what products we choose to accept into our lives.</p>
<p id="9ff1" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">“33% of customers who abandon business relationships do so because personalization is lacking.” — <a class="cr kg" href="https://www.customerthermometer.com/customer-service/customer-service-and-satisfaction-statistics-for-2020/" rel="noopener ugc nofollow" target="_blank">Accenture</a></p>
<h2 id="784d" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">6. Inclusive Design</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="d2a1" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Inclusive design has been widely spoken about especially since the pandemic hit and a majority of businesses started going online. Yet most websites in India haven’t been implementing it because there is an assumption that it doesn’t make any commercial sense. The truth is it does. Being mindful and designing for people with disabilities or people who aren’t as tech savvy as us or people that don’t fall into the binary world that we are all so used to will only expand the business market and in the long run it ensures better user experience across the board.</p>
<p id="1bb1" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Companies like Microsoft, now see the potential of being inclusive. By announcing that they will be giving special attention to accessibility in 2022, they have now set a path. Even Google has been aggressively addressing the need for inclusive design. It’s time we do too.</p>
<p id="ba65" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Inclusive design revolves around two basic principles -</p>
<ul class=""><li id="899c" class="ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq kh ki kj bx">Recognizing Bias and Exclusion: It is about understanding whose perspective is included in the UX decisions and whose perspective gets excluded.</li><li id="b9b0" class="ht hu ec hv b hw kk hy hz ia kl ic id ie km ig ih ii kn ik il im ko io ip iq kh ki kj bx">Solve for One, Extend to Many: It’s always useful to consider the full spectrum of possible users for the product and design for the extreme cases. This ultimately ensures accessibility and usability for a wider audience.</li></ul>
<p id="5fe7" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Web Content Accessibility Guidelines (WCAG) is a great resource that offers numerous methodologies of creating accessible and inclusive web design. Intercom Messenger is an interesting example as it follows all WCAG regulations providing screen reader support, keyboard navigation, and a restrained color palette.</p>
<p id="fea3" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">A well-drafted text is also an important part of inclusive UX design. For example, it’s always better to use neutral forms. Instead of referring to your audience as ‘guys’, ‘Mr.’, ‘Ms.’ use gender-neutral forms like ‘friends’, ‘users’, and so on.</p>
<p id="af13" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">“The right microcopy can build an iconic brand and an unforgettable user experience for your customers, alongside improving conversions anywhere between 14.79% and 166.66%.” — Joshua Porter, Father of Microcopy</p>
<h2 id="0754" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">7. Artificial Intelligence (AI)</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="b79b" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Artificial intelligence (AI) is a term used to describe any intelligence expressed by machines or computerized technologies. The potential for AI within <a class="cr kg" href="https://www.lollypop.design/services" rel="noopener ugc nofollow" target="_blank">UX design</a> is quite impressive — especially in subspecialties like user research and information architecture. AI can easily be programmed to create large numbers of wireframes based on our requirements and best practices found on the web. This would optimize the design process and help us deliver solutions much more efficiently.</p>
<p id="03c4" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">While AI has a very promising scope, it is beneficial to remember that behind every AI is a human that programmed it, which means that it is not always neutral or without flaws. Designers must find a way to get rid of these possible biases.</p>
<h2 id="4a22" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">8. Remote and Virtual Collaboration</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="fe72" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">2021 saw us adopt remote user research, usability testing, and virtual whiteboarding en-masse. This remote revolution has led to an increase in the popularity of collaborative design tools like Figma and Miro, which have a short learning curve and allow for greater collaborative iteration.</p>
<p id="35e4" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">More seats at the table mean better ideation and shorter turnaround times, a huge benefit to the industry; and while some of these remote methodologies still need to be optimized to get rid of inherent biases which would affect outcomes, we see this as a pattern that is here to stay in the long run.</p>
<p id="c729" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">An increasing number of applications are being re-designed to keep pace with the Figmas and Miros of the world, so live virtual collaboration is only going to get better over the next few years. The burden of proof will soon lean towards “why does this have to be done in person when it can happen just as effectively in a remote setting?”</p>
<h2 id="ef65" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">9. Responding To The Metaverse</h2>
<figure class="jn jo jp jq jr hm dh di paragraph-image"></figure>
<p id="a295" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">The Metaverse is a digital universe that has been constructed using technological elements such as AR, VR and video, in which users live. The big push for the Metaverse by the likes of Facebook (now Meta), Microsoft, and Roblox will have a whole new set of design and research implications in UX; because here, design is more concerned with creating an immersive experience, rather than focusing on how quickly a task can be accomplished. Think of the metaverse as a grand culmination of all of these aspects of engagement and interaction.</p>
<p id="eb0e" class="pw-post-body-paragraph ht hu ec hv b hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq dv bx">Although it may be a few years before the Metaverse becomes a part of the mainstream, we can be sure that the lines between our digital and physical selves will continue to blur till then. Advancements in AR, VR, and AI will soon make user avatars, 3D visualizations, and other features associated with extended reality more accessible, so product design innovations that support this eventual shift, will have the potential for real impact. As UX practitioners, the time is rife to till the ground to usher in this new era of virtual interaction.</p>
<h2 id="98c9" class="ir is ec bl bm it iu hy iv iw ix ic iy iz ja jb jc jd je jf jg jh ji jj jk jl bx">Conclusion</h2>
<p id="34c6" class="pw-post-body-paragraph ht hu ec hv b hw kp hy hz ia kq ic id ie kr ig ih ii ks ik il im kt io ip iq dv bx">Now that we’ve had a look at some of the UX (User experience) trends that this new year will bring us, it’s also a good time to talk about how UX design is going to get more and more specialized in the coming years. This is going to directly impact the UX Maturity seen in various organizations — a structured UX Maturity level will become the norm and an integrated UX Maturity stage is what we will strive for. There will be a drastic shift in the work culture, not just where we work from but how we collaborate with each other and how we design for our future generations.</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>