|
|
|
@@ -0,0 +1,215 @@ |
|
|
|
<!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>Bonnes feuilles : « Apocalypse cognitive » (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_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://theconversation.com/bonnes-feuilles-apocalypse-cognitive-155247"> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"> |
|
|
|
|
|
|
|
<article> |
|
|
|
<header> |
|
|
|
<h1>Bonnes feuilles : « Apocalypse cognitive »</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.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="https://theconversation.com/bonnes-feuilles-apocalypse-cognitive-155247" title="Lien vers le contenu original">Source originale</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p>Nous avons tous participé un jour ou l’autre à un cocktail, pour célébrer un anniversaire, le départ en retraite d’un collègue ou simplement à l’occasion d’un mariage. Même lorsque l’acoustique du lieu est bonne, ces réunions produisent un brouhaha permanent. Pourtant – et c’est une caractéristique du cerveau humain que les machines ne savent pas encore imiter –, nous sommes capables d’avoir une conversation intelligible car malgré ce brouhaha, nous parvenons à sélectionner et comprendre les paroles de notre interlocuteur. Notre cerveau distingue naturellement le bon grain de l’ivraie.</p> |
|
|
|
|
|
|
|
<p>Ce faisant, nous avons l’impression que nous sommes entièrement absorbés par nos échanges. Pourtant, à quelques mètres de là, une personne que nous ne connaissons pas prononce notre prénom et voilà que sa voix surgit clairement du brouhaha. Quelque chose dans notre cerveau nous a averti qu’une information dans cet amas confus de phonèmes méritait d’être traitée consciemment.</p> |
|
|
|
|
|
|
|
<p>Cet effet, que l’on nomme l’effet cocktail, a été étudié pour la première fois en 1953 par Colin Cherry, un spécialiste de la cognition de l’Imperial College de Londres. Pour le tester expérimentalement, il imagine un dispositif où les sujets sont équipés d’un casque et reçoivent des messages différents dans chaque oreille. Comme Cherry le montre, ceux-ci sont capables à la demande de focaliser leur attention sur un seul de ces messages. Il leur semble alors qu’ils n’ont rien retenu, ni même entendu de l’autre message, mais en vérité ils sont capables, par exemple, de répondre à la question de savoir s’il était délivré par un homme ou une femme. Les travaux de Cherry ont inauguré un travail de recherche très fécond sur les phénomènes d’attention et sur notre capacité à utiliser des filtres informationnels.</p> |
|
|
|
|
|
|
|
<p>Nous pouvons extraire volontairement une source d’un environnement bruyant et traiter préférentiellement les informations provenant de cette source. Le reste est considéré, consciemment au moins, comme du bruit. Pourtant, comme je viens de le suggérer, certains éléments vont transformer ce bruit en événement, c’est-à-dire en fait significatif, en deçà de notre volonté. En d’autres termes, ils vont s’imposer au traitement conscient de l’information sans que nous le décidions. Et ce n’est pas un fait anodin, car le traitement conscient d’une information ne se fait pas sans coût pour notre cerveau.</p> |
|
|
|
|
|
|
|
<p>La plupart des informations que nous traitons le sont inconsciemment. Dans ce cas, seules quelques aires postérieures s’activent, mais dès lors que l’information s’impose à notre espace conscient, alors les zones corticales impliquées sont plus vastes. Le cortex fronto-pariétal cingulaire, en particulier, est convoqué dans le traitement conscient et cela ne se fait pas sans coût énergétique.</p> |
|
|
|
|
|
|
|
<p>L’idée même d’une « énergie mentale » n’a rien de métaphorique. Elle doit être rapportée à la consommation de glucose dont notre système nerveux est friand : aucun autre organe humain n’en consomme autant. Et dans ce domaine comme en bien d’autres, notre cerveau est un ladre. Il veut souvent obtenir le maximum en dépensant le minimum. Comme l’explique le spécialiste des neurosciences de l’attention Jean‑Philippe Lachaux, c’est le système exécutif au sein du cortex préfrontal qui fixe les informations à prendre en compte en contrôlant les circuits qui le relient aux cortex sensoriels. Il en découle que certaines populations de neurones deviendront alors plus sensibles et plus efficaces pour extraire certaines informations de l’environnement.</p> |
|
|
|
|
|
|
|
<p>Notre capacité à isoler un signal et à le considérer comme un événement est donc inimitable, y compris pour les intelligences artificielles les plus sophistiquées. Cette capacité permet à notre espèce d’être économe en énergie mentale mais elle peut nous jouer des tours. En focalisant notre attention sur certains événements et en considérant les informations connexes comme du « bruit », nous nous rendons partiellement aveugles. L’illustration la plus célèbre de ce processus a été donnée par Christopher Chabris et Daniel Simons. Ces deux psychologues de l’université de Harvard ont mis au point une <a href="https://www.youtube.com/watch?v=vJG698U2Mvo">expérience dont les résultats ont fait le tour du monde</a> et ont même été relayés dans <em>Newsweek</em> ou <em>The New Yorker</em>, et qui est connue comme l’expérience du gorille invisible. Un intitulé bien mystérieux pour décrire un protocole ingénieux, qui avait pour but de montrer que le système visuel, s’il est trop focalisé sur une tâche précise, peut passer à côté d’événements considérables.</p> |
|
|
|
|
|
|
|
<p>Profitant de ce qu’un étage du département de psychologie était partiellement vide, les deux psychologues ont filmé une scène apparemment banale : une équipe d’individus vêtus de tee-shirts blancs et une autre arborant des tee-shirts noirs se faisant des passes avec un ballon de basket. Les deux psychologues ont demandé à des sujets volontaires de visionner le film et de compter le nombre de passes que l’équipe blanche effectuait. La bonne réponse était : trente-cinq passes, mais cela n’avait aucune importance. En réalité, pendant ce film, surgissait un drôle de personnage – une étudiante vêtue d’un costume de gorille – qui se faufilait quelques instants entre les joueurs, faisant face à la caméra et se frappant la poitrine. Le plus incroyable, et c’était le but de l’expérience, c’est que la moitié des participants n’ont pas vu le gorille. Lorsqu’on leur demandait s’ils avaient aperçu quelque chose d’étrange pendant la vidéo, ils répondaient par la négative. Tout à leur concentration de réaliser convenablement la tâche qui leur était confiée, ils se montraient aveugles à cet événement pourtant surprenant – et qui durait neuf secondes – du surgissement d’un gorille au beau milieu de l’expérience.</p> |
|
|
|
|
|
|
|
<p>Non moins intéressants sont les résultats obtenus par Daniel Levin et Bonnie Angelone (2008), deux autres professeurs de psychologie qui ont voulu tester le sentiment que cette expérience inspirait à leurs étudiants. On leur décrivait en détail le protocole expérimental et on leur demandait s’ils pensaient qu’ils auraient vu le gorille. Pourtant initiés par leurs cours à la question de la cécité partielle de notre attention, ces étudiants furent 90 % à déclarer qu’eux auraient vu le gorille ! Nous sommes donc beaucoup trop optimistes quant à notre capacité à résister à ces phénomènes de tunnel attentionnel. Aveugles aux évidences, et inconscients de notre cécité, telle est notre condition mentale dans certaines circonstances. Si vous en doutez encore, le mieux est peut-être de vous livrer vous-même à l’amusante expérience que propose la vidéo que l’on trouve librement en ligne : <a href="https://www.youtube.com/watch?v=ubNF9QNEQLA">Test Your Awareness : Whodunnit ?</a> Il s’agit d’un bref film d’une minute mettant en scène une enquête policière façon Agatha Christie. Dans la deuxième partie de la vidéo, tout aussi brève, on vous propose de visionner de nouveau la scène mais filmée par une autre caméra. Ce nouveau point de vue révèle que vingt et un éléments importants du décor ont été changés ! Même averti de cela, il est probable que vous ne vous apercevrez de rien ou presque. C’est Tant de cerveaux disponibles !</p> |
|
|
|
|
|
|
|
<p>Une autre illustration de notre cécité au changement lorsque notre attention est absorbée par une tâche particulière (l’intrigue policière est une situation idoine pour créer un tunnel attentionnel). Tout cela est cocasse mais nous avons vu avec l’effet cocktail que cette obstination attentionnelle peut aussi être détournée. De la même façon que ces tunnels d’attention nous dépossèdent un peu de nous-même, certains phénomènes capturent notre attention sans qu’il nous soit toujours facile de rester maître en notre demeure. Il est assez irrésistible pour notre cerveau de faire attention à quelqu’un qui parle de nous. L’évocation de notre prénom dans un brouhaha suscite ce que certains chercheurs appellent un effet pop-up, ce terme désignant la capture d’attention que suscite le bruit d’un bouchon de champagne qui saute. Certaines informations attirent irrésistiblement un traitement conscient par notre cerveau.</p> |
|
|
|
|
|
|
|
<p>Les neurosciences de l’attention n’ont pas encore déterminé exhaustivement les contours de ces objets qui ont le pouvoir de capturer notre temps de cerveau disponible mais elles nous donnent de nombreuses pistes. Elles nous apprennent que toutes les informations convoquant une partie de notre identité (notre prénom en étant l’exemple le plus emblématique) ont des chances de capturer notre attention. Il en va de même pour une information constituant un danger ou un avertissement. Ainsi, la couleur rouge paraît sans surprise être distinguée entre toutes. On remarque aussi que les termes ayant un capital de visibilité sociale ont une attraction sur notre esprit, comme le nom d’une célèbre ville. On pourrait encore ajouter que le mot « sexe », de même que bien des termes du champ lexical relevant de la sexualité, ne nous laissent pas indifférents.</p> |
|
|
|
|
|
|
|
<p>Une anecdote tirée de mon expérience d’enseignant en propose une illustration amusante. Lors d’un cours pour les élèves de troisième année de sociologie, j’ai introduit cette notion d’effet cocktail. Comme toujours, quand je parle, certains de mes étudiants ont le nez plongé sur leur téléphone portable. Ce jour-là, une étudiante qui avait pris soin de se placer tout en haut de l’amphithéâtre ne paraissait pas écouter un traître mot de ce que je racontais. Vint le moment de la description de l’effet pop-up que provoquent certains mots et c’est alors que j’ai prononcé le mot « sexe » : cette étudiante a instantanément levé les yeux de son téléphone, un peu éberluée, comme si elle avait raté quelque chose d’essentiel. Sans s’en rendre compte, elle venait de donner corps à l’effet même que je tentais de décrire : une mise en abyme tout à fait convaincante.</p> |
|
|
|
|
|
|
|
<p>Il se trouve que l’effet cocktail est une bonne illustration pour décrire les enjeux relatifs au trésor le plus précieux du monde. En effet, l’attraction qu’exercent les écrans sur notre disponibilité mentale ne doit pas faire oublier que ces outils ne sont que des intermédiaires entre nous et le marché cognitif. Ils nous permettent d’accéder avec plus de facilité et de flexibilité à une offre devenue pléthorique. Comme nous le savons maintenant, nous croulons véritablement sous les informations, au point que le temps de cerveau est devenu une matière beaucoup plus rare que les informations qui pourraient le satisfaire. Le rapport de force s’est inversé. Tant et si bien que ce marché cognitif est devenu un brouhaha permanent… comme si nous nous trouvions tous dans un cocktail mondial. Le philosophe français Bernard Stiegler fait cet utile rappel :</p> |
|
|
|
|
|
|
|
<blockquote> |
|
|
|
<p>« Au XVIII<sup>e</sup> siècle, les gens parlaient très peu, avaient très peu de sollicitations de l’extérieur : entendre de la musique ou voir de la peinture leur arrivait dans des conditions relativement exceptionnelles. Bien sûr, des travaux récents d’historiens ont conduit à nuancer cela : même sous l’Ancien Régime, les gens étaient sollicités dans les offices religieux, les fêtes, par les récits de conteurs, et de nombreuses images circulaient sous forme de gravure. Il n’empêche que dans les campagnes, où vivait la majorité des populations, de larges plages de temps se passaient dans le silence ». (2014, p. 128)</p> |
|
|
|
</blockquote> |
|
|
|
|
|
|
|
<figure class="align-left "> |
|
|
|
<img alt="" src="https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=237&fit=clip" srcset="https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=600&h=912&fit=crop&dpr=1 600w, https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=30&auto=format&w=600&h=912&fit=crop&dpr=2 1200w, https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=15&auto=format&w=600&h=912&fit=crop&dpr=3 1800w, https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=754&h=1146&fit=crop&dpr=1 754w, https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=30&auto=format&w=754&h=1146&fit=crop&dpr=2 1508w, https://images.theconversation.com/files/384793/original/file-20210217-19-19l0r7e.jpg?ixlib=rb-1.1.0&q=15&auto=format&w=754&h=1146&fit=crop&dpr=3 2262w" sizes="(min-width: 1466px) 754px, (max-width: 599px) 100vw, (min-width: 600px) 600px, 237px"> |
|
|
|
<figcaption> |
|
|
|
<span class="caption">Le livre de Gérald Bronner vient de paraître aux éditions PUF.</span> |
|
|
|
|
|
|
|
</figcaption> |
|
|
|
</figure> |
|
|
|
|
|
|
|
<p>Bonnes feuilles : « Apocalypse cognitive »</p> |
|
|
|
|
|
|
|
<p>Fasciné par les écrans, notre esprit est au cœur d’un enjeu dont dépend notre avenir. Avec cet extrait du dernier essai de G. Bronner, explorons l’un des modes de fonctionnellement de l’attention.</p> |
|
|
|
|
|
|
|
<p>Par contraste, que l’on y songe un instant : nous avons produit plus d’informations sur la Terre entière au début des années 2000, c’est-à-dire au début de la dérégulation massive du marché de l’information, que depuis l’invention de l’imprimerie par Gutenberg. Et en ce début de XXI<sup>e</sup> siècle, le phénomène s’est encore vertigineusement accéléré. Depuis 2013, la masse d’informations disponibles double tous les deux ans. C’est proprement inimaginable, puisque nous avons vu combien notre cerveau a du mal à concevoir les progressions géométriques. Chaque seconde, 29 000 giga – octets (Go) d’informations sont publiées dans le monde, soit plus de 900 000 000 000 Go par an. En 2017, 253 000 textos par seconde étaient envoyés alors que, dans le même temps, 60 000 recherches sur Google étaient effectuées tandis que chaque minute, <a href="https://www.domo.com/learn/data-never-sleeps-5">527 760 photos étaient partagées sur Snapchat et 456 000 messages tweetés</a>. Autre proportion frappante : 90 % des informations disponibles dans le monde ont été rédigées dans les deux dernières années. Dans une telle cacophonie informationnelle qui nous plonge, bon gré mal gré, dans une situation de cocktail mondial, qu’est-ce qui va retenir notre attention ? Quelles sont les propositions qui vont capter notre précieux temps de cerveau disponible ? Quels sont les produits cognitifs qui auront un avantage concurrentiel sur ce marché de l’information devenu métastasé ?</p> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<p><em>Ce texte est extrait du dernier essai de Gérald Bronner, <a href="https://docs.google.com/document/d/1OBCcDhotqrXctpP2BAiXbHHsYJ3ysFbYbWjX-H-v0SE/edit">« Apocalypse cognitive »</a>, paru aux éditions PUF (Hors collection)</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.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.svg#icon-rss2"></use> |
|
|
|
</svg> RSS</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.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.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.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.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> |
|
|
|
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> |
