A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

index.html 28KB

před 1 rokem
před 1 rokem
před 1 rokem
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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>Shining a Light on the Digital Dark Age (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. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Shining a Light on the Digital Dark Age</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>The Dead Sea scrolls, made of parchment and papyrus, are still readable nearly two millennia after their creation — yet the expected shelf life of a DVD is about 100 years. Several of Andy Warhol’s <a href="https://www.theverge.com/2014/4/24/5646554/andy-warhols-lost-amiga-computer-art-photo-essay?ref=longnow.org">doodles</a>, created and stored on a Commodore Amiga computer in the 01980s, were forever stranded there in an obsolete format. During a data-migration in 02019, millions of songs, videos and photos were lost when MySpace — once the Internet’s leading social network — fell prey to an <a href="https://mashable.com/article/myspace-data-loss?ref=longnow.org">irreversible data loss</a>.</p>
  74. <p>A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. Without constant maintenance and management, most digital information will be lost in just a few decades. Our modern records are far from permanent.</p>
  75. <p>Obstacles to data preservation are generally divided into three broad categories: <em>hardware longevity</em> (e.g., a hard drive that degrades and eventually fails); <em>format accessibility</em> (a 5 ¼ inch floppy disk formatted with a filesystem that can’t be read by a new laptop); and <em>comprehensibility</em> (a document with an long-abandoned file type that can’t be interpreted by any modern machine). The problem is compounded by encryption (data <em>designed</em> to be inaccessible) and abundance (deciding what among the vast human archive of stored data is actually worth preserving).</p>
  76. <p>The looming threat of the so-called “<a href="https://longnow.org/ideas/category/digital-dark-age/">Digital Dark Age</a>”, accelerated by the extraordinary growth of an invisible commodity — data — suggests we have fallen from a golden age of preservation in which everything of value was saved. In fact, countless records of previous historical eras have all but disappeared. The first Dark Ages, shorthand for the period beginning with the fall of the Roman Empire and stretching into the Middle Ages (00500-01000 CE), weren’t actually characterized by intellectual and cultural emptiness but rather by a dearth of historical documentation produced during that era.</p>
  77. <p>Even institutions built for the express purpose of information preservation have succumbed to the ravages of time, natural disaster or human conquest. The famous library of Alexandria, one of the most important repositories of knowledge in the ancient world, eventually faded into obscurity. Built in the fourth century B.C., the library flourished for some six centuries, an unparalleled center of intellectual pursuit. Alexandria’s archive was said to contain half a million papyrus scrolls — the largest collection of manuscripts in the ancient world — including works by Plato, Aristotle, Homer and Herodotus. By the fifth century A.D., however, the majority of its collections had been stolen or destroyed, and the library fell into disrepair.</p>
  78. <p>Digital archives are no different. The durability of the web is far from guaranteed. <a href="https://longnow.org/ideas/a-long-bet-on-link-rot-is-resolved-but-questions-about-the-durability-of-the-web-still-remain/">Link rot</a>, in which outdated links lead readers to dead content (or a cheeky dinosaur icon), sets in like a pestilence. Corporate data sets are often abandoned when a company folds, left to sit in proprietary formats that no one without the right combination of hardware, software, and encryption keys can access. Scientific data is a particularly thorny problem: unless it’s saved to a public repository accessible to other researchers, technical information essentially becomes unusable or lost. Beyond switching to <a href="https://www.planetanalog.com/the-hottest-data-storage-medium-ismagnetic-tape/?ref=longnow.org">analog alternatives</a>, which have their own drawbacks, how might we secure our digital information so that it survives for generations? How can individuals, private corporations and public entities coordinate efforts to ensure that their data is saved in more resilient formats?</p>
  79. <p>Organizations like The Long Now Foundation are among those working to combat the Digital Dark Age (Long Now in fact coined the term at an early <a href="https://longnow.org/events/01998/feb/08/time-and-bits/">digital continuity conference</a> in 01998), drawing on open-source software, coordinated action across platforms, transparency in design, innovative technologies, and a long view of preservation. From thought experiments and industry analysis to more concrete projects, these organizations are imagining preservation on a massive time scale.</p>
  80. <figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.longnow.org/2023/07/ROSETTA_DISK_02.jpg" class="kg-image" alt loading="lazy"><figcaption>The Rosetta Disk is just one possible way that we can preserve linguistic data for future generations.</figcaption></figure>
  81. <p>Consider the <a href="http://rosettaproject.org/?ref=longnow.org">Rosetta Project</a>, Long Now’s first exploration into very long-term archiving. The idea was to build a publicly accessible digital library of human languages that would be readable to an audience 10,000 years hence. “What does it mean to have a 10,000-year library?” asks Andrew Warner, Project Manager of Rosetta. “Having parallel translations was enough to unlock the actual Rosetta Stone, so we decided to construct a ‘decoder ring,’ figuring that if someone understood one of the 1,500 languages on our disk, they could eventually decipher the entire library.” Long Now worked with linguists and engineers to microscopically etch this text onto a solid nickel disk, creating an artifact that could survive millennia. More symbolic than pragmatic, the Rosetta Project underscores the problem of digital obsolescence and explores ways we might address it through creative archival storage methods. “We created the disk not to be apocalyptic, but to encourage people to think about our more immediate future,” says Warner.</p>
  82. <p>Indeed, the idea of a 10,000 year timescale captures an anxious public imagination that’s very much grounded in the present. How will technological innovation such as generative artificial intelligence change the way we interpret (and govern) the world? What threats — climate change, pandemics, nuclear war, economic instability, asteroid impacts — will loom large in the next decamillennium? Which information should we preserve for posterity, and how? What are the costs associated with that preservation, be they economic, environmental or moral? “Long Now will be a keeper of knowledge,” says Warner. “But we don’t want to end up erecting a digital edifice in a barren wasteland.”</p>
  83. <hr><p>As personal computing and the ability to create digital documents became ubiquitous toward the end of the 20th century, preservation institutions — museums, libraries, non-profits, archives — and individuals — were faced with a new challenge: not simply how to preserve material, but <em>what</em> to collect and preserve in perpetuity. The astonishingly rapid accumulation of data has led to a problem of abundance: digital information is accumulating at a staggering rate. Scientific, medical and government sectors in particular have amassed billions of emails, messages, reports, cables and images, leaving future historians to sift through and categorize an enormously capacious collection — one projected to <a href="https://www.networkworld.com/article/3325397/idc-expect-175-zettabytes-of-data-worldwide-by-2025.html?ref=longnow.org">exceed hundreds of zettabytes by 02025</a>. The Clinton White House, by one estimate, churned out 6 million emails per year. NASA’s sky surveys rely on over 2 billion uploaded images. The endless proliferation of junk-content, both human and A.I.-generated, makes sifting through all this data even trickier.</p>
  84. <p>The term of art for this sorting is known as <em>appraisal</em>: deciding whether or not something should be preserved and what resources are required to do so. “One ongoing challenge is that there’s so much to preserve, and so much that can help diversify the archival record and reflect the society we live in,” says Jefferson Bailey, Director of Archiving &amp; Data Services at the <a href="https://archive.org/about/">Internet Archive</a>, a digital library based in San Francisco that provides free public access to countless collections of digitized materials.</p>
  85. <figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.longnow.org/2023/07/Internet-Archive-servers.jpg" class="kg-image" alt loading="lazy"><figcaption>Servers housed at the Internet Archive's San Francisco headquarters.</figcaption></figure>
  86. <p>The organization began in 01996 by archiving the Internet itself, a medium that was just beginning to grow in use. Like newspapers, the content published on the web was ephemeral — but unlike newspapers, no one was saving it. Now, the service has more than two million users per day, the vast majority of whom use the site’s <a href="https://archive.org/web/">Wayback Machine,</a> a search function for over 700 billion pages of internet history. Educators interested in archived websites, journalists tracking citations, litigators seeking out intellectual property evidencing or trademark infringement, even armchair scholars curious about the Internet’s past, all can take a ride on this digital time travel apparatus, whose mission is “to provide Universal Access to All Knowledge.” That includes websites, music, films, moving images and books.</p>
  87. <div class="kg-card kg-callout-card kg-callout-card-white"><p class="kg-callout-emoji">💡</p><div class="kg-callout-text"><strong>WATCH</strong><p> Brewster Kahle's 02011 Long Now Talk, "</p><a href="https://www.youtube.com/watch?v=RV_ALlJGU_c&amp;ref=longnow.org">Universal Access to All Knowledge</a><p>," on how the Internet Archive, deemed "impossible" when he founded it in 01996, became an essential part of the web. </p><strong>WATCH</strong><p> Jason Scott's 02015 Long Now Talk, "</p><a href="https://youtu.be/kugg_fewUgQ?ref=longnow.org">The Web in an Eye Blink</a><p>," which details Scott's project at the Internet Archive to save all the computer games and make them playable again inside modern web browsers.</p></div></div>
  88. <p>Some of the services provided by the Internet Archive enable institutions to document their own web properties or older materials, but the frequency of this backup varies. “We archive many widely-read and frequently-changing websites multiple times a day, whereas other sites may only be archived once or twice a year,” says Bailey. Web scrapers allow for easy archiving, but then there’s the problem of storage. A single copy of the Internet Archive library collection occupies more than 99 petabytes of server space (the organization stores at least two copies of everything). Safely storing any long-lived data requires significant emissions, energy and cost.</p>
  89. <p>The Internet Archive also takes multi-century preservation energy costs into account: “We own and operate and run all our own data centers,” says Bailey. “That’s partly because we’re an archive and don’t want to be dependent on corporate infrastructure, and partly because we can then run less expensive climate control operations.”</p>
  90. <figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.longnow.org/2023/07/ignite-project-silica-superman-closeup_1920x1280.jpg" class="kg-image" alt loading="lazy"><figcaption>Microsoft Research’s Project Silica storage device.</figcaption></figure>
  91. <p>Microsoft’s <a href="https://www.microsoft.com/en-us/research/project/project-silica/?ref=longnow.org">Project Silica</a> aims to tackle the problem by providing an alternative to traditional magnetic media, which degrades over time. The company created a low-cost, durable WORM media (an acronym for Write Once, Read Many, which means that data is written to a storage medium a single time and cannot be erased or modified). Considered immutable, WORM storage plays a pivotal role in meeting data security and compliance requirements and protecting against ransomware and other threats. Project Silica’s media is also resistant to electromagnetic frequencies: stored in quartz glass, the lifetime of data can be extended to tens of thousands of years. This has important implications for sustainability, because users can leave data in situ, eliminating the costly cycle of periodically copying data to a new media generation.</p>
  92. <figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><figcaption>The Arctic Code Vault in Svalbard.</figcaption></figure>
  93. <p>Another option is to store data in Earth’s most remote places. GitHub created an <a href="https://archiveprogram.github.com/arctic-vault/?ref=longnow.org">Arctic Code Vault</a>, a data repository preserved in the Arctic World Archive (AWA), a very-long-term archival facility 250 meters deep in the permafrost of an Arctic mountain. Such cold storage is meant to last at least 1,000 years and shield data from the outside world’s effects. Arctic archiving strategies could have potential as much of the world warms. Eliminating the need for costly HVAC filtration or cooling systems, building for redundancy, putting in place multiple failovers, storing data in remote or unconventional locations — these are certainly laudable measures, but more will need to be done to mitigate the enormous ecological impact of all this storage. <a href="https://www.theguardian.com/tv-and-radio/2021/oct/29/streamings-dirty-secret-how-viewing-netflix-top-10-creates-vast-quantity-of-co2?ref=longnow.org">Streaming</a>, <a href="https://www.nytimes.com/interactive/2021/09/03/climate/bitcoin-carbon-footprint-electricity.html?ref=longnow.org">cryptocurrency</a>, and day-to-day <a href="https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think?ref=longnow.org">Internet use</a> already make up nearly 4% of global CO2 emissions — a statistic that rivals the carbon footprint of the aviation industry. Sustainability must be a paramount concern of digital preservation technologies.</p>
  94. <hr><p>For individual users worried about data preservation, the answer may lie in a switch to better systems with more robust methods of encoding, or investing in mechanisms that permit a kind of time travel to older formats. <a href="https://archive-it.org/?ref=longnow.org">Archive-It</a>, Internet Archive’s web archiving service, offers subsidized and grant-funded services to organizations, including over 1,500 libraries, archives, governments and nonprofits, enabling users to create a personalized cultural heritage storage system. There’s also <a href="https://www.permanent.org/?ref=longnow.org">Permanent Legacy Foundation</a>, a cloud service backed by a nonprofit that allows consumers to permanently store and share their digital archives with loved ones, community members and future generations. “The most distinctive component of Permanent is our legacy planning feature,” says Robert Friedman, Executive Director at Permanent. “We have a very robust vision for memorialized content — what people can do with their archives once they’re no longer able to maintain them.” For a one-time fee, Permanent will convert a user’s files (documents, video, image, audio) to more durable formats; a Microsoft Word document might be converted to a PDF, for example. “The purpose is to make sure there exists at least one copy of every file that isn’t tied to a proprietary format,” says Friedman.</p>
  95. <div class="kg-card kg-callout-card kg-callout-card-white"><p class="kg-callout-emoji">💡</p><div class="kg-callout-text"><strong>READ</strong><p> our </p><a href="https://longnow.org/ideas/the-permanent-legacy-foundation-wants-to-preserve-your-digital-legacy-for-future-generations/">02020 profile</a><p> of the Permanent Legacy Foundation and its goal to preserve individuals' digital legacies for future generations.</p></div></div>
  96. <p>Not being tied to a corporate entity or the commercial cloud means many of these organizations can have a direct stake in the sustainability of their operations. “If you need your data available consistently, then you have to keep running the operation at idle,” says Friedman. But for many people, their data will never be needed again after death, in which case, those personal archives can be sealed and deleted. “We don’t strip you of your rights,” he adds, “but we do need to know what to do with that data, including whether to destroy it.” Permanent is also conservative in its appraisals, and its subscription model encourages individuals to be selective about what they choose to preserve. (Fees collected by Permanent are used to fund the ongoing cost of storage and operations.)</p>
  97. <p>“This challenge is not something that one organization is going to solve: it has to be a collective effort,” says Bailey. Federal agencies, public libraries, research institutions and private corporations, each with different budgets and mandates, must come together to address the issue of storage and associated concerns. And, as technology accelerates and emulation of older systems becomes more difficult, Digital Dark Age preppers may need to consider not just the survival of data, but the possibility that it may be misunderstood. Getting future readers to parse what we’ve preserved, and to make sense of that information, is an existential challenge without easy answers.</p>
  98. <p>The basic lingua franca of the internet is bits: zeroes and ones that lack intrinsic meaning without software and hardware. These bits are effectively linguistic symbols, which can be transmitted over long distances and represent wildly different objects — a string of ones and zeros might represent a photograph, video, sound or text. Barring the invention of some extraordinary universal translation system, making sense of these binary codes without knowing how they were intended to be read is impossible.  Also consider online disinformation, spread either by humans or artificial intelligence. Many digital archives already struggle to exclude or annotate content, not to mention living websites like Wikipedia, Twitter or Facebook, which must be continuously monitored for harmful or fraudulent content. “If you exclude fake news, does that mean you run the risk of a non-representative archive?” asks Bailey. “We are open to removal if there’s a reason, and we do it.”</p>
  99. <p>Public and private organizations and policy-makers will need to decide what content should be restricted, embargoed, or scraped from the web entirely, and design robust digital repositories that can weather the ravages of time. People with limited resources must also be ensured the ability to preserve their data; long-term storage should be designed for equity as well as for sustainability. Finally, we must be judicious in what we store and preserve, creating a meaningful collection for future historians. Our future — and our past — depend on it.</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>