|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- <!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>
- 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>Make me think! (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="#f0f0ea">
- <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
- <meta name="theme-color" content="#f0f0ea">
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
- 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://ralphammer.com/make-me-think/">
-
- <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
-
- <article>
- <header>
- <h1>Make me think!</h1>
- </header>
- <nav>
- <p class="center">
- <a href="/david/" title="Aller à l’accueil">🏠</a> •
- <a href="https://ralphammer.com/make-me-think/" title="Lien vers le contenu original">Source originale</a>
- </p>
- </nav>
- <hr>
- <main>
- <p>Until recently everyday objects were shaped by their technology. The design of a telephone was basically a hull around a machine. <strong>The task of the designers</strong> was to <strong>make technology look pretty</strong>.</p>
-
- <p><span id="more-1291"/></p>
-
- <p><img data-attachment-id="1293" data-permalink="https://ralphammer.com/make-me-think/makemethink_1/" data-orig-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_1.gif?fit=290%2C280&ssl=1" data-orig-size="290,280" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_1" data-image-description="" data-medium-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_1.gif?fit=290%2C280&ssl=1" data-large-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_1.gif?fit=290%2C280&ssl=1" loading="lazy" class="size-full wp-image-1293 aligncenter" src="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_1.gif?resize=290%2C280" alt="" data-recalc-dims="1"/></p>
-
- <p>It was up to the <strong>engineers</strong> to <strong>define the interfaces</strong> of those objects. Their main concern was <strong>the function of the machine, not its ease of use</strong>. We — the “users” — had to figure out how they worked.</p>
-
- <p><img data-attachment-id="1294" data-permalink="https://ralphammer.com/make-me-think/makemethink_2/" data-orig-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_2.gif?fit=198%2C200&ssl=1" data-orig-size="198,200" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_2" data-image-description="" data-medium-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_2.gif?fit=198%2C200&ssl=1" data-large-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_2.gif?fit=198%2C200&ssl=1" loading="lazy" class="size-full wp-image-1294 aligncenter" src="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_2.gif?resize=198%2C200" alt="" data-recalc-dims="1"/></p>
-
- <p>With every technological innovation our everyday objects became richer and increasingly complex. Designers and engineers simply <strong>burdened the users with this increase in complexity</strong>. I am still having nightmares<a href="https://www.youtube.com/watch?v=Kyl2g11KSqc"> trying to get a train ticket from the old BART vending machines in San Francisco</a>.</p>
-
- <p><img data-attachment-id="1295" data-permalink="https://ralphammer.com/make-me-think/makemethink_3/" data-orig-file="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_3.gif?fit=225%2C215&ssl=1" data-orig-size="225,215" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_3" data-image-description="" data-medium-file="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_3.gif?fit=225%2C215&ssl=1" data-large-file="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_3.gif?fit=225%2C215&ssl=1" loading="lazy" class="size-full wp-image-1295 aligncenter" src="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_3.gif?resize=225%2C215" alt="" data-recalc-dims="1"/></p>
-
- <h3>From complicated to simple</h3>
-
- <p>Fortunately, UX (User eXperience) designers have found ways to design beautiful interfaces that are easy to use. Their process can resemble a philosophical enquiry, where they constantly ask questions such as: <strong>What is this really about? How do we perceive this? What is our mental model?</strong></p>
-
- <p><img data-attachment-id="1296" data-permalink="https://ralphammer.com/make-me-think/makemethink_4/" data-orig-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_4.gif?fit=222%2C214&ssl=1" data-orig-size="222,214" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_4" data-image-description="" data-medium-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_4.gif?fit=222%2C214&ssl=1" data-large-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_4.gif?fit=222%2C214&ssl=1" loading="lazy" class="size-full wp-image-1296 aligncenter" src="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_4.gif?resize=222%2C214" alt="" data-recalc-dims="1"/></p>
-
- <p>Today, as a result of their efforts, we interact with wonderfully designed interfaces. <strong>Designers have been taming complexity for us</strong>. They make extremely sophisticated technology appear simple and easy to use.</p>
-
- <p><img data-attachment-id="1297" data-permalink="https://ralphammer.com/make-me-think/makemethink_5/" data-orig-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_5.gif?fit=128%2C200&ssl=1" data-orig-size="128,200" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_5" data-image-description="" data-medium-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_5.gif?fit=128%2C200&ssl=1" data-large-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_5.gif?fit=128%2C200&ssl=1" loading="lazy" class="size-full wp-image-1297 aligncenter" src="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_5.gif?resize=128%2C200" alt="" data-recalc-dims="1"/></p>
-
- <h3>From simple to too simple</h3>
-
- <p>And easy sells well. Thus more and more products are based on the promise to <strong>make our lives easier</strong> by <strong>using increasingly complex technologies with ever simpler interfaces</strong>.</p>
-
- <p><img data-attachment-id="1298" data-permalink="https://ralphammer.com/make-me-think/makemethink_6/" data-orig-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_6.gif?fit=325%2C284&ssl=1" data-orig-size="325,284" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_6" data-image-description="" data-medium-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_6.gif?fit=300%2C262&ssl=1" data-large-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_6.gif?fit=325%2C284&ssl=1" loading="lazy" class="size-full wp-image-1298 aligncenter" src="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_6.gif?resize=325%2C284" alt="" data-recalc-dims="1"/></p>
-
- <p>Just tell your phone what you want and things will appear magically — whether it is the information on a screen or a package delivered to your doorstep. A <strong>gigantic amount of technologies and infrastructure</strong> is domesticated by brave designers and engineers who make all this work.</p>
-
- <p><img data-attachment-id="1299" data-permalink="https://ralphammer.com/make-me-think/makemethink_7/" data-orig-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_7.gif?fit=105%2C180&ssl=1" data-orig-size="105,180" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_7" data-image-description="" data-medium-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_7.gif?fit=105%2C180&ssl=1" data-large-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_7.gif?fit=105%2C180&ssl=1" loading="lazy" class="size-full wp-image-1299 aligncenter" src="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_7.gif?resize=105%2C180" alt="" data-recalc-dims="1"/></p>
-
- <p>But we don’t see — let alone understand — what is going on behind the scenes, behind the simple appearance. <strong>We are kept in the dark</strong>.</p>
-
- <p><img data-attachment-id="1300" data-permalink="https://ralphammer.com/make-me-think/makemethink_8/" data-orig-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_8.gif?fit=177%2C146&ssl=1" data-orig-size="177,146" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_8" data-image-description="" data-medium-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_8.gif?fit=177%2C146&ssl=1" data-large-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_8.gif?fit=177%2C146&ssl=1" loading="lazy" class="size-full wp-image-1300 aligncenter" src="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_8.gif?resize=177%2C146" alt="" data-recalc-dims="1"/></p>
-
- <p>You should see me whining like a spoiled brat when a video call is not working as smoothly as expected — all those interruptions and the bad sound quality! An experience which would have appeared nothing short of a <strong>miracle</strong> to people just 50 years ago and which requires the operation of a colossal infrastructure has become an expected normality for me.</p>
-
- <p><strong>We fail to appreciate and to empathise because we don’t understand what is going on.</strong></p>
-
- <p>So does technology makes us dumb? This question isn’t really new. Famously Plato warned us about the detrimental effects of writing — which we know of because he wrote them down.</p>
-
- <h3>The problem with “user centered” design</h3>
-
- <p>In his <strong>excellent</strong> book “Living with complexity” Donald Norman offers numerous strategies for how designers can harness the design of complexity to <strong>improve the user experience</strong>.</p>
-
- <p>And there lies a problem.</p>
-
- <p>I am increasingly wary of the term “<strong>user centered design</strong>”. The word “user” has a second meaning — “consumer of drugs”— which implies <strong>dependance, short-sighted gratification and a reliable source of income for the “dealer”</strong>. The word “centered” excludes pretty much everyone and everything else.</p>
-
- <p><img data-attachment-id="1301" data-permalink="https://ralphammer.com/make-me-think/makemethink_9/" data-orig-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_9.gif?fit=230%2C140&ssl=1" data-orig-size="230,140" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_9" data-image-description="" data-medium-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_9.gif?fit=230%2C140&ssl=1" data-large-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_9.gif?fit=230%2C140&ssl=1" loading="lazy" class="size-full wp-image-1301 aligncenter" src="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_9.gif?resize=230%2C140" alt="" data-recalc-dims="1"/></p>
-
- <h3>A holistic approach to complexity</h3>
-
- <p>As an alternative we should widen our perspective and ask questions such as:</p>
-
- <h4>Empowerment: Who’s having the fun?</h4>
-
- <p>Maybe being able to speak a foreign language is more fun than using a translation software.</p>
-
- <p>Whenever we are about to substitute a laborious activity such as learning a language, cooking a meal, or tending to plants with a — deceptively — simple solution, we might always ask ourselves: <strong>Should the technology grow — or the person using it?</strong></p>
-
- <p><img data-attachment-id="1302" data-permalink="https://ralphammer.com/make-me-think/makemethink_10/" data-orig-file="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_10.gif?fit=526%2C157&ssl=1" data-orig-size="526,157" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_10" data-image-description="" data-medium-file="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_10.gif?fit=300%2C90&ssl=1" data-large-file="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_10.gif?fit=526%2C157&ssl=1" loading="lazy" class="size-full wp-image-1302 aligncenter" src="https://i2.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_10.gif?resize=526%2C157" alt="" data-recalc-dims="1"/></p>
-
- <h4>Resilience: Does it make us more vulnerable?</h4>
-
- <p>Highly sophisticated systems work flawlessly, <strong>as long as things go as expected</strong>.</p>
-
- <p>When a problem occurs which hasn’t been anticipated by the designers, those systems are prone to fail. <strong>The more complex the systems are, the higher are the chances that things go wrong</strong>. They are less resilient.</p>
-
- <p><img data-attachment-id="1303" data-permalink="https://ralphammer.com/make-me-think/makemethink_11/" data-orig-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_11.gif?fit=458%2C206&ssl=1" data-orig-size="458,206" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_11" data-image-description="" data-medium-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_11.gif?fit=300%2C135&ssl=1" data-large-file="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_11.gif?fit=458%2C206&ssl=1" loading="lazy" class="size-full wp-image-1303 aligncenter" src="https://i1.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_11.gif?resize=458%2C206" alt="" data-recalc-dims="1"/></p>
-
- <p>A chronic dependance on a combination of electronics, artificial intelligence and a high speed internet connection for the simplest tasks is a recipe for disaster. It makes our lives more complicated, especially when we don’t understand what is going on behind the deceptively simple interface.</p>
-
- <h4>Empathy: What is the impact of simplification on others?</h4>
-
- <p>Our decisions have consequences for ourselves and others. <strong>A simplified appearance can make us blind to those consequences</strong>.</p>
-
- <p><img data-attachment-id="1304" data-permalink="https://ralphammer.com/make-me-think/makemethink_12/" data-orig-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_12.gif?fit=565%2C275&ssl=1" data-orig-size="565,275" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="makemethink_12" data-image-description="" data-medium-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_12.gif?fit=300%2C146&ssl=1" data-large-file="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_12.gif?fit=565%2C275&ssl=1" loading="lazy" class="size-full wp-image-1304 aligncenter" src="https://i0.wp.com/ralphammer.com/wp-content/uploads/2019/12/makemethink_12.gif?resize=565%2C275" alt="" data-recalc-dims="1"/></p>
-
- <p>Our decision what smart phone to buy or what to have for dinner has a huge impact on other living beings. Knowing about the complexity behind such a decision can be of tremendous value. <strong>We need to know things better if we want to be better</strong>.</p>
-
- <p><strong>Embracing complexity</strong></p>
-
- <p>Simplification is a powerful design strategy. Naturally the button to make an emergency call should be as simple as possible. And yet, we also need further design strategies that help us accept, understand, and interact with complex situations in our lives.</p>
- </main>
- </article>
-
-
- <hr>
-
- <footer>
- <p>
- <a href="/david/" title="Aller à l’accueil">🏠</a> •
- <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
- <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
- <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
- <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
- </p>
- <template id="theme-selector">
- <form>
- <fieldset>
- <legend>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 type="text/javascript">
- 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>
|
