A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  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>Writing with AI (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://ia.net/topics/writing-with-ai">
  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>Writing with AI</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://ia.net/topics/writing-with-ai" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-01-21
  72. </p>
  73. </nav>
  74. <hr>
  75. <p>When ChatGPT came out one year ago, we wanted to know whether and how it could be used for writing. We put it to the test and came up with a careful answer.</p>
  76. <p>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI. In this article, we answer the following five questions:</p>
  77. <ol>
  78. <li><a href="#1">How good is AI for writing?</a></li>
  79. <li><a href="#2">When is AI useful for writing, when is it not?</a></li>
  80. <li><a href="#3">When is it right and when is it wrong to use AI?</a></li>
  81. <li><a href="#4">What is the problem?</a></li>
  82. <li><a href="#5">What should we design?</a></li>
  83. </ol>
  84. <p>You heard it: <em>AI will save the world. AI will destroy the world. AI will become conscious. AI is dumb. AI is genius. AI is starting. AI is over.</em> Some hope that AI will become a robot God, others predict its entropic death. AI is exhausting. If you work in tech, you can’t ignore it. Unfortunately, not every hype is just hype.<sup id="fnref-20899-hype"><a href="#fn-20899-hype" rel="footnote">1</a></sup> So what’s going on? How good is AI for writing, really?</p>
  85. <h2 id="1">1. How good is AI for writing?</h2>
  86. <h3>It’s not <em>that</em> good</h3>
  87. <p>It is plausible that AI will improve, but no one knows what the future brings. Right now, if you have higher expectations than just getting writing done one way or the other, writing with ChatGPT is not <em>that</em> good.</p>
  88. <p>Observing and experimenting with AI, we were not the only ones to find both pleasure and pain, benefits and downsides in AI-driven writing.<sup id="fnref-20899-obvious"><a href="#fn-20899-obvious" rel="footnote">2</a></sup> Some of the dangers like hallucinations and false logic are observable and easily reproducible. Others like loss of voice and common trust in writing are long-term issues, and some plausible traps are somewhat speculative. Currently, it is not that good in terms of:</p>
  89. <ul>
  90. <li><em>Quality:</em> By itself, it makes a lot of mistakes and thus needs careful supervision to stay accurate and meaningful</li>
  91. <li><em>Voice:</em> Letting a machine speak in your place makes you sound and feel like a tool</li>
  92. <li><em>Satisfaction:</em> Having a robot ghost write for you makes you learn, grow, and achieve as much as winning in Chess with a computer</li>
  93. </ul>
  94. <p>And it’s <em>not that good</em> morally either: Why should someone bother to read what you didn’t bother to write?</p>
  95. <h3>It’s not <em>that</em> bad either</h3>
  96. <p>AI can write code, articles, books, emails, and it can do math. Sometimes it’s accurate, sometimes it makes up stuff. It <em>always</em> needs supervision. Left to its own devices, it can make the most ridiculous mistakes and make you look like a complete fool.</p>
  97. <p>It’s both shockingly bad and shockingly good at explaining difficult matters. ChatGPT can explain Kant, the Relativity Theory and it can translate Cuneiform documents at a frightening speed. Mind you: You can <em>not</em> trust it. It has no conscience in any way. It <em>does not understand</em> what it does, and it <em>does not know what is good or bad</em>.</p>
  98. <p>But if you get stuck reading Aristotle’s Metaphysics in ancient Greek, it can clear things up. And even—well, <em>especially</em>—when it’s wrong, it can give you a new perspective. It’s a great learning and dialogue partner. <sup id="fnref-20899-teacher"><a href="#fn-20899-teacher" rel="footnote">3</a></sup> In spite of all of its downsides, AI is cheap, fast, and painless.</p>
  99. <h3>Killer quality convenience</h3>
  100. <p>Despite the incessant hype, fear and hysteria, using AI for writing comes with a killer quality: convenience. It writes faster, clearer, and with fewer typos than most high school students. It’s comparable to early chess computers that quickly beat average players but took some time to reach the grand master level. When you look at how technology evolved over the last 20 years, you know that convenience is <em>the</em> key factor of success.<sup id="fnref-20899-convenience"><a href="#fn-20899-convenience" rel="footnote">4</a></sup></p>
  101. <p>And due to its convenience, we believe that using AI for writing will likely become as common as using dishwashers, spellcheckers, and pocket calculators. The question is: <em>How will it be used?</em> Like spell checkers, dishwashers, chess computers and pocket calculators, writing with AI will be tied to varying rules in different settings.<sup id="fnref-20899-rules"><a href="#fn-20899-rules" rel="footnote">5</a></sup></p>
  102. <p>In order to cope with this <em>new reality for writing</em> we needed to observe and think through the new writing process. We needed to test it up and down, left and right, back and forth, copy and paste, recopy and paste back, through and through.</p>
  103. <h2 id="2">2. When is AI useful for writing, when is it not?</h2>
  104. <h3>Not useful: Think less</h3>
  105. <p>AI turns thoughtful tasks into thoughtless ones. Not thinking is a recipe for disaster. Independent of how AI evolves, letting AI write in our place is a Sci-Fi catastrophe classic.</p>
  106. <p>Thinking less where thinking is key, is not advisable, unless you delegate it to another better-thinking person you trust. And yet. In our initial assessment we were missing a key benefit. The true benefit of writing with AI would only reveal itself through intense usage.</p>
  107. <p>Writing is not about getting letters on a page. It’s not about getting done with text. It’s finding a clear and simple expression for what we feel, mean, and want to express. Writing is thinking with letters. Usually we do this alone. With AI, you write in dialogue. It comes with a chat-interface, after all. So, don’t just write commands, talk to it.</p>
  108. <p><figure class="compare">
  109. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/ask-question-AI.png" alt class="macOS littleshadow"></figure></p>
  110. <figcaption><b>Ask me:</b> You can let AI ask you questions about your text. Then copy-paste your answers into an article. A classic writing technique, modernized.</figcaption>
  111. <p>
  112. <figure class="compare">
  113. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/ai-is-patient.png" alt class="macOS littleshadow"></figure></p>
  114. <figcaption><b>AI is patient:</b> It will continue asking you until you tell it to stop. No human is that patient with your ideas.</figcaption>
  115. <p></p>
  116. <h3>Useful: Think more</h3>
  117. <p>Writing in dialogue with an artificial companion was unexpected, inspiring and exciting. Using AI in dialog over a writing task was a truly new experience. Using AI as a dialogue partner during preparation, when stuck, and in editing proved surprisingly useful. And that thing is patient like no one else! It never gets tired of you.</p>
  118. <p>Thinking in dialogue is easier and more entertaining than struggling with feelings, letters, grammar and style all by ourselves. Using AI as a writing dialogue partner, ChatGPT can become a catalyst for clarifying what we want to say. Even if it is wrong.<sup id="fnref-20899-scrutinize"><a href="#fn-20899-scrutinize" rel="footnote">6</a></sup> Sometimes we need to hear what’s wrong to understand what’s right.</p>
  119. <p>AI often makes a lot of factual and logical mistakes. Mistakes, if identified, can help you think. Seeing in clear text what is wrong or, at least, what we <em>don’t</em> mean can help us set our minds straight about what we <em>really</em> mean. If you get stuck, you can also simply let it ask you questions. If you don’t know how to improve, you can tell it to be evil in its critique of your writing:</p>
  120. <p><figure class="compare">
  121. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/ai-normal-critique.png" alt class="macOS littleshadow"></figure></p>
  122. <figcaption><b>What do you think?</b> Usually ChatGPT tries to be nice. This type of critique may be motivating for beginners, but more experienced writers need more spice.</figcaption>
  123. <p>
  124. <figure class="compare">
  125. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/ai-be-evil.png" alt class="macOS littleshadow"></figure></p>
  126. <figcaption><b>“Be as evil as you can”:</b> If you want to learn something you need to make it hurt. If it hurts it has a point, if not, you’re ready to publish.</figcaption>
  127. <p></p>
  128. <p>AI can and will ruin your voice and credibility if you lazily let it write in your place. <em>As writers we can not allow AI to replace our own thinking. We should use it to simulate the thinking of a missing dialogue partner.</em> To write better, we need to think more, not less.</p>
  129. <h2 id="3">3. When is it right and when is it wrong to use AI?</h2>
  130. <p>When it comes to morals, each and everyone sees things a bit differently. But then again, most people agree on the very basics of good and bad. Most people around the globe will agree that stealing, lying and killing are bad habits. Is there anything that corresponds to stealing, lying and killing in writing?</p>
  131. <h3>It’s a spectrum</h3>
  132. <p>Let’s look at some examples. Ask yourself how you judge someone who uses AI on the following spectrum, as:</p>
  133. <ol>
  134. <li>A discussion partner to prepare writing</li>
  135. <li>A spellchecker, grammar checker to fix technical errors</li>
  136. <li>A fact checker, to get rid of overlooked factual errors</li>
  137. <li>A friend that helps out when you can’t find the right word that is on the tip of your tongue</li>
  138. <li>A partial ghostwriter</li>
  139. <li>A full-on ghostwriter, but then you check what was written</li>
  140. <li>A full-on ghostwriter without checking what was written</li>
  141. <li>A full-on ghost reader and ghostwriter without checks and balances</li>
  142. </ol>
  143. <p>It’s not easy to judge the very top and the very end of the list. Likely, different people will have different ethical standards in the middle part. Some will have different standards for themselves and for others and have no problem with that. In other words, at the extremes it’s clear, in the middle it’s up to us. There are limits to what is right and wrong.</p>
  144. <p><figure class="compare">
  145. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/ghost-AI-writer.png" alt class="macOS littleshadow"></figure></p>
  146. <figcaption><b>Ghost writer:</b> Why should someone bother to read what you didn’t bother to write?</figcaption>
  147. <p>
  148. <figure class="compare">
  149. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/enter-dialog-GPT-writer.png" alt class="macOS littleshadow"></figure></p>
  150. <figcaption><b>Dialog partner:</b> Talk to AI about your writing plans. Discuss style, length, logic, opening and summary. </figcaption>
  151. <p></p>
  152. <h3>Extremes and grey zone</h3>
  153. <p>It’s not that hard to identify which usage is generally sound and which is not. Just compare usage with AI to how we dealt with similar issues before AI.</p>
  154. <ul>
  155. <li>Discussing our writing with others is a general practice and regarded as universally helpful; honest writers honor and credit their discussion partners</li>
  156. <li>We already use spell checkers and grammar tools</li>
  157. <li>It’s common practice to use human editors for substantial or minor copy editing of our public writing</li>
  158. <li>Clearly, using dictionaries and thesauri to find the right expression is not a crime </li>
  159. </ul>
  160. <p>Letting someone else write part of our work is where it gets complicated. And if you look at the way that quoting works in academic writing, quoting a single expression you did not come up with by yourself is, academically speaking, unacceptable. Even transcribing a thought that you owe to another person is not allowed. Outside of academic writing, it’s up to us as writers to decide how much artificiality we are comfortable using and how transparent we want to be about it.</p>
  161. <h2 id="4">4. What is the problem?</h2>
  162. <h3>Entropy: Quoting quoted quotes</h3>
  163. <p>You don’t need to be an academic to see that we shouldn’t pretend to know what we don’t understand, say what we don’t mean, express what we don’t feel. The growing entropy of AI feeding on itself already not only creates issues of social trust and conscience, it also creates technical issues. How about trying to address the entropy instead of increasing it further?</p>
  164. <p>Artificial text is a statistical mashup of human quotes. When we quote AI, we quote quotes. We quote a Bircher muesli of quotes, write over it, and then feed it back into the AI system. There our input gets rehashed again. The way it currently works, AI is more likely to reach lukewarm entropy than ice-cold super-intelligence.</p>
  165. <p>Using AI in the editor replaces thinking. Using AI in dialogue increases thinking. Now, how can connect the editor and the chat window without making a mess? Is there a way to keep human and artificial text apart?</p>
  166. <h3>The key problem: Using AI text is patchwork</h3>
  167. <p>If you do use ChatGPT you will inevitably tend to blend AI-generated text with your own, blurring the lines of authorship. Here is what happens if you use ChatGPT inside a text editor:</p>
  168. <ol>
  169. <li>Write a prompt</li>
  170. <li>Edit the prompt</li>
  171. <li>Try to remember what you wrote yourself</li>
  172. </ol>
  173. <p>Off voice: you won’t remember. Again: Simply avoiding AI integration doesn’t address the problem at all. People will use ChatGPT together with our apps. People will paste robot text, and then edit and forget what is theirs and what is borrowed. <sup id="fnref-20899-mixed"><a href="#fn-20899-mixed" rel="footnote">7</a></sup></p>
  174. <h2 id="5">5. What should we design?</h2>
  175. <h3>Trust and Authorship</h3>
  176. <p>Honesty with others begins with honesty with ourselves, recognizing what is ours and what is borrowed. This starts in the writing process. We need to discern human voice and robot text. Current text editors don’t allow you to easily keep track of what is yours and what isn’t, unless you compare documents or risk high blood pressure with MS Word’s <em>Track Changes</em>.</p>
  177. <p><figure class="compare">
  178. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/track-changes.png" alt class="macOS littleshadow"></figure></p>
  179. <figcaption><b>Track Changes:</b> Does the job, but it’s a lot of work, and it comes with so much noise that you quickly forget what you wanted to say.</figcaption>
  180. <p>
  181. <figure class="compare">
  182. <img decoding="async" src="https://ia.net/wp-content/uploads/2023/11/ai-with-kaleidoscope.png" alt class="macOS littleshadow"></figure></p>
  183. <figcaption><b>Compare Versions:</b> Does the job as well, and it’s even more work than “Track Changes.” Not a reasonable way to handle the problem.</figcaption>
  184. <p></p>
  185. <p>Making the difference between humans and machines can’t and shouldn’t be delegated to a machine. It can’t be delegated to anyone other than the writer. It’s up to you, the writer, to be transparent about what is yours and what is not. Only you really know how much you used AI to write. Honesty is up to you. It’s up to us to make it easier for you to discern.</p>
  186. <h3>Keep it simple</h3>
  187. <p>In a time of big claims and exaggerated promises, we have to keep things simple. And that gets very hairy very quickly. We want to offer a straightforward solution for people who want to use AI and at the same time stay in control of what they write.</p>
  188. <ul>
  189. <li>How do we show the difference between artificial and human text without making a mess?</li>
  190. <li>How do we save it in plain text without adding tons of markup? </li>
  191. <li>How do we make human and artificial text discernible as we write without adding a lot of methodical, technical and graphical complexity?</li>
  192. </ul>
  193. <p>At first we thought that we should simply quote AI like we quote other authors. <em>Maybe we could use single straight quotes for AI text, or something like that.</em> But we soon found out that markup doesn’t work at all. Quoting AI is not the same as quoting people. When we use artificial text, we don’t necessarily quote entire sentences or paragraphs. What happens is nitty-gritty patchwork. And ideally, in the end we edit all AI away. How should that work? This is a riddle we had to solve in design and code. Stay tuned to see our solution.</p>
  194. <p><em>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI.</em></p>
  195. </article>
  196. <hr>
  197. <footer>
  198. <p>
  199. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  200. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  201. </svg> Accueil</a> •
  202. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  203. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  204. </svg> Suivre</a> •
  205. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  206. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  207. </svg> Pro</a> •
  208. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  209. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  210. </svg> Email</a> •
  211. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  212. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  213. </svg> Légal</abbr>
  214. </p>
  215. <template id="theme-selector">
  216. <form>
  217. <fieldset>
  218. <legend><svg class="icon icon-brightness-contrast">
  219. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  220. </svg> Thème</legend>
  221. <label>
  222. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  223. </label>
  224. <label>
  225. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  226. </label>
  227. <label>
  228. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  229. </label>
  230. </fieldset>
  231. </form>
  232. </template>
  233. </footer>
  234. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  235. <script>
  236. function loadThemeForm(templateName) {
  237. const themeSelectorTemplate = document.querySelector(templateName)
  238. const form = themeSelectorTemplate.content.firstElementChild
  239. themeSelectorTemplate.replaceWith(form)
  240. form.addEventListener('change', (e) => {
  241. const chosenColorScheme = e.target.value
  242. localStorage.setItem('theme', chosenColorScheme)
  243. toggleTheme(chosenColorScheme)
  244. })
  245. const selectedTheme = localStorage.getItem('theme')
  246. if (selectedTheme && selectedTheme !== 'undefined') {
  247. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  248. }
  249. }
  250. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  251. window.addEventListener('load', () => {
  252. let hasDarkRules = false
  253. for (const styleSheet of Array.from(document.styleSheets)) {
  254. let mediaRules = []
  255. for (const cssRule of styleSheet.cssRules) {
  256. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  257. continue
  258. }
  259. // WARNING: Safari does not have/supports `conditionText`.
  260. if (cssRule.conditionText) {
  261. if (cssRule.conditionText !== prefersColorSchemeDark) {
  262. continue
  263. }
  264. } else {
  265. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  266. continue
  267. }
  268. }
  269. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  270. }
  271. // WARNING: do not try to insert a Rule to a styleSheet you are
  272. // currently iterating on, otherwise the browser will be stuck
  273. // in a infinite loop…
  274. for (const mediaRule of mediaRules) {
  275. styleSheet.insertRule(mediaRule.cssText)
  276. hasDarkRules = true
  277. }
  278. }
  279. if (hasDarkRules) {
  280. loadThemeForm('#theme-selector')
  281. }
  282. })
  283. </script>
  284. </body>
  285. </html>