davidbgk
/
larlet-fr-david-cache

<!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` element
  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>Frugal computing (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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- 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://wimvanderbauwhede.github.io/articles/frugal-computing/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Frugal computing</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://wimvanderbauwhede.github.io/articles/frugal-computing/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>On the need for low-carbon and sustainable computing and the path towards zero-carbon computing.</p>

<h2>Key points</h2>

<h3>The problem:</h3>

<ul>
<li>The current emissions from computing are about 2% of the world total but are projected to rise steeply over the next two decades. By 2040 emissions from computing alone will be close to half the emissions level acceptable to keep global warming below 1.5°C. This growth in computing emissions is unsustainable: it would make it virtually impossible to meet the emissions warming limit.</li>
<li>The emissions from production of computing devices far exceed the emissions from operating them, so even if devices are more energy efficient producing more of them will make the emissions problem worse. Therefore we must extend the useful life of our computing devices.</li>
</ul>

<h3>The solution:</h3>

<ul>
<li>As a society we need to start treating computational resources as finite and precious, to be utilised only when necessary, and as effectively as possible. We need <em>frugal computing</em>: achieving the same results for less energy. </li>
</ul>

<h3>The vision:</h3>

<ul>
<li>Imagine we can extend the useful life of our devices and even increase their capabilities without any increase in energy consumption.</li>
<li>Meanwhile, we will develop the technologies for the next generation of devices, designed for energy efficiency as well as long life.</li>
<li>Every subsequent cycle will last longer, until finally the world will have computing resources that last forever and hardly use any energy.</li>
</ul>

<h2>Defining computational resources</h2>

<p>Computational resources are all resources of energy and material that are involved in any given task that requires computing. For example, when you perform a web search on your phone or participate in a video conference on your laptop, the computational resources involved are those for production and running of your phone or laptop, the mobile network or WiFi you are connected to, the fixed network it connects to, the data centres that perform the search or video delivery operations. If you are a scientist running a simulator in a supercomputer, then the computational resources involved are your desktop computer, the network and the supercomputer. For an industrial process control system, it is the production and operation of the Programmable Logic Controllers.</p>

<h2>Computational resources are finite</h2>

<p>Since the start of general purpose computing in the 1970s, our society has been using increasing amounts of computational resources. </p>

<p>For a long time the growth in computational capability as a function of device power consumption has literally been exponential, a trend expressed by <a href="https://www.britannica.com/technology/Moores-law">Moore's law</a>. </p>

<p>With this growth in computational capability, increasing use of computational resources has become pervasive in today's society. Until recently, the total energy budget and carbon footprint resulting from the use of computational resources has been small compared to the world total. As a result, computational resources have until recently effectively been treated as unlimited. </p>

<p>Because of this, the economics of hardware and software development have been built on the assumption that with every generation, performance would double for free. Now, this unlimited growth is no longer sustainable because of a combination of technological limitations and the climate emergency. Therefore, we need to do more with less. </p>

<p>Moore's law has effectively come to an end as integrated circuits can't be scaled down any more. As a result, the performance per Watt is no longer increasing exponentially. On the other hand, the demand for computational resources is set to increase considerably.   </p>

<p>The consequence is that at least for the next decades, growth in demand for computational resources will not be offset by increased power efficiency. Therefore with business as usual, the total energy budget and carbon footprint resulting from the use of computational resources will grow dramatically to become a major contributor to the world total.</p>

<p>Furthermore, the resources required to create the compute devices and infrastructure are also finite, and the total energy budget and carbon footprint of production of compute devices is huge. Moore's Law has conditioned us to doubling of performance ever two years, which has led to very short effective lifetimes of compute hardware. This rate of obsolescence of compute devices and software is entirely unsustainable. </p>

<p>Therefore, as a society we need to start treating computational resources as finite and precious, to be utilised only when necessary, and as frugally as possible. And as computing scientists, we need to ensure that computing has the lowest possible energy consumption. And we should achieve this with the currently available technologies because the lifetimes of compute devices needs to be extended dramatically. </p>

<p>I would like to call this "frugal computing": achieving the same results for less energy by being more frugal with our computing resources. </p>

<h2>The scale of the problem</h2>

<h3>Meeting the climate targets</h3>

<p>To limit global warming to 1.5°C, within the next decade a global reduction from 55 gigatonnes CO₂ equivalent (GtCO₂e) by 32 GtCO₂e to 23 GtCO₂e per year is needed <a href="#5">[5]</a>. So by 2030 that would mean a necessary reduction in overall CO₂ emissions of more than 50%. According to the International Energy Agency <a href="#10">[10]</a>, emissions from electricity are currently estimated at about 10 GtCO₂e. The global proportion of electricity from renewables is projected to rise from the current figure of 22% to slightly more than 30% by 2040 <a href="#15">[15]</a>. In other words, we cannot count on renewables to eliminate CO₂ emissions from electricity in time to meet the climate targets. Reducing the energy consumption is the only option. </p>

<h3>Emissions from consumption of computational resources</h3>

<p>The consequence of the end of Moore's law was expressed most dramatically in a 2015 report by the Semiconductor Industry Association (SIA) "Rebooting the IT Revolution: a call to action" <a href="#1">[1]</a>, which calculated that, based on projected growth rates and on the 2015 ITRS roadmap for CMOS chip engineering technologies <a href="#16">[16]</a>, </p>

<blockquote>
<p>computing will not be sustainable by 2040, when the energy required for computing will exceed the estimated world's energy production. </p>
</blockquote>

<p>It must be noted that this is purely the energy of the computing device, as explained in the report. The energy required by e.g. the data centre infrastructure and the network is not included. </p>

<p>The SIA has reiterated this in their 2020 "Decadal Plan for Semiconductors" <a href="#2">[2]</a>, although they have revised the projection based on a "market dynamics argument": </p>

<blockquote>
<p>If the exponential growth in compute energy is left unchecked, market dynamics will limit the growth of the computational capacity which would cause a flattening out the energy curve. </p>
</blockquote>

<p>This is merely an acknowledgement of the reality that the world's energy production is not set to rise dramatically, and therefore increased demand will result in higher prices which will damp the demand. So computation is not actually going to exceed the world's energy production.</p>

<blockquote>
<p>Ever-rising energy demand for computing vs. global energy production is creating new risk, and new computing paradigms offer opportunities to dramatically improve energy efficiency.</p>
</blockquote>

<p>In the countries where most of the computational resources are consumed (US and EU), electricity production accounts currently for 25% of the total emissions <a href="#4">[4]</a>. According to the SIA's estimates, computation accounts currently for a little less than 10% of the total electricity production but is set to rise to about 30% by 2040. This would mean that, with business as usual, computational resources would be responsible for at least 10% of all global CO₂ emissions by 2040. </p>

<p>The independent study "Assessing ICT global emissions footprint: Trends to 2040 &amp; recommendations" <a href="#3">[3]</a> corroborates the SIA figures: they estimate the computing greenhouse gas emissions for 2020 between 3.0% and 3.5% of the total, which is a bit higher than the SIA estimate of 2.5% because it does take into account networks and datacentres. Their projection for 2040 is 14% rather than 10%, which means a growth of 4x rather than 3x. </p>

<p>To put it in absolute values, based on the above estimate, by 2040 energy consumption of compute devices would be responsible for 5 GtCO₂e, whereas the target for world total emissions from all sources is 23 GtCO₂e.</p>

<h3>Emissions from production of computational resources</h3>

<p>To make matters worse, the carbon emissions resulting from the production of computing devices exceeds those incurred during operation. This is a crucial point, because it means that we can't rely on next-generation hardware technologies to save energy: the production of this next generation of devices will create more emissions than any operational gains can offset. It does not mean research into more efficient technologies should stop. But their deployment cycles should be much slower. Extending the useful life of compute technologies must become our priority.</p>

<p>The report about the cost of planned obsolescence by the European Environmental Bureau <a href="#7">[7]</a> makes the scale of the problem very clear. For laptops and similar computers, manufacturing, distribution and disposal account for 52% of their <a href="https://www.sciencedirect.com/topics/earth-and-planetary-sciences/global-warming-potential">Global Warming Potential</a> (i.e. the amount of CO₂-equivalent emissions caused). For mobile phones, this is 72%. The report calculates that the lifetime of these devices should be at least 25 years to limit their Global Warming Potential. Currently, for laptops it is about 5 years and for mobile phones 3 years. According to <a href="#8">[8]</a>, the typical lifetime for servers in data centres is also 3-5 years, which again falls short of these minimal requirements. According to this paper, the impact of manufacturing of the servers is 20% of the total, which would require an extension of the useful life to 11-18 years. </p>

<h3>The total emissions cost from computing</h3>

<p>Taking into account the carbon cost of both operation and production, computing would be responsible for 10 GtCO₂e by 2040, almost half of the acceptable CO₂ emissions budget <a href="#2">[2,3,14]</a>.</p>

<figure>
<img src="https://wimvanderbauwhede.github.io/images/computing-emissions.png" alt="A graph with two bars: world emissions (55) and emissions from computing (0.1) in 2020; and for 2040, the world emissions target to limit warming to 1.5°C (23), and the projected emissions from computing (10)" title="A graph with two bars: world emissions (55) and emissions from computing (0.1) in 2020; and for 2040, the world emissions target to limit warming to 1.5°C (23), and the projected emissions from computing (10)">
<figcaption>Actual and projected emissions from computing (production+operation), and 2040 emission target to limit warming to &lt;2°C</figcaption>
</figure>

<h3>A breakdown per device type</h3>

<p>To decide on the required actions to reduce emissions, it is important to look at the numbers of different types of devices and their energy usage. If we consider mobile phones as one category, laptops and desktops as another and servers as a third category, the questions are: how many devices are there in each category, and what is their energy consumption. The absolute numbers of devices in use are quite difficult to estimate, but the yearly sales figures <a href="#10">[10]</a> and estimates for the energy consumption for each category <a href="#11">[11,12,13,14]</a> are readily available from various sources. The tables below show the 2020 sales and yearly energy consumption estimates for each category of devices. A detailed analysis is presented in <a href="#14">[14]</a>.</p>

<table>
<caption>Number of devices sold worldwide in 2020</caption>
<tr><th>Device type</th><th>2020 sales</th></tr>
<tr><td>Phones</td><td> 3000M</td></tr>
<tr><td>Servers</td><td> 13M</td></tr>
<tr><td>Tablets</td><td> 160M</td></tr>
<tr><td>Displays</td><td> 40M</td></tr>
<tr><td>Laptops</td><td> 280M</td></tr>
<tr><td>Desktops</td><td> 80M</td></tr>
<tr><td>TVs</td><td>220M</td></tr>
<tr><td>IoT devices</td><td> 2000M</td></tr>
</table>

<p>The energy consumption of all communication and computation technology currently in use in the world is currently around 3,000 TWh, about 11% of the world's electricity consumption, projected to rise by 3-4 times by 2040 with business as usual according to <a href="#2">[2]</a>. This is a conservative estimate: the study in <a href="#14">[14]</a> includes a worst-case projection of a rise to 30,000 TWh (exceeding the current world electricity consumption) by 2030. </p>

<table>
<caption>Yearly energy consumption estimates in TWh</caption>
<tr><th>Device type</th><th>TWh</th></tr>
<tr><td>TVs</td><td> 560</td></tr>
<tr><td>Other Consumer devices</td><td> 240</td></tr>
<tr><td>Fixed access network (wired+WiFi)</td><td> 900 + 500</td></tr>
<tr><td>Mobile network</td><td> 100</td></tr>
<tr><td>Data centres</td><td> 700</td></tr>
<tr><td>Total</td><td> 3000</td></tr>
</table>

<p>The above data make it clear which actions are necessary: the main carbon cost of phones, tablets and IoT devices is their production and the use of the mobile network, so we must extend their useful life very considerably and reduce network utilisation. Extending the life time is also the key action for datacentres and desktop computers, but their energy consumption also needs to be reduced considerably, as does the energy consumption of the wired, WiFi and mobile networks. </p>

<h2>A vision for low carbon and sustainable computing</h2>

<p>It is clear that urgent action is needed: in less than two decades, the global use of computational resources needs to be transformed radically. Otherwise, the world will fail to meet its climate targets, even with significant reductions in other emission areas. The carbon cost of both production and operation of the devices must be considerably reduced. </p>

<p>To use devices for longer, a change in business models as well as consumer attitudes is needed. This requires raising awareness and education but also providing incentives for behavioural change. And to support devices for a long time, an infrastructure for repair and maintenance is needed, with long-term availability of parts, open repair manuals and training. To make all this happen, economic incentives and policies will be needed (e.g. taxation, regulation). Therefore we need to convince key decision makers in society, politics and business.</p>

<p>Imagine that we can extend the useful life of our devices and even increase their capabilities, purely through better computing science. With every improvement, the computational capacity will in effect increase without any increase in energy consumption. Meanwhile, we will develop the technologies for the next generation of devices, designed for energy efficiency as well as long life. Every subsequent cycle will last longer, until finally the world will have computing resources that last forever and hardly use any energy.</p>

<figure>
<img src="https://wimvanderbauwhede.github.io/images/towards-zero-carbon-computing.png" alt="A graph with four trends: emissions from production, emissions in total, performance and emissions/performance." title="A graph with four trends: emissions from production, emissions in total, performance and emissions/performance.">
<figcaption>Towards zero carbon computing: increasing performance and lifetime and reducing emissions. Illustration with following assumptions: every new generation lasts twice as long as the previous one and cost half as much energy to produce; energy efficiency improves linearly with 5% per year.</figcaption>
</figure>

<p>This is a very challenging vision, spanning all aspects of computing science. To name just a few challenges:</p>

<ul>
<li>We must design software so that it supports devices  with extended lifetimes.</li>
<li>We need software engineering strategies to handle the extended software life cycles, and in particular deal with <a href="https://en.wikipedia.org/wiki/Technical_debt">technical debt</a>.</li>
<li>Longer life means more opportunities to exploit vulnerabilities, so we need better cyber security.</li>
<li>We need to develop new approaches to reduce overall energy consumption across the entire system.</li>
</ul>

<p>To address these challenges, action is needed on many fronts. What will you do to make frugal computing a reality?</p>

<h2>References</h2>

<p><small>
  <span id="1">[1] <a href="https://www.semiconductors.org/resources/rebooting-the-it-revolution-a-call-to-action-2/"><em>"Rebooting the IT revolution: a call to action"</em>, Semiconductor Industry Association/Semiconductor Research Corporation, Sept 2015</a></span><br>
  <span id="2">[2] <a href="https://www.src.org/about/decadal-plan/decadal-plan-full-report.pdf"><em>"Full Report for the Decadal Plan for Semiconductors"</em>, Semiconductor Industry Association/Semiconductor Research Corporation, Jan 2021</a></span><br>
  <span id="3">[3] <a href="https://www.sciencedirect.com/science/article/pii/S095965261733233X"><em>"Assessing ICT global emissions footprint: Trends to 2040 &amp; recommendations"</em>, Lotﬁ Belkhir, Ahmed Elmeligi, Journal of Cleaner Production 177 (2018) 448--463</a></span><br>
  <span id="4">[4] <a href="https://www.epa.gov/ghgemissions/sources-greenhouse-gas-emissions"><em>"Sources of Greenhouse Gas Emissions"</em>, United States Environmental Protection Agency</a>, Last updated on April 14, 2021</span><br>
  <span id="5">[5] <a href="https://www.unep.org/emissions-gap-report-2020"><em>"Emissions Gap Report 2020"</em>, UN Environment Programme, December 2020</a></span><br>
  <span id="6">[6] <a href="https://onlinelibrary.wiley.com/doi/full/10.1111/jiec.13123"><em>"The link between product service lifetime and GHG emissions: A comparative study for different consumer products"</em>, Simon Glöser-Chahoud, Matthias Pfaff, Frank Schultmann,  Journal of Industrial Ecology, 25 (2), pp 465-478, March 2021</a></span><br>
  <span id="7">[7] <a href="https://eeb.org/library/coolproducts-report/"><em>"Cool products don’t cost the Earth – Report"</em>, European Environmental Bureau, September 2019</a></span><br>
  <span id="8">[8] <a href="https://link.springer.com/article/10.1007/s11367-014-0838-7"><em>"The life cycle assessment of a UK data centre"</em>, Beth Whitehead, Deborah Andrews, Amip Shah, Graeme Maidment, Building and Environment 93 (2015) 395--405, January 2015</a></span><br>
  <span id="9">[9] <a href="https://www.statista.com">Statista</a>,  retrieved June 2021</span><br>
  <span id="10">[10] <a href="https://www.iea.org/reports/global-energy-CO%E2%82%82-status-report-2019/emissions"><em>"Global Energy &amp; CO₂ Status Report"</em>, International Energy Agency, March 2019</a></span><br>
  <span id="11">[11] <a href="https://link.springer.com/article/10.1007/s11367-015-0909-4"><em>"Redefining scope: the true environmental impact of smartphones?"</em>, James Suckling, Jacquetta Lee, The International Journal of Life Cycle Assessment volume 20, pages 1181–1196 (2015)</a></span><br>
  <span id="12">[12] <a href="https://www.racksolutions.com/news/blog/server-rack-power-consumption-calculator/"><em>"Server Rack Power Consumption Calculator"</em>, Rack Solutions, Inc., July 2019</a></span><br>
  <span id="13">[13] <a href="https://www.sciencedirect.com/science/article/pii/S111001682030524X"><em>"Analysis of energy consumption and potential energy savings of an institutional building in Malaysia"</em>, Siti Birkha Mohd Ali,  M.Hasanuzzaman, N.A.Rahim, M.A.A.Mamun, U.H.Obaidellah,  Alexandria Engineering Journal, Volume 60, Issue 1, February 2021, Pages 805-820</a></span><br>
  <span id="14">[14] <a href="https://doi.org/10.3390/challe6010117"><em>"On Global Electricity Usage of Communication Technology: Trends to 2030"</em>, Anders S. G. Andrae, Tomas Edler, Challenges 2015, 6(1), 117-157 </a></span><br>
  <span id="15">[15] <a href="https://www.bp.com/en/global/corporate/energy-economics/energy-outlook.html"><em>"BP Energy Outlook: 2020 Edition"</em>,BP plc</a></span><br>
  <span id="16">[16] <a href="https://www.semiconductors.org/resources/2015-international-technology-roadmap-for-semiconductors-itrs/"><em>"2015 International Technology Roadmap for Semiconductors (ITRS)"</em>, Semiconductor Industry Association, June 2015</a></span><br>
</small></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> Suivre</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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<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>