A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>All the Ways Spotify Tracks You-and How to Stop It (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.wired.com/story/spotify-tracking-how-to-stop-it/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>All the Ways Spotify Tracks You-and How to Stop It</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.wired.com/story/spotify-tracking-how-to-stop-it/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p><span class="lead-in-text-callout">Facebook and Google</span> are the web’s biggest advertising powerhouses. But <a href="https://www.wired.com/tag/spotify/">Spotify</a> has ambitions to <a class="external-link" data-event-click='{"element":"ExternalLink","outgoingURL":"https://www.wsj.com/articles/spotify-has-big-ambitions-for-ad-business-1502964001"}' href="https://www.wsj.com/articles/spotify-has-big-ambitions-for-ad-business-1502964001" rel="nofollow noopener" target="_blank">rival them</a>. And it has all the data it needs to do just that.</p>
  71. <p class="paywall">Each day hundreds of millions of people use Spotify on their phones, tablets, and desktops—most often remaining logged in as they move from one device to the next. With each track played, playlist created, and podcast listened to, we all feed more information into Spotify’s big data machine. More than 100 billion data points are created every day.</p>
  72. <p class="paywall">Each one gives Spotify a little more information about our lives. “Spotify has a crazy amount of data about us,” says Bryan Barletta, author of Sounds Profitable, a newsletter about audio and podcast advertising. “We've always known that what you listen to, how you listen to it, and the activities you do around listening to it are some of the most intimate things that we do. ​​They are doing some really clever things in audio.”</p>
  73. <p class="Container-ineSfH kZHRTY"></p>
  74. <p class="paywall">Spotify knows the value of this data and uses it to help drive the advertising it sells. “These real-time, personal insights go beyond demographics and device IDs alone to reveal our audience’s moods, mindsets, tastes, and behaviors,” Spotify’s advertising materials <a class="external-link" data-event-click='{"element":"ExternalLink","outgoingURL":"https://ru.spotifyforbrands.com/en-RU/"}' href="https://ru.spotifyforbrands.com/en-RU/" rel="nofollow noopener" target="_blank">say</a>. Of Spotify’s 365 million monthly users, 165 million of them subscribe to not listen to ads. The other 200 million put up with them. So how much does Spotify really know, and how can you limit its data collection?</p>
  75. <p role="heading" aria-level="3" class="paywall heading-h3">What Spotify Knows About You</p>
  76. <p class="paywall">Everything you do in Spotify’s web player and desktop and mobile apps is tracked. Every tap, song start, playlist listen, search, shuffle, and pause is logged. Spotify knows that you started playing Lizzo’s “Truth Hurts” at 23:03, listened to it for one minute, then searched for “break up” and listened to the entire four hours and 52 minutes of the “ANGRY BREAKUP PLAYLIST” without any pauses.</p>
  77. <p data-attr-viewport-monitor="inline-recirc" class="inline-recirc-wrapper inline-recirc-observer-target-1 viewport-monitor-anchor"></p>
  78. <p class="paywall">All this behavioral data can be mined by Spotify—and it can be deeply revealing. Back in 2015, when Spotify had just 15 million paying subscribers, one executive <a class="external-link" data-event-click='{"element":"ExternalLink","outgoingURL":"https://venturebeat.com/2015/02/24/spotify-exec-we-collect-an-enormous-amount-of-data-on-what-people-are-listening-to-where-and-in-what-context/"}' href="https://venturebeat.com/2015/02/24/spotify-exec-we-collect-an-enormous-amount-of-data-on-what-people-are-listening-to-where-and-in-what-context/" rel="nofollow noopener" target="_blank">said</a> it collects an “enormous amount of data on what people are listening to, where, and in what context. It really gives us insight into what these people are doing.”</p>
  79. <p class="paywall">The music you listen to mirrors how you feel, who you’re with, and what you’re doing. To make the most of this, Spotify has invested heavily in data science and has even used people’s listening habits in its advertising. "Dear person in the Theater District who listened to the Hamilton Soundtrack 5,376 times this year, can you get us tickets?" read one ad <a class="external-link" data-event-click='{"element":"ExternalLink","outgoingURL":"https://www.wired.co.uk/article/spotify-tinder-netflix-advertising-customer-information-privacy"}' href="https://www.wired.co.uk/article/spotify-tinder-netflix-advertising-customer-information-privacy" rel="nofollow noopener" target="_blank">from 2017</a>.</p>
  80. <p class="paywall">This granularity can be lucrative for companies wanting to target people with attention-grabbing ads. Based on your behavior, Spotify comes up with “inferences” that are meant to reflect your interests and preferences. “What's interesting is that the data from the paid users, who are not listening to podcasts, they might never hear an ad in Spotify, but they power that logic engine,” Barletta says. “They're a control group.”</p>
  81. <p class="paywall">But that’s not the only data Spotify gets. If you really want to know what Spotify knows about you, then you need to read its <a class="external-link" data-event-click='{"element":"ExternalLink","outgoingURL":"https://www.spotify.com/uk/legal/privacy-policy/"}' href="https://www.spotify.com/uk/legal/privacy-policy/" rel="nofollow noopener" target="_blank">privacy policy</a>, which runs to 4,500 words. “I think they can use much clearer language,” says Pat Walshe, a data protection and privacy consultant who has <a class="external-link" data-event-click='{"element":"ExternalLink","outgoingURL":"https://twitter.com/PrivacyMatters/status/1205221211350933507"}' href="https://twitter.com/PrivacyMatters/status/1205221211350933507" rel="nofollow noopener" target="_blank">researched Spotify’s use of data</a>. “They can be more concise, they can lay it out better.”</p>
  82. <p class="paywall">Broadly, the rest of the data Spotify has about you is information you give it when you’re creating an account. You can tell it your username, email, phone number, date of birth, gender, street address, and country. If you pay, you’ll also give it your billing information. The company’s privacy policy also says it can get cookie data, IP addresses, the type of device you’re using, your browser type, your operating system, and information about some devices on your Wi-Fi network.</p>
  83. <p class="paywall">It can also get “motion-generated or orientation-generated mobile sensor data” from your device’s accelerometer or gyroscope. If you use its <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://support.spotify.com/us/article/voice-control/&quot;}" href="https://support.spotify.com/us/article/voice-control/" rel="nofollow noopener" target="_blank">“Hey Spotify” voice controls</a>, then it can also access these recordings.</p>
  84. <p class="paywall">Spotify can get extra information about you from other companies and services. If you log in with Facebook, for instance, it can “import your information” from there, including a Facebook user ID. Other “technical service partners” provide Spotify with data that puts IP addresses onto maps to know what city and state you’re in.</p>
  85. <div role="heading" aria-level="3" class="paywall heading-h3">Spotify’s Ad Machine</div>
  86. <p class="paywall">The data that Spotify collects is not uncommon—other apps and services you use collect a lot more. But Barletta says the “most powerful thing” about Spotify is that it feels a lot more private than Facebook or other social media platforms, because you’re feeding its algorithms in a different way. “You can&#x27;t upload anything, you can&#x27;t have conversations,” he says. You are not sharing photos, videos, or messages. But, despite this, Spotify still knows how you think and feel.</p>
  87. <div data-attr-viewport-monitor="inline-recirc" class="inline-recirc-wrapper inline-recirc-observer-target-2 viewport-monitor-anchor"></div>
  88. <p class="paywall">It&#x27;s this behavioral data that helps Spotify go big on personalization. Its privacy policy says it can use your data for personalization, troubleshooting, developing new features and technology, marketing and advertising, research, and for other legal reasons. Many of these personalization features are likely to involve systems that recommend new music and playlists to you.</p>
  89. <p class="paywall">But there’s also Spotify’s advertising business—something that’s increasingly linked to its <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.digitalmusicnews.com/2021/01/25/spotify-podcast-ads-premium-2/&quot;}" href="https://www.digitalmusicnews.com/2021/01/25/spotify-podcast-ads-premium-2/" rel="nofollow noopener" target="_blank">burgeoning podcast empire</a>. The company’s privacy policy says it works with “advertising partners” to share data and work out what your “interests or preferences” are. “We may obtain certain data about you, such as cookie id, mobile device id, or email address, and inferences about your interests and preferences from certain advertisers and advertising partners that allow us to deliver more relevant ads and measure their effectiveness,” it says. The more “relevant” an ad is, the more likely it is to attract a higher price.</p>
  90. <p class="paywall">Spotify’s advertising documents show how ads can be targeted at your mood and what you are doing. Like electronica? Brands can target ads at the genre. But if you’re into folk, the ads probably won’t be the same. Listening to a “romance” playlist on a Friday night? The ads may be very different to your Sunday morning “road trip” playlist.</p>
  91. <p class="paywall">Spotify can also sell ads based on what you’re doing—these are called <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://ads.spotify.com/en-GB/help-center/real-time-context-targeting/&quot;}" href="https://ads.spotify.com/en-GB/help-center/real-time-context-targeting/" rel="nofollow noopener" target="_blank">real-time context ads</a>. Spotify lists 10 different situations you may be in: chill, dinner, gaming, party, travel, cooking, focus, holidays, study, or workout. It even offers advice for pushing ads to millennials in these contexts. That’s all on top of other <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://ads.spotify.com/en-GB/help-center/real-time-context-targeting/&quot;}" href="https://ads.spotify.com/en-GB/help-center/real-time-context-targeting/" rel="nofollow noopener" target="_blank">common advertising categories</a>, such as being a parent, someone who is interested in health and fitness, or being an Android user.</p>
  92. <div role="heading" aria-level="3" class="paywall heading-h3">What You Can Do About It</div>
  93. <p class="paywall">There are a few steps you can take to limit how Spotify uses and collects your data—but not that many. “There are things that I think they could do much better,” Walshe says. There could be more transparency about how Spotify uses data and prompts that can “nudge people” about privacy options, he says. This could include Spotify introducing privacy checkups where people can review their settings.</p>
  94. <p class="paywall">But what can you do now? One thing to consider is listening in a <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://support.spotify.com/us/article/private-listening/&quot;}" href="https://support.spotify.com/us/article/private-listening/" rel="nofollow noopener" target="_blank">Private Session</a>. By default all your Spotify listening can be seen by people who are following you. One way to stop this is by opting to listen privately—but the setting needs to be turned on each time you use Spotify. To turn it on when you are using a phone or tablet, tap <strong>Home</strong>, <strong>Settings</strong>, scroll to <strong>Social,</strong> and find the <strong>Private session</strong> toggle. On desktop it’s a little easier: You can do it by clicking the <strong>down arrow</strong> in the top right corner and clicking <strong>Private session</strong>.</p>
  95. </div>
  96. <div class="grid--item grid-layout__aside"><div class="StickyBoxWrapper-etZGwJ jNtHBi sticky-box"><div class="StickyBoxPrimary-fEozdy eJUHjp sticky-box__primary"><div class="AdWrapper-fEXqQS krBdZf ad ad--rail"><div class="ad__slot ad__slot--rail" data-node-id="x2qej"></div></div><div class="ConsumerMarketingUnitThemedWrapper-kknrtm gZsZUO consumer-marketing-unit consumer-marketing-unit--display-rail" role="presentation" aria-hidden="true"><div class="consumer-marketing-unit__slot consumer-marketing-unit__slot--display-rail"></div><div class="journey-unit"></div></div><div data-attr-viewport-monitor="" class="recirc-most-popular-wrapper viewport-monitor-anchor"></div></div><div class="StickyBoxPlaceholder-jOpzWB cITeFH"></div></div></div>
  97. </div>
  98. <div class="BaseWrap-sc-TwdDQ RowWrapper-ehcEfx hlNbBe dpSBYl full-bleed-ad row-mid-content-ad"><div class="AdWrapper-fEXqQS krBdZf ad ad--mid-content"><div class="ad__slot ad__slot--mid-content" data-node-id="61mfb9"></div></div></div>
  99. <div class="grid grid-margins grid-items-2 grid-layout--adrail narrow wide-adrail"><div class="grid--item body body__container article__body grid-layout__content" data-journey-hook="client-content"><p class="paywall">While this mode stops people who follow you from seeing what you’re listening to, it doesn’t necessarily stop Spotify from logging that data. Spotify <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://support.spotify.com/us/article/private-listening/&quot;}" href="https://support.spotify.com/us/article/private-listening/" rel="nofollow noopener" target="_blank">says</a> what you listen to in a private session “may not influence” the music recommendations it makes. Walshe questions why there isn’t an option to make all Spotify sessions private automatically. “Privacy should be the default setting,” he says. (Spotify did not acknowledge or reply to a request for comment.)</p><p class="paywall">Spotify’s desktop app has one main privacy setting, although it is buried within its various menus. Click your username in the top right of the app, click <strong>Settings</strong>, scroll down to <strong>Show advanced settings,</strong> and click again. From here you can start blocking “all cookies for this installation of the Spotify desktop app.” Also within the desktop app’s settings you can choose whether you want new playlists to be made public, if you want to share your listening activity on Spotify, and change notification settings. Individual playlists can also be hidden by navigating to them and selecting the options to remove them from your profile or make them private.</p><div data-attr-viewport-monitor="inline-recirc" class="inline-recirc-wrapper inline-recirc-observer-target-3 viewport-monitor-anchor"></div><p class="paywall">The majority of Spotify’s privacy controls are accessed on the web through your <strong>Account</strong> page. Here you can turn off highly targeted advertising. Head to the <strong>Account</strong> option, <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.spotify.com/us/account/privacy/&quot;}" href="https://www.spotify.com/us/account/privacy/" rel="nofollow noopener" target="_blank"><strong>Privacy settings</strong></a><strong>,</strong> and then change the setting for <strong>Tailored ads</strong>. “If you opt out, we will still show you ads based on your Spotify registration information and your real-time usage of Spotify but they will be less tailored to you,” Spotify’s settings explain. You’ll still get the same number of ads, though.</p><p class="paywall">While you’re looking at the <strong>Privacy settings,</strong> you should also turn off <strong>Facebook data</strong>—this will stop Spotify using any data, other than login information, that has been shared from Facebook. The same page also allows you to download some of your Spotify data—including logs of your searches, playlists, streaming history, voice commands you’ve made, and what Spotify thinks you’re interested in.</p><p class="paywall">Within Spotify’s settings on the web you can also see what <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.spotify.com/us/account/apps/&quot;}" href="https://www.spotify.com/us/account/apps/" rel="nofollow noopener" target="_blank">apps have access to your Spotify account</a> and remove those that don’t need it. For instance, you may need to disconnect an old Alexa speaker you used to use with Spotify. You can also remove access for Spotify’s AdGenerator tool.</p><p class="paywall">Another thing to consider, if you’re listening to Spotify on the web, is using a <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.wired.co.uk/article/best-privacy-browsers-and-chrome-alternatives&quot;}" href="https://www.wired.co.uk/article/best-privacy-browsers-and-chrome-alternatives" rel="nofollow noopener" target="_blank">privacy browser</a> that will limit the use of third-party cookies (scores of third parties are fed your <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/PrivacyMatters/status/1415651333336702978&quot;}" href="https://twitter.com/PrivacyMatters/status/1415651333336702978" rel="nofollow noopener" target="_blank">Spotify data through cookies</a>). On iOS you can also stop Spotify—and all other apps—tracking your behavior as you move around your phone by changing your <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://support.apple.com/en-us/HT212025&quot;}" href="https://support.apple.com/en-us/HT212025" rel="nofollow noopener" target="_blank">ad tracking transparency settings</a>. Ultimately, it’s impossible to use Spotify without it processing your personal data. “To delete that personal data, you need to close your account,” Spotify’s settings say.</p>
  100. </article>
  101. <hr>
  102. <footer>
  103. <p>
  104. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  105. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  106. </svg> Accueil</a> •
  107. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  109. </svg> Suivre</a> •
  110. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  111. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  112. </svg> Pro</a> •
  113. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  115. </svg> Email</a> •
  116. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  118. </svg> Légal</abbr>
  119. </p>
  120. <template id="theme-selector">
  121. <form>
  122. <fieldset>
  123. <legend><svg class="icon icon-brightness-contrast">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  125. </svg> Thème</legend>
  126. <label>
  127. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  128. </label>
  129. <label>
  130. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  131. </label>
  132. <label>
  133. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  134. </label>
  135. </fieldset>
  136. </form>
  137. </template>
  138. </footer>
  139. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  140. <script>
  141. function loadThemeForm(templateName) {
  142. const themeSelectorTemplate = document.querySelector(templateName)
  143. const form = themeSelectorTemplate.content.firstElementChild
  144. themeSelectorTemplate.replaceWith(form)
  145. form.addEventListener('change', (e) => {
  146. const chosenColorScheme = e.target.value
  147. localStorage.setItem('theme', chosenColorScheme)
  148. toggleTheme(chosenColorScheme)
  149. })
  150. const selectedTheme = localStorage.getItem('theme')
  151. if (selectedTheme && selectedTheme !== 'undefined') {
  152. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  153. }
  154. }
  155. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  156. window.addEventListener('load', () => {
  157. let hasDarkRules = false
  158. for (const styleSheet of Array.from(document.styleSheets)) {
  159. let mediaRules = []
  160. for (const cssRule of styleSheet.cssRules) {
  161. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  162. continue
  163. }
  164. // WARNING: Safari does not have/supports `conditionText`.
  165. if (cssRule.conditionText) {
  166. if (cssRule.conditionText !== prefersColorSchemeDark) {
  167. continue
  168. }
  169. } else {
  170. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  171. continue
  172. }
  173. }
  174. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  175. }
  176. // WARNING: do not try to insert a Rule to a styleSheet you are
  177. // currently iterating on, otherwise the browser will be stuck
  178. // in a infinite loop…
  179. for (const mediaRule of mediaRules) {
  180. styleSheet.insertRule(mediaRule.cssText)
  181. hasDarkRules = true
  182. }
  183. }
  184. if (hasDarkRules) {
  185. loadThemeForm('#theme-selector')
  186. }
  187. })
  188. </script>
  189. </body>
  190. </html>