diff --git a/wagtailio/newsletter/templates/newsletter/newsletter_index_page.html b/wagtailio/newsletter/templates/newsletter/newsletter_index_page.html
index 87132b37d..ce8d71870 100644
--- a/wagtailio/newsletter/templates/newsletter/newsletter_index_page.html
+++ b/wagtailio/newsletter/templates/newsletter/newsletter_index_page.html
@@ -15,9 +15,12 @@ <h1 class="hero__heading">This week in Wagtail</h1>
                 <h2 class="hero__subheading intro-big">A (mostly) weekly email with updates from the Wagtail core team.</h2>
             </div>
             <div class="hero__icon hero__icon--paper-plane">
-                <svg aria-hidden="true">
+                <svg class="hero__light-mode" aria-hidden="true">
                     <use xlink:href="#paper-plane"></use>
                 </svg>
+                <svg class="hero__dark-mode" aria-hidden="true">
+                    <use xlink:href="#paper-plane-dark"></use>
+                </svg>
             </div>
         </div>
     </div>
diff --git a/wagtailio/project_styleguide/templates/patterns/base.html b/wagtailio/project_styleguide/templates/patterns/base.html
index ed5e7081f..21658862e 100644
--- a/wagtailio/project_styleguide/templates/patterns/base.html
+++ b/wagtailio/project_styleguide/templates/patterns/base.html
@@ -28,6 +28,10 @@
     </head>
 
     <body class="app {% block body_class %}{% endblock %}">
+
+        {# blocking js loaded first to ensure no flash of white on theme detection #}
+        <script src="{% manifest 'js/blocking.js' %}"></script>
+
         {% block body_top %}{% endblock %}
         {% wagtailuserbar %}
 
diff --git a/wagtailio/project_styleguide/templates/patterns/base_page.html b/wagtailio/project_styleguide/templates/patterns/base_page.html
index ce160cd82..d40c9537e 100644
--- a/wagtailio/project_styleguide/templates/patterns/base_page.html
+++ b/wagtailio/project_styleguide/templates/patterns/base_page.html
@@ -55,25 +55,13 @@
     <link title="The Wagtail CMS Blog" type="application/atom+xml" rel="alternate" href="{% url 'blog_feed' %}">
     <link title="This Week in Wagtail" type="application/atom+xml" rel="alternate" href="{% url 'newsletter_feed' %}">
 
-    <link rel="apple-touch-icon" sizes="57x57" href="{% static 'img/favicons/apple-touch-icon-57x57.png' %}"/>
-    <link rel="apple-touch-icon" sizes="60x60" href="{% static 'img/favicons/apple-touch-icon-60x60.png' %}"/>
-    <link rel="apple-touch-icon" sizes="72x72" href="{% static 'img/favicons/apple-touch-icon-72x72.png' %}"/>
-    <link rel="apple-touch-icon" sizes="76x76" href="{% static 'img/favicons/apple-touch-icon-76x76.png' %}"/>
-    <link rel="apple-touch-icon" sizes="114x114" href="{% static 'img/favicons/apple-touch-icon-114x114.png' %}"/>
-    <link rel="apple-touch-icon" sizes="120x120" href="{% static 'img/favicons/apple-touch-icon-120x120.png' %}"/>
-    <link rel="apple-touch-icon" sizes="144x144" href="{% static 'img/favicons/apple-touch-icon-144x144.png' %}"/>
-    <link rel="apple-touch-icon" sizes="152x152" href="{% static 'img/favicons/apple-touch-icon-152x152.png' %}"/>
-    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicons/apple-touch-icon-180x180.png' %}"/>
-    <link rel="icon" type="image/png" href="{% static 'img/favicons/favicon-32x32.png' %}" sizes="32x32"/>
-    <link rel="icon" type="image/png" href="{% static 'img/favicons/android-chrome-192x192.png' %}" sizes="192x192"/>
-    <link rel="icon" type="image/png" href="{% static 'img/favicons/favicon-96x96.png' %}" sizes="96x96"/>
-    <link rel="icon" type="image/png" href="{% static 'img/favicons/favicon-16x16.png' %}" sizes="16x16"/>
-    <link rel="manifest" href="{% static 'img/favicons/manifest.json' %}" />
-    <link rel="shortcut icon" href="{% static 'img/favicons/favicon.ico' %}" />
-    <meta name="msapplication-TileColor" content="#43b1b0"/>
-    <meta name="msapplication-TileImage" content="{% static 'img/favicons/mstile-144x144.png' %}"/>
-    <meta name="msapplication-config" content="{% static 'img/favicons/browserconfig.xml' %}" />
-    <meta name="theme-color" content="#43b1b0"/>
+    {# Reference: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs #}
+    <link rel="icon" href="{% static 'img/favicons/favicon.ico' %}" sizes="32x32">{# 32x32 #}
+    <link rel="icon" href="{% static 'img/favicons/favicon.svg'%}" type="image/svg+xml">{# todo: finish icon (bg, white fill), and @media (prefers-color-scheme: dark) #}
+    <link rel="apple-touch-icon" href="{% static 'img/favicons/apple-touch-icon.png' %}">{# 180x180 #}
+    <link rel="manifest" href="{% static 'img/favicons/favicon.webmanifest' %}">
+
+    <meta name="theme-color" content="#2e1f5e"/>
 
     {% if GOOGLE_TAG_MANAGER_ID %}
         <!-- Google Tag Manager -->
diff --git a/wagtailio/project_styleguide/templates/patterns/components/hero/hero.html b/wagtailio/project_styleguide/templates/patterns/components/hero/hero.html
index 5931a576f..d3d4eaff1 100644
--- a/wagtailio/project_styleguide/templates/patterns/components/hero/hero.html
+++ b/wagtailio/project_styleguide/templates/patterns/components/hero/hero.html
@@ -22,9 +22,12 @@ <h2 class="hero__subheading intro-big">{% firstof value.sub_heading value.subhea
         {# Paper plane svg is made of mupltiple paths - different to the other icon choices #}
         {% if value.icon == 'paper-plane' %}
             <div class="hero__icon hero__icon--paper-plane">
-                <svg aria-hidden="true">
+                <svg class="hero__light-mode" aria-hidden="true">
                     <use xlink:href="#paper-plane"></use>
                 </svg>
+                <svg class="hero__dark-mode" aria-hidden="true">
+                    <use xlink:href="#paper-plane-dark"></use>
+                </svg>
             </div>
         {% elif value.icon %}
             {% include "patterns/components/icon/icon.html" with icon=value.icon classes="icon--primary hero__icon" %}
diff --git a/wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html b/wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html
index 8ef7ef2d0..ee7213934 100644
--- a/wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html
+++ b/wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html
@@ -1,6 +1,6 @@
 <div class="sign-up-form {% if classes %}{{ classes }}{% endif %}">
     <h2 class="sign-up-form__heading heading-three">{{ heading }}</h2>
-    <p class="sign-up-form__sub-heading">{{ sub_heading }}</p>
+    <h3 class="sign-up-form__sub-heading">{{ sub_heading }}</h3>
     <form class="sign-up-form__container" action="https://torchbox.us1.list-manage.com/subscribe/post?u={{ mailchimp_account_id }}&id={{ mailchimp_newsletter_id }}" method="post">
         <fieldset>
             <label for="email" class="u-sr-only">Enter your email address</label>
diff --git a/wagtailio/project_styleguide/templates/patterns/components/streamfields/cta/cta.html b/wagtailio/project_styleguide/templates/patterns/components/streamfields/cta/cta.html
index 36a12ac49..9f9082d7a 100644
--- a/wagtailio/project_styleguide/templates/patterns/components/streamfields/cta/cta.html
+++ b/wagtailio/project_styleguide/templates/patterns/components/streamfields/cta/cta.html
@@ -1,7 +1,7 @@
 <div class="grid">
     <a class="cta" href="{{ value.cta.url }}">
         <div class="cta__content">
-            <p class="cta__title teaser-heading">{{ value.cta.text }}</p>
+            <h2 class="cta__title teaser-heading">{{ value.cta.text }}</h2>
             <p class="cta__description teaser-intro">{{ value.description }}</p>
         </div>
         <svg class="arrow arrow--large" aria-hidden="true"><use xlink:href="#arrow"></use></svg>
diff --git a/wagtailio/project_styleguide/templates/patterns/components/streamfields/headline/headline.html b/wagtailio/project_styleguide/templates/patterns/components/streamfields/headline/headline.html
index c66ecbf52..da4cd716b 100644
--- a/wagtailio/project_styleguide/templates/patterns/components/streamfields/headline/headline.html
+++ b/wagtailio/project_styleguide/templates/patterns/components/streamfields/headline/headline.html
@@ -7,7 +7,7 @@
         <h2 class="headline__heading heading-one">{{ value.heading }}</h2>
 
         {% if value.sub_heading %}
-            <p class="headline__subheading intro-big">{{ value.sub_heading }}</p>
+            <h3 class="headline__subheading intro-big">{{ value.sub_heading }}</h3>
         {% endif %}
 
         {% if value.intro %}
diff --git a/wagtailio/project_styleguide/templates/patterns/components/theme-toggle/theme-toggle.html b/wagtailio/project_styleguide/templates/patterns/components/theme-toggle/theme-toggle.html
new file mode 100644
index 000000000..f9a6838cd
--- /dev/null
+++ b/wagtailio/project_styleguide/templates/patterns/components/theme-toggle/theme-toggle.html
@@ -0,0 +1,11 @@
+<div class="theme-toggle">
+    <noscript>
+        <p>{{ _('JavaScript is required to toggle light/dark mode.') }}.</p>
+    </noscript>
+    <span class="theme-toggle__label tag-label">Dark</span>
+    <button id="wagtail-theme" class="theme-toggle__button" type="button" aria-label="Switch theme">
+        <span class="dark-only u-sr-only">Light mode</span>
+        <span class="light-only u-sr-only">Dark mode</span>
+    </button>
+    <span class="theme-toggle__label tag-label">Light</span>
+</div>
diff --git a/wagtailio/project_styleguide/templates/patterns/includes/footer.html b/wagtailio/project_styleguide/templates/patterns/includes/footer.html
index 674c02188..256c83889 100644
--- a/wagtailio/project_styleguide/templates/patterns/includes/footer.html
+++ b/wagtailio/project_styleguide/templates/patterns/includes/footer.html
@@ -12,7 +12,7 @@
                             <use xlink:href="#money"></use>
                         </svg>
                         <div class="footer__icon-link-content">
-                            <p class="footer__icon-link-heading">Sponsor Wagtail</p>
+                            <h2 class="footer__icon-link-heading">Sponsor Wagtail</h2>
                             <p class="mini-meta">Help build Wagtail enhancements and support the long-term health of the project</p>
                         </div>
                     </a>
@@ -23,7 +23,7 @@
                             <use xlink:href="#code-file"></use>
                         </svg>
                         <div class="footer__icon-link-content">
-                            <p class="footer__icon-link-heading">Contribute code</p>
+                            <h2 class="footer__icon-link-heading">Contribute code</h2>
                             <p class="mini-meta">200+ contributors in 2022!</p>
                         </div>
                     </a>
@@ -31,36 +31,43 @@
             </ul>
 
             <div class="footer__sign-up">
+
+                <div class="footer__sub-footer">
+                    {# Socials #}
+                    <div class="footer__socials">
+                        <p class="footer__social-heading heading-four">Follow us</p>
+                        <ul class="footer__social-list">
+                            <li>
+                                <a href="https://github.com/wagtail/wagtail" aria-label="Wagtail on Github">
+                                    <svg class="footer__social-icon footer__social-icon--github" aria-hidden="true">
+                                        <use xlink:href="#github"></use>
+                                    </svg>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://twitter.com/wagtailcms" aria-label="Wagtail on Twitter">
+                                    <svg class="footer__social-icon" aria-hidden="true">
+                                        <use xlink:href="#twitter"></use>
+                                    </svg>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://www.youtube.com/channel/UCXsuEmvisPzuJPaIdpVM0yg" aria-label="Wagtail on YouTube">
+                                    <svg class="footer__social-icon" aria-hidden="true">
+                                        <use xlink:href="#youtube"></use>
+                                    </svg>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    {# Theme switcher #}
+                    {% include "patterns/components/theme-toggle/theme-toggle.html" %}
+                </div>
+
                 {# sign up form #}
                 {% include "patterns/components/sign_up_form/sign_up_form.html" with heading="What's new in Wagtail" sub_heading="Sign up for events, features and adventures on Wagtail" %}
 
-                {# Socials #}
-                <div class="footer__socials">
-                    <p class="footer__social-heading heading-four">Follow us</p>
-                    <ul class="footer__social-list">
-                        <li>
-                            <a href="https://github.com/wagtail/wagtail" aria-label="Wagtail on Github">
-                                <svg class="footer__social-icon footer__social-icon--github" aria-hidden="true">
-                                    <use xlink:href="#github"></use>
-                                </svg>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://twitter.com/wagtailcms" aria-label="Wagtail on Twitter">
-                                <svg class="footer__social-icon" aria-hidden="true">
-                                    <use xlink:href="#twitter"></use>
-                                </svg>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://www.youtube.com/channel/UCXsuEmvisPzuJPaIdpVM0yg" aria-label="Wagtail on YouTube">
-                                <svg class="footer__social-icon" aria-hidden="true">
-                                    <use xlink:href="#youtube"></use>
-                                </svg>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
+
             </div>
 
             {# Credit #}
diff --git a/wagtailio/project_styleguide/templates/patterns/includes/header.html b/wagtailio/project_styleguide/templates/patterns/includes/header.html
index 34646fc87..0aaf5b35b 100644
--- a/wagtailio/project_styleguide/templates/patterns/includes/header.html
+++ b/wagtailio/project_styleguide/templates/patterns/includes/header.html
@@ -5,8 +5,11 @@
 
     <div class="header__identity">
         <a class="header__link" href="/" aria-label="Wagtail.org homepage">
-            <svg class="header__logo" aria-hidden="true">
-                <use xlink:href="#wagtail" />
+            <svg class="header__logo header__logo--dark" aria-hidden="true">
+                <use xlink:href="#wagtail-dark" />
+            </svg>
+            <svg class="header__logo header__logo--light" aria-hidden="true">
+                <use xlink:href="#wagtail-light" />
             </svg>
         </a>
     </div>
@@ -14,7 +17,7 @@
     <div class="header__actions">
 
         <div class="header__github">
-            <a class="github-button" href="https://github.com/wagtail/wagtail" data-show-count="true" aria-label="Visit Wagtail on GitHub to star the repo">Star</a>
+            <a class="github-button" href="https://github.com/wagtail/wagtail"  data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" size="large" data-show-count="true" aria-label="Visit Wagtail on GitHub to star the repo">Star</a>
         </div>
 
         <div class="header__nav header__nav--desktop" data-desktop-menu>
@@ -51,6 +54,11 @@
 
         <div class="header__nav header__nav--mobile" data-mobile-menu>
             {% main_navigation %}
+            {% if settings.navigation.NavigationSettings.get_started_menu %}
+                <a href="/get-started/" class="header__button header__button--get-started button">
+                    Get started
+                </a>
+            {% endif %}
         </div>
 
         {% if settings.navigation.NavigationSettings.get_started_menu %}
diff --git a/wagtailio/project_styleguide/templates/patterns/includes/svg_sprites.html b/wagtailio/project_styleguide/templates/patterns/includes/svg_sprites.html
index da5efca41..7cfca4367 100644
--- a/wagtailio/project_styleguide/templates/patterns/includes/svg_sprites.html
+++ b/wagtailio/project_styleguide/templates/patterns/includes/svg_sprites.html
@@ -79,6 +79,8 @@
 
     <symbol id="paper-plane" viewBox="0 0 766 527" fill="none"><path d="M760.911 20.328A20.37 20.37 0 00728.09 4.54L475.971 199.721a20.37 20.37 0 009.016 36.187l104.399 17.92a20.37 20.37 0 0021.803-11.257l40.364-83.909a20.368 20.368 0 0127.187-9.526 20.373 20.373 0 019.525 27.187l-40.364 83.908a20.365 20.365 0 004.813 24.061l79.17 70.364a20.362 20.362 0 0022.016 3.307 20.374 20.374 0 0011.893-18.821l-4.864-318.805-.018-.009z" fill="#B3E7E8"></path><path d="M765.252 70.988l-.042.306.013.009-34.974 251.113a15.72 15.72 0 01-11.291 12.948 15.72 15.72 0 01-16.398-5.122h0l-53.715-65.007a15.714 15.714 0 01-.829-18.915h0l41.981-61.099a16.721 16.721 0 00-4.311-23.246 16.718 16.718 0 00-23.245 4.312l-41.981 61.098-.001.001a15.718 15.718 0 01-17.954 6.009l-79.955-26.819a15.72 15.72 0 01-10.653-13.479 15.714 15.714 0 018.052-15.179h0L742.09 55.073h.001a15.717 15.717 0 0123.161 15.915zm-144.38 156.681l41.981-61.099a16.217 16.217 0 1126.732 18.368l-41.981 61.098-26.732-18.367z" stroke="#262626"></path><path d="M5.58 522.692c3.936-19.578 10.678-30.173 28.77-42.416 56.933-38.527 129.755-51.816 196.282-61.553 57.104-8.358 113.921-8.516 171.296-11.356 24.015-1.188 52.375-4.478 73.3-17.376 25.027-15.427 44.471-41.926 61.452-65.161 17.616-24.107 34.641-49.92 44.727-78.233 5.308-14.9 7.189-30.521 13.013-45.289" stroke="#B3E7E8" stroke-width="7" stroke-linecap="round"></path><path d="M1 514c4.508-19.455 11.556-29.847 30-41.556 58.037-36.842 131.217-47.993 198-55.777 57.324-6.682 114.122-5.176 171.556-6.334 24.039-.484 52.484-2.942 73.777-15.222 25.468-14.687 45.68-40.605 63.334-63.333 18.315-23.58 36.088-48.883 47-76.889 5.742-14.738 8.08-30.298 14.333-44.889" stroke="#000" stroke-linecap="round" stroke-dasharray="6 6"></path></symbol>
 
+    <symbol id="paper-plane-dark" viewBox="0 0 766 527" fill="none"><path d="M760.911 20.328A20.37 20.37 0 00728.09 4.54L475.971 199.721a20.37 20.37 0 009.016 36.187l104.399 17.92a20.37 20.37 0 0021.803-11.257l40.364-83.909a20.368 20.368 0 0127.187-9.526 20.373 20.373 0 019.525 27.187l-40.364 83.908a20.365 20.365 0 004.813 24.061l79.17 70.364a20.362 20.362 0 0022.016 3.307 20.374 20.374 0 0011.893-18.821l-4.864-318.805-.018-.009z" fill="#007d7e"></path><path d="M765.252 70.988l-.042.306.013.009-34.974 251.113a15.72 15.72 0 01-11.291 12.948 15.72 15.72 0 01-16.398-5.122h0l-53.715-65.007a15.714 15.714 0 01-.829-18.915h0l41.981-61.099a16.721 16.721 0 00-4.311-23.246 16.718 16.718 0 00-23.245 4.312l-41.981 61.098-.001.001a15.718 15.718 0 01-17.954 6.009l-79.955-26.819a15.72 15.72 0 01-10.653-13.479 15.714 15.714 0 018.052-15.179h0L742.09 55.073h.001a15.717 15.717 0 0123.161 15.915zm-144.38 156.681l41.981-61.099a16.217 16.217 0 1126.732 18.368l-41.981 61.098-26.732-18.367z" stroke="#262626"></path><path d="M5.58 522.692c3.936-19.578 10.678-30.173 28.77-42.416 56.933-38.527 129.755-51.816 196.282-61.553 57.104-8.358 113.921-8.516 171.296-11.356 24.015-1.188 52.375-4.478 73.3-17.376 25.027-15.427 44.471-41.926 61.452-65.161 17.616-24.107 34.641-49.92 44.727-78.233 5.308-14.9 7.189-30.521 13.013-45.289" stroke="#007d7e" stroke-width="7" stroke-linecap="round"></path><path d="M1 514c4.508-19.455 11.556-29.847 30-41.556 58.037-36.842 131.217-47.993 198-55.777 57.324-6.682 114.122-5.176 171.556-6.334 24.039-.484 52.484-2.942 73.777-15.222 25.468-14.687 45.68-40.605 63.334-63.333 18.315-23.58 36.088-48.883 47-76.889 5.742-14.738 8.08-30.298 14.333-44.889" stroke="#000" stroke-linecap="round" stroke-dasharray="6 6"></path></symbol>
+
     <symbol id="paper-stack" viewBox="0 0 256 256"><path d="M119.636 38.849a19.934 19.934 0 0 1 16.728 0l77.8 35.902c3.025 1.386 4.947 4.408 4.947 7.749 0 3.341-1.922 6.363-4.947 7.75l-77.8 35.902a19.94 19.94 0 0 1-16.728 0l-77.8-35.903c-3.025-1.422-4.947-4.443-4.947-7.749s1.922-6.363 4.947-7.75l77.8-35.901Zm75.594 72.657 18.934 8.745c3.025 1.386 4.947 4.408 4.947 7.749 0 3.341-1.922 6.363-4.947 7.749l-77.8 35.903a19.94 19.94 0 0 1-16.728 0l-77.8-35.903c-3.025-1.422-4.947-4.443-4.947-7.749s1.922-6.363 4.947-7.749l18.934-8.745 54.097 24.954a31.391 31.391 0 0 0 26.266 0l54.097-24.954Zm-54.097 70.454 54.097-24.954 18.934 8.745c3.025 1.386 4.947 4.408 4.947 7.749 0 3.341-1.922 6.363-4.947 7.749l-77.8 35.903a19.94 19.94 0 0 1-16.728 0l-77.8-35.903c-3.025-1.422-4.947-4.443-4.947-7.749s1.922-6.363 4.947-7.749l18.934-8.745 54.097 24.954a31.391 31.391 0 0 0 26.266 0Z"/></symbol>
 
     <symbol id="plus" viewBox="0 0 448 512"><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></symbol>
@@ -117,7 +119,25 @@
 
     <symbol id="twitter" viewBox="0 0 30 25"><path d="M26.895 6.656v.82c0 8.145-6.153 17.462-17.461 17.462-3.516 0-6.739-.997-9.434-2.754.469.058.938.117 1.465.117 2.87 0 5.508-.996 7.617-2.637-2.695-.059-4.98-1.816-5.742-4.277.41.058.762.117 1.172.117.527 0 1.113-.117 1.582-.234-2.813-.586-4.922-3.047-4.922-6.036v-.058c.82.469 1.816.703 2.812.761A6.053 6.053 0 011.23 4.84c0-1.172.293-2.227.82-3.106A17.85 17.85 0 0014.767 8.18a5.778 5.778 0 01-.176-1.407A6.152 6.152 0 0120.742.621c1.758 0 3.34.703 4.512 1.934A12.994 12.994 0 0029.12 1.03a6.011 6.011 0 01-2.695 3.399c1.23-.117 2.46-.47 3.515-.938-.82 1.23-1.875 2.285-3.046 3.164z"/></symbol>
 
-    <symbol id="wagtail" viewBox="0 0 153 65"><path fill="#fff" d="M36.862 10.04s-4.18-1.261-5.975 0c-2.643 1.858 1.168.815-1.681 4.409-2.072 2.604-2.044 5.324-.713 8.858 10.201-.858 12.278 4.848 12.278 4.848l-1.58-6.623 2.889-4.278c-.381-4.731-4.396-7.04-5.218-7.214Z"/><path d="m29.786 24.705.829-1.431c-1.502-1.166-2.538-2.969-2.538-5.09 0-3.498 2.745-6.307 6.163-6.307.88 0 1.657.159 2.382.477.363-.53.725-1.166 1.088-1.961-1.502-1.007-3.315-1.538-5.23-1.538-5.387 0-9.789 4.453-9.789 10.019 0 5.513 4.35 10.019 9.788 10.019 1.606 0 2.33-.425 2.538-1.114l-5.23-3.074ZM42.06 17.284l-2.434 3.71h6.577l-4.143-3.71ZM38.124 17.602c.687 0 1.243-.57 1.243-1.272 0-.703-.556-1.272-1.243-1.272-.686 0-1.243.57-1.243 1.272 0 .702.557 1.272 1.243 1.272Z"/><path fill="#fff" stroke="#000" d="M33.036 26.391c-1.043 1.896-3.176 5.806-3.362 6.28L14.951 46.889l15.883-2.607 6.956-13.389-4.754-4.502Z"/><path d="M41.697 30.642c0-5.407-4.298-9.86-9.632-9.86-2.02 0-3.936.636-5.49 1.75l-2.589-8.535L4.41 48.505l5.697-1.484L.112 64.78l8.441-2.862 3.211-11.026c3.263.159 26.05.689 29.675-18.235v-.053c.051-.371.155-.742.207-1.113h-.052c.052-.318.103-.583.103-.848Zm-21.75 13.464.414-.318C33.153 39.97 33.722 30.96 33.722 30.96l2.175-.742c-2.175 11.608-15.95 13.888-15.95 13.888ZM57.91 45.257h-3.875l-5.55-16.006h3.48l3.964 12.092 3.964-12.093h3.48l3.963 12.093L71.3 29.25h3.48l-5.418 16.007h-3.876l-3.788-10.95-3.787 10.95ZM90.106 45.256h-3.083v-2.154c-1.321 1.583-3.083 2.374-5.33 2.374-1.673 0-3.038-.484-4.14-1.407-1.1-.923-1.629-2.199-1.629-3.782 0-1.583.573-2.77 1.762-3.517 1.145-.792 2.73-1.188 4.712-1.188h4.36v-.615c0-2.111-1.188-3.21-3.567-3.21-1.497 0-3.039.527-4.624 1.627l-1.498-2.111c1.938-1.54 4.14-2.33 6.65-2.33 1.895 0 3.436.483 4.625 1.406 1.19.968 1.806 2.463 1.806 4.486v10.421h-.044Zm-3.391-5.98v-1.363h-3.788c-2.422 0-3.656.747-3.656 2.286 0 .792.309 1.364.925 1.803.617.396 1.454.616 2.51.616 1.058 0 2.027-.308 2.82-.924.792-.571 1.189-1.363 1.189-2.418ZM108.427 29.25v13.94c0 2.814-.748 4.968-2.29 6.376-1.541 1.407-3.523 2.11-5.902 2.11-2.422 0-4.58-.747-6.518-2.242l1.586-2.55c1.585 1.187 3.127 1.758 4.756 1.758 1.586 0 2.863-.396 3.788-1.231.925-.836 1.409-2.155 1.409-3.958v-2.066a5.564 5.564 0 0 1-2.158 2.242c-.925.572-1.982.836-3.127.836-2.114 0-3.876-.748-5.24-2.243-1.366-1.495-2.07-3.342-2.07-5.54 0-2.199.704-4.046 2.07-5.541 1.365-1.495 3.126-2.243 5.24-2.243 2.114 0 3.832.88 5.153 2.639v-2.375h3.303v.088Zm-12.508 7.388c0 1.319.397 2.462 1.234 3.386.792.967 1.893 1.407 3.303 1.407 1.365 0 2.51-.44 3.347-1.363.837-.924 1.277-2.067 1.277-3.43s-.44-2.55-1.277-3.474c-.881-.968-1.982-1.407-3.347-1.407-1.366 0-2.467.483-3.26 1.495-.88.923-1.277 2.066-1.277 3.386ZM116.883 31.933v8.135c0 .747.221 1.363.617 1.802.396.44.969.66 1.674.66.704 0 1.409-.352 2.07-1.055l1.365 2.374c-1.189 1.056-2.51 1.583-3.92 1.583-1.453 0-2.642-.483-3.655-1.495-1.013-1.011-1.542-2.33-1.542-4.001v-8.003h-2.026v-2.727h2.026v-4.969h3.391v5.013h4.229v2.727h-4.229v-.044ZM138.288 45.256h-3.083v-2.154c-1.321 1.583-3.083 2.374-5.329 2.374-1.674 0-3.039-.484-4.14-1.407-1.101-.923-1.63-2.199-1.63-3.782 0-1.583.573-2.77 1.762-3.517 1.145-.792 2.731-1.188 4.713-1.188h4.36v-.615c0-2.111-1.189-3.21-3.568-3.21-1.497 0-3.038.527-4.624 1.627l-1.497-2.111c1.937-1.54 4.14-2.33 6.65-2.33 1.894 0 3.435.483 4.624 1.406 1.19.968 1.806 2.463 1.806 4.486v10.421h-.044Zm-3.391-5.98v-1.363h-3.788c-2.422 0-3.655.747-3.655 2.286 0 .792.308 1.364.925 1.803.616.396 1.453.616 2.51.616 1.057 0 2.026-.308 2.819-.924.792-.571 1.189-1.363 1.189-2.418ZM142.604 26.04a1.992 1.992 0 0 1-.616-1.495c0-.571.22-1.1.616-1.495.441-.44.925-.615 1.498-.615.572 0 1.101.22 1.497.615.441.44.617.924.617 1.495 0 .572-.22 1.1-.617 1.495a2.098 2.098 0 0 1-1.497.616c-.573.044-1.057-.176-1.498-.616Zm3.171 19.216h-3.391V29.25h3.391v16.006ZM152.822 45.257h-3.391V22.919h3.391v22.338Z"/></symbol>
+    <symbol id="wagtail-dark" viewBox="0 0 150 64">
+        <ellipse class="wagtail-logo__light" cx="31.46" cy="21.49" fill="#fff" opacity=".1" rx="20.99" ry="20.88"/>
+        <path class="wagtail-logo__light" fill="#fff" d="M39.23 24.51a9.37 9.37 0 0 0-10.9-3.7 6.06 6.06 0 0 1-.81-3.05 6.06 6.06 0 0 1 8.35-5.66c.36-.51.7-1.12 1.06-1.89a8.6 8.6 0 0 1 4.28 6.65L38.4 21l.84 3.5Z"/>
+        <path class="wagtail-logo__dark" fill="#000" d="m9.9 45.78 1.75 3.66-.35-6.1-1.4 2.44Z"/>
+        <path class="wagtail-logo__dark "fill="#000" d="m4.37 47.2 18.7-32.73a9.57 9.57 0 0 1 8.75-5.77c1.88 0 3.65.52 5.12 1.5-.36.77-.71 1.38-1.07 1.9a6.06 6.06 0 0 0-8.36 5.66c0 1.12.3 2.15.82 3.04a9.36 9.36 0 0 1 3.09-.52 9.51 9.51 0 0 1 9.42 9.57c0 .22-.04.44-.08.7l-.02.13h.05l-.1.54c-.04.18-.08.36-.1.54v.05c-3.53 18.26-25.55 17.87-28.96 17.7l.02-.07-.35-6.1-1.38 2.43-5.55 1.43Z"/>
+        <path class="wagtail-logo__light" fill="#fff" d="m19.97 42.62-.4.3s13.47-2.2 15.6-13.48l-2.13.72s-.56 8.75-13.07 12.46Z"/>
+        <path class="wagtail-logo__dark" fill="#000" d="M37.34 17.2c.67 0 1.22-.56 1.22-1.24 0-.68-.55-1.24-1.22-1.24-.67 0-1.21.56-1.21 1.24 0 .68.54 1.23 1.21 1.23ZM41.2 16.88l-2.39 3.6h6.43l-4.05-3.6ZM11.3 43.34.06 63.04l8.43-2.79 3.16-10.8-.35-6.11Z"/>
+        <path class="wagtail-logo__light" fill="#fff" d="M56.57 43.86h-3.78l-5.4-15.5h3.39l3.86 11.71 3.86-11.72h3.39l3.86 11.72 3.86-11.72H73l-5.28 15.51h-3.77l-3.7-10.6-3.68 10.6ZM87.92 43.86h-3v-2.08a6.4 6.4 0 0 1-5.2 2.3 6.06 6.06 0 0 1-4.02-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.16-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.16.93 1.76 2.38 1.76 4.34v10.1h-.04Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.02 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM105.76 28.35v13.51c0 2.73-.73 4.82-2.23 6.18a8.24 8.24 0 0 1-5.74 2.05c-2.36 0-4.46-.73-6.35-2.18l1.54-2.47a7.6 7.6 0 0 0 4.63 1.7c1.55 0 2.8-.38 3.7-1.19.9-.8 1.37-2.09 1.37-3.83v-2a5.71 5.71 0 0 1-5.15 2.98 6.64 6.64 0 0 1-5.1-2.18 7.66 7.66 0 0 1-2.02-5.37c0-2.13.69-3.92 2.01-5.37a6.64 6.64 0 0 1 5.1-2.17 6 6 0 0 1 5.03 2.56v-2.3h3.21v.08Zm-12.18 7.16a4.7 4.7 0 0 0 1.2 3.28c.78.94 1.85 1.37 3.22 1.37 1.33 0 2.44-.43 3.26-1.33.81-.9 1.24-2 1.24-3.32 0-1.32-.42-2.47-1.24-3.37A4.17 4.17 0 0 0 98 30.78c-1.33 0-2.4.47-3.17 1.45-.86.9-1.25 2-1.25 3.28ZM114 30.95v7.88c0 .73.21 1.33.6 1.75.39.43.94.64 1.63.64s1.37-.34 2.02-1.02l1.33 2.3a5.67 5.67 0 0 1-3.82 1.53 4.8 4.8 0 0 1-3.56-1.45 5.22 5.22 0 0 1-1.5-3.87v-7.76h-1.98v-2.64h1.98v-4.82h3.3v4.86h4.12v2.64H114v-.04ZM134.84 43.86h-3v-2.08a6.4 6.4 0 0 1-5.19 2.3 6.06 6.06 0 0 1-4.03-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.15-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.17.93 1.77 2.38 1.77 4.34v10.1h-.05Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.03 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM139.05 25.24c-.43-.43-.6-.9-.6-1.45 0-.55.21-1.07.6-1.45.43-.43.9-.6 1.46-.6a2.05 2.05 0 1 1 0 4.1 1.8 1.8 0 0 1-1.46-.6Zm3.08 18.62h-3.3V28.35h3.3v15.51ZM149 43.86h-3.3V22.21h3.3v21.65Z"/>
+    </symbol>
+
+    <symbol id="wagtail-light" class="wagtail-logo" viewBox="0 0 150 64">
+        <ellipse class="wagtail-logo__light" cx="31.46" cy="21.49" fill="#fff" opacity=".1" rx="20.99" ry="20.88"/>
+        <path class="wagtail-logo__light" fill="#fff" d="M39.23 24.51a9.37 9.37 0 0 0-10.9-3.7 6.06 6.06 0 0 1-.81-3.05 6.06 6.06 0 0 1 8.35-5.66c.36-.51.7-1.12 1.06-1.89a8.6 8.6 0 0 1 4.28 6.65L38.4 21l.84 3.5Z"/>
+        <path class="wagtail-logo__dark" fill="#000" d="m9.9 45.78 1.75 3.66-.35-6.1-1.4 2.44Z"/>
+        <path class="wagtail-logo__dark "fill="#000" d="m4.37 47.2 18.7-32.73a9.57 9.57 0 0 1 8.75-5.77c1.88 0 3.65.52 5.12 1.5-.36.77-.71 1.38-1.07 1.9a6.06 6.06 0 0 0-8.36 5.66c0 1.12.3 2.15.82 3.04a9.36 9.36 0 0 1 3.09-.52 9.51 9.51 0 0 1 9.42 9.57c0 .22-.04.44-.08.7l-.02.13h.05l-.1.54c-.04.18-.08.36-.1.54v.05c-3.53 18.26-25.55 17.87-28.96 17.7l.02-.07-.35-6.1-1.38 2.43-5.55 1.43Z"/>
+        <path class="wagtail-logo__light" fill="#fff" d="m19.97 42.62-.4.3s13.47-2.2 15.6-13.48l-2.13.72s-.56 8.75-13.07 12.46Z"/>
+        <path class="wagtail-logo__dark" fill="#000" d="M37.34 17.2c.67 0 1.22-.56 1.22-1.24 0-.68-.55-1.24-1.22-1.24-.67 0-1.21.56-1.21 1.24 0 .68.54 1.23 1.21 1.23ZM41.2 16.88l-2.39 3.6h6.43l-4.05-3.6ZM11.3 43.34.06 63.04l8.43-2.79 3.16-10.8-.35-6.11Z"/>
+        <path class="wagtail-logo__dark" fill="#fff" d="M56.57 43.86h-3.78l-5.4-15.5h3.39l3.86 11.71 3.86-11.72h3.39l3.86 11.72 3.86-11.72H73l-5.28 15.51h-3.77l-3.7-10.6-3.68 10.6ZM87.92 43.86h-3v-2.08a6.4 6.4 0 0 1-5.2 2.3 6.06 6.06 0 0 1-4.02-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.16-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.16.93 1.76 2.38 1.76 4.34v10.1h-.04Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.02 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM105.76 28.35v13.51c0 2.73-.73 4.82-2.23 6.18a8.24 8.24 0 0 1-5.74 2.05c-2.36 0-4.46-.73-6.35-2.18l1.54-2.47a7.6 7.6 0 0 0 4.63 1.7c1.55 0 2.8-.38 3.7-1.19.9-.8 1.37-2.09 1.37-3.83v-2a5.71 5.71 0 0 1-5.15 2.98 6.64 6.64 0 0 1-5.1-2.18 7.66 7.66 0 0 1-2.02-5.37c0-2.13.69-3.92 2.01-5.37a6.64 6.64 0 0 1 5.1-2.17 6 6 0 0 1 5.03 2.56v-2.3h3.21v.08Zm-12.18 7.16a4.7 4.7 0 0 0 1.2 3.28c.78.94 1.85 1.37 3.22 1.37 1.33 0 2.44-.43 3.26-1.33.81-.9 1.24-2 1.24-3.32 0-1.32-.42-2.47-1.24-3.37A4.17 4.17 0 0 0 98 30.78c-1.33 0-2.4.47-3.17 1.45-.86.9-1.25 2-1.25 3.28ZM114 30.95v7.88c0 .73.21 1.33.6 1.75.39.43.94.64 1.63.64s1.37-.34 2.02-1.02l1.33 2.3a5.67 5.67 0 0 1-3.82 1.53 4.8 4.8 0 0 1-3.56-1.45 5.22 5.22 0 0 1-1.5-3.87v-7.76h-1.98v-2.64h1.98v-4.82h3.3v4.86h4.12v2.64H114v-.04ZM134.84 43.86h-3v-2.08a6.4 6.4 0 0 1-5.19 2.3 6.06 6.06 0 0 1-4.03-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.15-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.17.93 1.77 2.38 1.77 4.34v10.1h-.05Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.03 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM139.05 25.24c-.43-.43-.6-.9-.6-1.45 0-.55.21-1.07.6-1.45.43-.43.9-.6 1.46-.6a2.05 2.05 0 1 1 0 4.1 1.8 1.8 0 0 1-1.46-.6Zm3.08 18.62h-3.3V28.35h3.3v15.51ZM149 43.86h-3.3V22.21h3.3v21.65Z"/>
+    </symbol>
 
     <symbol id="wagtail-bird" viewBox="0 0 47 57" ><path d="M37.034 2.04s-4.18-1.262-5.975 0c-2.643 1.858 1.168.815-1.681 4.408-2.073 2.605-2.044 5.325-.713 8.858 10.201-.858 12.278 4.85 12.278 4.85l-1.58-6.624 2.889-4.278c-.381-4.732-4.396-7.04-5.218-7.214z" fill="#fff"/><path d="M29.958 16.705l.829-1.431c-1.502-1.167-2.538-2.969-2.538-5.09 0-3.498 2.745-6.307 6.163-6.307.88 0 1.657.159 2.382.477.363-.53.725-1.166 1.088-1.961C36.38 1.385 34.567.855 32.652.855c-5.387 0-9.789 4.453-9.789 10.019 0 5.513 4.35 10.018 9.788 10.018 1.606 0 2.33-.424 2.538-1.113l-5.23-3.074zM42.23 9.284l-2.433 3.71h6.577l-4.143-3.71zM38.296 9.602c.686 0 1.243-.57 1.243-1.273 0-.702-.557-1.272-1.243-1.272-.687 0-1.243.57-1.243 1.272 0 .703.556 1.273 1.243 1.273z"/><path d="M33.208 18.39c-1.043 1.896-3.176 5.806-3.362 6.28L15.123 38.888l15.883-2.606 6.956-13.389-4.754-4.502z" fill="#fff" stroke="#000"/><path d="M41.869 22.642c0-5.407-4.298-9.86-9.633-9.86-2.02 0-3.935.636-5.49 1.75l-2.589-8.535L4.582 40.505l5.696-1.484L.283 56.78l8.442-2.862 3.21-11.026c3.263.159 26.05.689 29.675-18.235v-.053c.052-.371.155-.742.207-1.113h-.052c.052-.318.104-.583.104-.848zM20.118 36.106l.414-.318C33.324 31.97 33.894 22.96 33.894 22.96l2.175-.742c-2.175 11.609-15.951 13.888-15.951 13.888z"/></symbol>
 
diff --git a/wagtailio/project_styleguide/templates/patterns/pages/blog/includes/blog_post.html b/wagtailio/project_styleguide/templates/patterns/pages/blog/includes/blog_post.html
index 87c32eb59..44faefa6d 100644
--- a/wagtailio/project_styleguide/templates/patterns/pages/blog/includes/blog_post.html
+++ b/wagtailio/project_styleguide/templates/patterns/pages/blog/includes/blog_post.html
@@ -23,7 +23,7 @@
             <span>{{ post.date|date }}</span>
         </div>
 
-        <h3 class="blog-post__title {% if featured %}heading-two{% endif %}">{{ post.title }}</h3>
+        <h2 class="blog-post__title {% if featured %}heading-two{% endif %}">{{ post.title }}</h2>
         <p class="blog-post__listing-text">{% firstof post.listing_text post.introduction %}</p>
 
         {% if post.author %}
diff --git a/wagtailio/settings/production.py b/wagtailio/settings/production.py
index d302b3cb6..65e394578 100644
--- a/wagtailio/settings/production.py
+++ b/wagtailio/settings/production.py
@@ -1,10 +1,11 @@
 from .base import *  # noqa
 from .base import env
 
-COMPUTER_VISION_API_KEY = env.get("COMPUTER_VISION_API_KEY")
-COMPUTER_VISION_REGION = env.get("COMPUTER_VISION_REGION")
-ALT_GENERATOR_MAX_TAGS = env.get("ALT_GENERATOR_MAX_TAGS", 5)
-ALT_GENERATOR_MIN_CONFIDENCE = env.get("ALT_GENERATOR_MIN_CONFIDENCE", 40)
+if "COMPUTER_VISION_API_KEY" in env and "COMPUTER_VISION_REGION" in env:
+    COMPUTER_VISION_API_KEY = env.get("COMPUTER_VISION_API_KEY")
+    COMPUTER_VISION_REGION = env.get("COMPUTER_VISION_REGION")
+    ALT_GENERATOR_MAX_TAGS = env.get("ALT_GENERATOR_MAX_TAGS", 5)
+    ALT_GENERATOR_MIN_CONFIDENCE = env.get("ALT_GENERATOR_MIN_CONFIDENCE", 40)
 
 VERCEL_DEPLOY_HOOK_URL = env.get("VERCEL_DEPLOY_HOOK_URL", None)
 try:
diff --git a/wagtailio/static/img/favicons/android-chrome-144x144.png b/wagtailio/static/img/favicons/android-chrome-144x144.png
deleted file mode 100644
index 9cf597de3..000000000
Binary files a/wagtailio/static/img/favicons/android-chrome-144x144.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/android-chrome-192x192.png b/wagtailio/static/img/favicons/android-chrome-192x192.png
deleted file mode 100644
index d3298430b..000000000
Binary files a/wagtailio/static/img/favicons/android-chrome-192x192.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/android-chrome-36x36.png b/wagtailio/static/img/favicons/android-chrome-36x36.png
deleted file mode 100644
index 024716d03..000000000
Binary files a/wagtailio/static/img/favicons/android-chrome-36x36.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/android-chrome-48x48.png b/wagtailio/static/img/favicons/android-chrome-48x48.png
deleted file mode 100644
index 031c0401f..000000000
Binary files a/wagtailio/static/img/favicons/android-chrome-48x48.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/android-chrome-72x72.png b/wagtailio/static/img/favicons/android-chrome-72x72.png
deleted file mode 100644
index cef7272bb..000000000
Binary files a/wagtailio/static/img/favicons/android-chrome-72x72.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/android-chrome-96x96.png b/wagtailio/static/img/favicons/android-chrome-96x96.png
deleted file mode 100644
index ff9bc73da..000000000
Binary files a/wagtailio/static/img/favicons/android-chrome-96x96.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/android-icon-192x192.png b/wagtailio/static/img/favicons/android-icon-192x192.png
new file mode 100644
index 000000000..fc6ab8762
Binary files /dev/null and b/wagtailio/static/img/favicons/android-icon-192x192.png differ
diff --git a/wagtailio/static/img/favicons/android-icon-512x512.png b/wagtailio/static/img/favicons/android-icon-512x512.png
new file mode 100644
index 000000000..bd0512307
Binary files /dev/null and b/wagtailio/static/img/favicons/android-icon-512x512.png differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-114x114.png b/wagtailio/static/img/favicons/apple-touch-icon-114x114.png
deleted file mode 100644
index 2dfe4639f..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-114x114.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-120x120.png b/wagtailio/static/img/favicons/apple-touch-icon-120x120.png
deleted file mode 100644
index 8c1bcdc60..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-120x120.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-144x144.png b/wagtailio/static/img/favicons/apple-touch-icon-144x144.png
deleted file mode 100644
index 9cf597de3..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-144x144.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-152x152.png b/wagtailio/static/img/favicons/apple-touch-icon-152x152.png
deleted file mode 100644
index 798e7deb0..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-152x152.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-180x180.png b/wagtailio/static/img/favicons/apple-touch-icon-180x180.png
deleted file mode 100644
index 9d90fe638..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-180x180.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-57x57.png b/wagtailio/static/img/favicons/apple-touch-icon-57x57.png
deleted file mode 100644
index 1ace76fce..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-57x57.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-60x60.png b/wagtailio/static/img/favicons/apple-touch-icon-60x60.png
deleted file mode 100644
index e0cc7e849..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-60x60.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-72x72.png b/wagtailio/static/img/favicons/apple-touch-icon-72x72.png
deleted file mode 100644
index cef7272bb..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-72x72.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-76x76.png b/wagtailio/static/img/favicons/apple-touch-icon-76x76.png
deleted file mode 100644
index dbe9a2146..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-76x76.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon-precomposed.png b/wagtailio/static/img/favicons/apple-touch-icon-precomposed.png
deleted file mode 100644
index 87bbd32f0..000000000
Binary files a/wagtailio/static/img/favicons/apple-touch-icon-precomposed.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/apple-touch-icon.png b/wagtailio/static/img/favicons/apple-touch-icon.png
index 9d90fe638..bd0512307 100644
Binary files a/wagtailio/static/img/favicons/apple-touch-icon.png and b/wagtailio/static/img/favicons/apple-touch-icon.png differ
diff --git a/wagtailio/static/img/favicons/browserconfig.xml b/wagtailio/static/img/favicons/browserconfig.xml
deleted file mode 100644
index fe54f1871..000000000
--- a/wagtailio/static/img/favicons/browserconfig.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
-      <square150x150logo src="/img/favicons/mstile-150x150.png"/>
-      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
-      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
-      <TileColor>#43b1b0</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>
diff --git a/wagtailio/static/img/favicons/favicon-16x16.png b/wagtailio/static/img/favicons/favicon-16x16.png
deleted file mode 100644
index b4071b4ae..000000000
Binary files a/wagtailio/static/img/favicons/favicon-16x16.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/favicon-32x32.png b/wagtailio/static/img/favicons/favicon-32x32.png
deleted file mode 100644
index 64f107c38..000000000
Binary files a/wagtailio/static/img/favicons/favicon-32x32.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/favicon-96x96.png b/wagtailio/static/img/favicons/favicon-96x96.png
deleted file mode 100644
index ff9bc73da..000000000
Binary files a/wagtailio/static/img/favicons/favicon-96x96.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/favicon.ico b/wagtailio/static/img/favicons/favicon.ico
index c622868a7..00420b313 100644
Binary files a/wagtailio/static/img/favicons/favicon.ico and b/wagtailio/static/img/favicons/favicon.ico differ
diff --git a/wagtailio/static/img/favicons/favicon.svg b/wagtailio/static/img/favicons/favicon.svg
new file mode 100644
index 000000000..365be79bd
--- /dev/null
+++ b/wagtailio/static/img/favicons/favicon.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512">
+    <style>
+    @media (prefers-color-scheme: dark) {
+    .bg {
+        fill: #262626 }
+    }
+    </style>
+    <path class="bg" fill="#2E1F5E" d="M0 0h512v512H0z"/>
+    <path fill="#fff" d="M353.4 344.27c-30.83-46.4-83.04-77.13-142.46-77.13-19.55 0-38.56 3.31-56.29 9.5a110.4 110.4 0 0 1-14.84-55.48c0-61.94 48.96-111.67 109.93-111.67 15.7 0 29.56 2.81 42.49 8.44 6.41-9.3 12.82-20.45 19.23-34.36 26.12 14.85 72.7 54.36 78.12 121.1l-51.53 75.73 15.35 63.87Z"/>
+    <path fill="#000" d="m-282.33 757.91 341.1-596.77C86.02 98.98 147.39 56 218.33 56c34.18 0 66.5 9.38 93.3 27.21-6.47 14.08-12.94 25.34-19.4 34.72-12.93-5.63-26.79-8.44-42.5-8.44-60.96 0-109.92 49.73-109.92 111.67 0 20.47 5.5 39.27 14.84 55.48a170.82 170.82 0 0 1 56.29-9.5c95.14 0 171.81 78.82 171.81 174.54 0 4-.67 8.01-1.44 12.6l-.4 2.41h.92c-.46 3.29-1.15 6.57-1.85 9.86-.69 3.28-1.38 6.56-1.85 9.85v.94C313.9 810.2-87.79 803.06-150 800.2l.4-1.4-6.4-111.26-25.25 44.24-101.08 26.13Z"/>
+    <path fill="#fff" d="m2.18 674.4-7.4 5.63S240.5 639.68 279.3 434.17l-38.8 13.14S230.34 606.83 2.18 674.4Z"/>
+    <path fill="#000" d="M319.02 210.83c12.24 0 22.17-10.08 22.17-22.52s-9.93-22.52-22.17-22.52c-12.25 0-22.17 10.08-22.17 22.52s9.92 22.52 22.17 22.52ZM389.22 205.2l-43.41 65.7h117.31l-73.9-65.7Z"/>
+</svg>
diff --git a/wagtailio/static/img/favicons/favicon.webmanifest b/wagtailio/static/img/favicons/favicon.webmanifest
new file mode 100644
index 000000000..615d9a22d
--- /dev/null
+++ b/wagtailio/static/img/favicons/favicon.webmanifest
@@ -0,0 +1,6 @@
+{
+  "icons": [
+    { "src": "/static/img/favicons/android-icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/static/img/favicons/android-icon-512.png", "type": "image/png", "sizes": "512x512" }
+  ]
+}
diff --git a/wagtailio/static/img/favicons/manifest.json b/wagtailio/static/img/favicons/manifest.json
deleted file mode 100644
index 440b5e00b..000000000
--- a/wagtailio/static/img/favicons/manifest.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-	"name": "My app",
-	"icons": [
-		{
-			"src": "\/img\/favicons\/android-chrome-36x36.png",
-			"sizes": "36x36",
-			"type": "image\/png",
-			"density": "0.75"
-		},
-		{
-			"src": "\/img\/favicons\/android-chrome-48x48.png",
-			"sizes": "48x48",
-			"type": "image\/png",
-			"density": "1.0"
-		},
-		{
-			"src": "\/img\/favicons\/android-chrome-72x72.png",
-			"sizes": "72x72",
-			"type": "image\/png",
-			"density": "1.5"
-		},
-		{
-			"src": "\/img\/favicons\/android-chrome-96x96.png",
-			"sizes": "96x96",
-			"type": "image\/png",
-			"density": "2.0"
-		},
-		{
-			"src": "\/img\/favicons\/android-chrome-144x144.png",
-			"sizes": "144x144",
-			"type": "image\/png",
-			"density": "3.0"
-		},
-		{
-			"src": "\/img\/favicons\/android-chrome-192x192.png",
-			"sizes": "192x192",
-			"type": "image\/png",
-			"density": "4.0"
-		}
-	]
-}
diff --git a/wagtailio/static/img/favicons/mstile-144x144.png b/wagtailio/static/img/favicons/mstile-144x144.png
deleted file mode 100644
index 9cf597de3..000000000
Binary files a/wagtailio/static/img/favicons/mstile-144x144.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/mstile-150x150.png b/wagtailio/static/img/favicons/mstile-150x150.png
deleted file mode 100644
index 3a41404ea..000000000
Binary files a/wagtailio/static/img/favicons/mstile-150x150.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/mstile-310x150.png b/wagtailio/static/img/favicons/mstile-310x150.png
deleted file mode 100644
index 0a99f0653..000000000
Binary files a/wagtailio/static/img/favicons/mstile-310x150.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/mstile-310x310.png b/wagtailio/static/img/favicons/mstile-310x310.png
deleted file mode 100644
index 8fcc4f138..000000000
Binary files a/wagtailio/static/img/favicons/mstile-310x310.png and /dev/null differ
diff --git a/wagtailio/static/img/favicons/mstile-70x70.png b/wagtailio/static/img/favicons/mstile-70x70.png
deleted file mode 100644
index 2b749237a..000000000
Binary files a/wagtailio/static/img/favicons/mstile-70x70.png and /dev/null differ
diff --git a/wagtailio/static/js/blocking.js b/wagtailio/static/js/blocking.js
new file mode 100644
index 000000000..adb331561
--- /dev/null
+++ b/wagtailio/static/js/blocking.js
@@ -0,0 +1,78 @@
+/**
+ * IMPORTANT: This script will block the DOM from loading, only add critical path JS here.
+ */
+
+/**
+ * Set and store dark/light (theme) mode.
+ *
+ * Mode will be set to be one of "light" or "dark", by default the resolved
+ * theme mode will be flipped (e.g. light to dark).
+ *
+ * @param {Event} event - is for usage with event listeners, and indicates the user has manually clicked a button
+ * @param {object?} options - additional options param when called explicitly
+ * @param {boolean?} options.isInitial - if true the current value will be resolved & set NOT toggled
+ */
+function updateThemeMode(event, { isInitial = false } = {}) {
+    const DARK = 'dark';
+    const LIGHT = 'light';
+    const STORAGE_KEY = 'wagtail-theme';
+
+    let currentMode;
+    let applyMode;
+    let savedThemeMode;
+
+    // safely request local storage - if cookies/storage is disabled it should not error
+    try {
+        savedThemeMode = localStorage.getItem(STORAGE_KEY);
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Unable to read theme from localStorage', error);
+    }
+
+    // find the current mode from existing storage or browser preference
+    if (savedThemeMode) {
+        // note - do not assume correct format of local storage
+        currentMode = savedThemeMode === LIGHT ? LIGHT : DARK;
+    } else {
+        // fall back on browser media for first toggle
+        const prefersDarkMode = window.matchMedia(
+            '(prefers-color-scheme:dark)',
+        ).matches;
+
+        currentMode = prefersDarkMode ? DARK : LIGHT;
+    }
+
+    // if running initially - do not 'flip' - instead apply current mode
+    if (isInitial) {
+        applyMode = currentMode === DARK ? DARK : LIGHT;
+    } else {
+        applyMode = currentMode === DARK ? LIGHT : DARK;
+    }
+
+    // set applied mode to the DOM
+    document.body.classList.toggle('theme-dark', applyMode === DARK);
+
+    // only store value if already stored OR was triggered by an actual click
+    if (savedThemeMode || event) {
+        try {
+            localStorage.setItem(STORAGE_KEY, applyMode);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.warn('Unable to store theme in localStorage', error);
+        }
+    }
+}
+
+/**
+ * Apply user's saved light/dark preference, or fall back to browser setting.
+ * Load light/dark preference before DOMContentLoaded so the user does not see a
+ * flash during theme initialisation.
+ */
+updateThemeMode(null, { isInitial: true });
+
+/**
+ * Set up event listener for other manual toggling.
+ */
+document.addEventListener('theme:toggle-theme-mode', updateThemeMode, {
+    passive: true,
+});
diff --git a/wagtailio/static/js/components/mobile-sub-menu.js b/wagtailio/static/js/components/mobile-sub-menu.js
index d2a91b05b..e9b12173e 100644
--- a/wagtailio/static/js/components/mobile-sub-menu.js
+++ b/wagtailio/static/js/components/mobile-sub-menu.js
@@ -1,4 +1,4 @@
-import { createFocusTrap } from 'focus-trap';
+
 
 class MobileSubMenu {
     static selector() {
@@ -9,7 +9,6 @@ class MobileSubMenu {
         this.node = node;
         this.subnav = this.node.nextElementSibling;
         this.backLink = this.subnav.querySelector('[data-subnav-back]');
-        this.focusTrap = createFocusTrap(this.subnav);
         this.bindEventListeners();
     }
 
diff --git a/wagtailio/static/js/components/site-wide-alert.js b/wagtailio/static/js/components/site-wide-alert.js
index 4119fd0bb..b08f5da54 100644
--- a/wagtailio/static/js/components/site-wide-alert.js
+++ b/wagtailio/static/js/components/site-wide-alert.js
@@ -25,9 +25,15 @@ class SiteWideAlert {
     populateAlert(data) {
         if (data.text) {
             const aside = document.createElement("aside");
-            aside.classList.add("sitewide-alert")
+            aside.classList.add("sitewide-alert");
+            document.querySelector('body').classList.add('banner-active');
             aside.innerHTML = data.text;
             this.node.append(aside);
+            // get height to prevent whole page restructuring without animation
+            document.documentElement.style.setProperty(
+                '--banner-height',
+                `${this.node.clientHeight}px`,
+            );
 
             if (data.bg_colour) {
                 aside.style.backgroundColor = '#' + data.bg_colour;
diff --git a/wagtailio/static/js/components/theme-detect.js b/wagtailio/static/js/components/theme-detect.js
new file mode 100644
index 000000000..cded1d2cf
--- /dev/null
+++ b/wagtailio/static/js/components/theme-detect.js
@@ -0,0 +1,11 @@
+// Wire up light/dark mode button.
+document.getElementById('wagtail-theme').addEventListener('click', (event) => {
+    document.dispatchEvent(new CustomEvent('theme:toggle-theme-mode', event));
+    const theme = localStorage.getItem('wagtail-theme');
+
+    if (theme === 'light') {
+        event.target.setAttribute('aria-label', 'Change to Dark Theme');
+    } else {
+        event.target.setAttribute('aria-label', 'Change to Light Theme');
+    }
+});
diff --git a/wagtailio/static/js/main.js b/wagtailio/static/js/main.js
index 9593be671..e8970af08 100644
--- a/wagtailio/static/js/main.js
+++ b/wagtailio/static/js/main.js
@@ -1,5 +1,6 @@
 import '../sass/main.scss';
 
+import './components/theme-detect';
 import GetStartedMenu from './components/get-started-menu';
 import SiteSearchDesktop from './components/site-search-desktop';
 import SiteSearchMobile from './components/site-search-mobile';
@@ -14,7 +15,6 @@ import CookieMessage from "./components/cookie-message";
 import SiteWideAlert from "./components/site-wide-alert";
 import LoopingVideo from './components/looping-video';
 
-
 function initComponent(ComponentClass) {
     const items = document.querySelectorAll(ComponentClass.selector());
     items.forEach((item) => new ComponentClass(item));
diff --git a/wagtailio/static/sass/abstracts/_mixins.scss b/wagtailio/static/sass/abstracts/_mixins.scss
index d0917791c..476064b9b 100644
--- a/wagtailio/static/sass/abstracts/_mixins.scss
+++ b/wagtailio/static/sass/abstracts/_mixins.scss
@@ -40,7 +40,7 @@
 
     &::after {
         content: '';
-        background-color: $color--eggshell;
+        background-color: var(--color--enhancers);
         opacity: 0;
         border-radius: 15px;
         position: absolute;
@@ -50,7 +50,7 @@
         right: 0;
         transform: rotate(-3deg);
         z-index: -1;
-        transition: opacity 0.3s;
+        transition: opacity 0.3s, transform 0.3s;
 
         @include media-query(medium) {
             top: 10px;
@@ -77,7 +77,7 @@
         content: '';
         width: 80%;
         height: 85%;
-        background-color: $color--eggshell;
+        background-color: var(--color--enhancers);
         opacity: 0;
         position: absolute;
         z-index: -1;
diff --git a/wagtailio/static/sass/abstracts/_variables.scss b/wagtailio/static/sass/abstracts/_variables.scss
index ff0a66b4d..2679dddd3 100644
--- a/wagtailio/static/sass/abstracts/_variables.scss
+++ b/wagtailio/static/sass/abstracts/_variables.scss
@@ -1,24 +1,68 @@
 // Colors
-$color--black: #000;
+$color--black: #111;
 $color--off-black: #262626;
-$color--indigo: #2E1F5E;
-$color--teal: #007D7E;
+$color--indigo: #2e1f5e;
+$color--teal: #007d7e;
+$color--teal-dark: #065354;
 $color--light-teal: #effeff;
-$color--teal-100: #80D7D8;
-$color--teal-200: #00B0B1;
+$color--teal-100: #80d7d8;
+$color--teal-200: #00b0b1;
 $color--teal-300: #d9f3f3;
-$color--eggshell: #B3E7E8;
-$color--grey: #5C5C5C;
-$color--light-grey: #EDEAF3;
+$color--eggshell: #b3e7e8;
+$color--grey: #5c5c5c;
+$color--light-grey: #edeaf3;
 $color--cool-grey: #c8c8c8;
 $color--light-grey-100: #f3f5f8;
-$color--white:#FFF;
-$color--pink: #F9CBCE;
+$color--white:#fff;
+$color--pink: #f9cbce;
 $color--off-black-30: #2626264d;
 
 // Mapping colours
+:root {
+    --color--background: #{$color--white};
+    --color--highlight: #{$color--indigo};
+    --color--active: #{$color--indigo};
+    --color--text: #{$color--off-black};
+    --color--link: #{$color--teal};
+    --color--heading: #{$color--black};
+    --color--dark-light: #{$color--black};
+    --color--light-dark: #{$color--white};
+    --color--meta: #{$color--grey};
+    --color--interaction: #{$color--indigo};
+    --color--card: #{$color--light-grey-100};
+    --color--large-icon: #{$color--teal-100};
+    --color--large-icon-border: #{$color--black};
+    --color--enhancers: #{$color--eggshell};
+    --color--footer-bg: #{$color--teal-300};
+    --color--border: #{$color--light-grey};
+    --color--tag: #{$color--light-teal};
+    --color--code-bg: #f5f5f5;
+}
+
+.theme-dark {
+    --color--background: #{$color--off-black};
+    --color--highlight: #{$color--black};
+    --color--active: #{$color--teal};
+    --color--text: #{$color--white};
+    --color--link: #{$color--teal-200};
+    --color--heading: #{$color--white};
+    --color--dark-light: #{$color--white};
+    --color--light-dark: #{$color--black};
+    --color--meta: #{$color--cool-grey};
+    --color--interaction: #{$color--teal-100};
+    --color--card: #{$color--black};
+    --color--large-icon: #{$color--teal};
+    --color--large-icon-border: #{$color--black};
+    --color--enhancers: #{$color--teal-dark};
+    --color--footer-bg: #{$color--off-black};
+    --color--border: #{$color--black};
+    --color--tag: #{$color--off-black};
+    --color--code-bg: #{$color--black};
+}
+
+
 $color--primary: $color--teal;
-$color--secondary: $color--indigo;
+$color--secondary: var(--color--highlight);
 
 // Fonts
 $font--primary: 'Kumbh Sans', sans-serif;
@@ -31,6 +75,7 @@ $weight--regular: 400;
 
 // Breakpoints
 $breakpoints: (
+    'smallonly' '(max-width: 599px)',
     'medium' '(min-width: 599px)',
     'large' '(min-width: 1023px)',
     'extra-large' '(min-width: 1279px)'
diff --git a/wagtailio/static/sass/atoms/_icons.scss b/wagtailio/static/sass/atoms/_icons.scss
index 061ff9afa..e25c46b3c 100644
--- a/wagtailio/static/sass/atoms/_icons.scss
+++ b/wagtailio/static/sass/atoms/_icons.scss
@@ -1,5 +1,5 @@
 .arrow {
-    fill: $color--teal-100;
+    fill: var(--color--link);
     height: 19px;
     width: 25px;
 
diff --git a/wagtailio/static/sass/base/_base.scss b/wagtailio/static/sass/base/_base.scss
index 24ab63d84..63718fb25 100644
--- a/wagtailio/static/sass/base/_base.scss
+++ b/wagtailio/static/sass/base/_base.scss
@@ -15,10 +15,17 @@ html {
 
 body {
     overflow-x: hidden;
+    background-color: var(--color--background);
+    color: var(--color--text);
+    transition: padding-top 0.25s ease;
 
     &.no-scroll {
         overflow-y: hidden;
     }
+
+    &.banner-active {
+        padding-top: var(--banner-height);
+    }
 }
 
 img {
diff --git a/wagtailio/static/sass/base/_typography.scss b/wagtailio/static/sass/base/_typography.scss
index c3fe2e9fb..3397512a0 100644
--- a/wagtailio/static/sass/base/_typography.scss
+++ b/wagtailio/static/sass/base/_typography.scss
@@ -22,6 +22,15 @@ p {
     margin: 0;
 }
 
+a {
+    color: var(--color--link);
+    transition: color 0.3s;
+
+    &:hover {
+        color: var(--color--interaction);
+    }
+}
+
 h1,
 .heading-one {
     font-size: 2.8125rem;
@@ -101,6 +110,7 @@ h4,
 .intro-big {
     font-size: 1.5625rem;
     line-height: 2.3125rem;
+    font-weight: $weight--regular;
 
     @include media-query(large) {
         font-size: 2rem;
diff --git a/wagtailio/static/sass/components/_backer.scss b/wagtailio/static/sass/components/_backer.scss
index d2d3914f8..a98f09ed2 100644
--- a/wagtailio/static/sass/components/_backer.scss
+++ b/wagtailio/static/sass/components/_backer.scss
@@ -4,7 +4,7 @@
         transition: color 0.3s;
 
         &:hover {
-            color: $color--indigo;
+            color: var(--color--highlight);
         }
 
         &--with-image {
diff --git a/wagtailio/static/sass/components/_blog-post.scss b/wagtailio/static/sass/components/_blog-post.scss
index ebc6b8d2b..871e08696 100644
--- a/wagtailio/static/sass/components/_blog-post.scss
+++ b/wagtailio/static/sass/components/_blog-post.scss
@@ -1,7 +1,7 @@
 .blog-post {
     $root: &;
     text-decoration: none;
-    color: $color--off-black;
+    color: var(--color--text);
 
     &:hover,
     &:active,
@@ -9,12 +9,12 @@
         text-decoration: none;
 
         #{$root}__title {
-            color: $color--teal;
+            color: var(--color--interaction);
         }
     }
 
     &__title {
-        color: $color--off-black;
+        color: var(--color--text);
         transition: color 0.3s;
         margin-bottom: 0;
     }
@@ -27,7 +27,7 @@
     }
 
     &__listing-text {
-        color: $color--grey;
+        color: var(--color--meta);
     }
 
     &__content {
@@ -36,7 +36,7 @@
         display: flex;
         flex-direction: column;
         gap: 15px;
-        background: $color--white;
+        background: var(--color--background);
         padding: $gutter-sm;
     }
 
@@ -61,6 +61,7 @@
         flex-direction: row;
         align-items: center;
         gap: 5px;
+        color: var(--color--meta);
     }
 
     &__icon {
@@ -94,6 +95,7 @@
             @include offset-bg-right();
             border-radius: 0 15px 15px 0;
             gap: 20px;
+            background: var(--color--light-dark);
 
             @include media-query(medium) {
                 padding: $gutter $gutter-lg;
diff --git a/wagtailio/static/sass/components/_burger.scss b/wagtailio/static/sass/components/_burger.scss
index c104a5f14..ae5a64e0a 100644
--- a/wagtailio/static/sass/components/_burger.scss
+++ b/wagtailio/static/sass/components/_burger.scss
@@ -11,7 +11,7 @@
     &:hover,
     &:focus {
         #{$root}__line {
-            background-color: $color--primary;
+            background-color: var(--color--interaction);
         }
     }
 
@@ -22,7 +22,7 @@
         width: 21px;
         height: 3px;
         border-radius: 4px;
-        background-color: $color--black;
+        background-color: var(--color--dark-light);
         opacity: 1;
         transform: translateX(-50%) rotate(0deg);
         transition: top $transition, width $transition, opacity $transition, transform $transition, background-color $transition, left $transition;
diff --git a/wagtailio/static/sass/components/_buttons.scss b/wagtailio/static/sass/components/_buttons.scss
index 4db377f39..e7ad8a2a7 100644
--- a/wagtailio/static/sass/components/_buttons.scss
+++ b/wagtailio/static/sass/components/_buttons.scss
@@ -3,7 +3,7 @@
     align-items: center;
     text-decoration: none;
     border-radius: 6px;
-    border: 1px solid $color--indigo;
+    border: 1px solid var(--color--highlight);
     padding: 15px 30px;
     color: $color--off-black;
     outline-offset: 4px;
@@ -21,7 +21,7 @@
     }
 
     &:hover {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         color: $color--white;
 
         > svg {
@@ -30,7 +30,8 @@
         }
     }
 
-    &--dark {
+    &--dark,
+    .theme-dark & {
         border-color: $color--white;
         background-color: transparent;
         color: $color--white;
@@ -43,7 +44,7 @@
         &:focus {
             background-color: $color--white;
             border-color: $color--white;
-            color: $color--indigo;
+            color: var(--color--highlight);
 
             > svg {
                 fill: $color--teal;
@@ -52,22 +53,22 @@
     }
 
     &--secondary {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         color: $color--white;
 
         &:hover,
         &:focus {
             background-color: $color--white;
-            border-color: $color--indigo;
-            color: $color--indigo;
+            border-color: var(--color--highlight);
+            color: var(--color--highlight);
         }
     }
 
     &--form {
         &:hover,
         &:focus {
-            background-color: $color--indigo;
-            border-color: $color--indigo;
+            background-color: var(--color--highlight);
+            border-color: var(--color--highlight);
             color: $color--white;
         }
     }
@@ -103,4 +104,5 @@
         line-height: 1.25rem;
     }
 
+
 }
diff --git a/wagtailio/static/sass/components/_card.scss b/wagtailio/static/sass/components/_card.scss
index d4e94de66..2692ba6e9 100644
--- a/wagtailio/static/sass/components/_card.scss
+++ b/wagtailio/static/sass/components/_card.scss
@@ -23,7 +23,7 @@
     }
 
     &__description {
-        color: $color--grey;
+        color: var(--color--meta);
         padding-bottom: 30px;
 
         @include media-query(large) {
@@ -45,7 +45,6 @@
         justify-content: flex-start;
 
         #{$root}__description {
-            color: $color--off-black;
             padding-bottom: 0;
         }
     }
diff --git a/wagtailio/static/sass/components/_code-snippet.scss b/wagtailio/static/sass/components/_code-snippet.scss
index 8c76e3a27..0dad35674 100644
--- a/wagtailio/static/sass/components/_code-snippet.scss
+++ b/wagtailio/static/sass/components/_code-snippet.scss
@@ -1,6 +1,6 @@
 .code-snippet {
     $root: &;
-    background-color: $color--indigo;
+    background-color: var(--color--highlight);
     color: $color--white;
     display: flex;
     align-items: center;
@@ -41,6 +41,10 @@
     &__button {
         padding: 0;
 
+        &:focus {
+            outline-color: var(--color--heading);
+        }
+
         &:hover,
         &:active,
         &:focus {
@@ -51,7 +55,7 @@
     }
 
     &__confirmation {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         position: absolute;
         width: min-content;
         height: min-content;
diff --git a/wagtailio/static/sass/components/_comparison-table.scss b/wagtailio/static/sass/components/_comparison-table.scss
index d937ffe81..7fc3a4926 100644
--- a/wagtailio/static/sass/components/_comparison-table.scss
+++ b/wagtailio/static/sass/components/_comparison-table.scss
@@ -57,5 +57,9 @@
                 line-height: 1.2rem;
             }
         }
+
+        .theme-dark & {
+            border-color: $color--black;
+        }
     }
 }
diff --git a/wagtailio/static/sass/components/_cookie-message.scss b/wagtailio/static/sass/components/_cookie-message.scss
index ae1402dc2..ba77f6079 100644
--- a/wagtailio/static/sass/components/_cookie-message.scss
+++ b/wagtailio/static/sass/components/_cookie-message.scss
@@ -29,10 +29,14 @@
         max-width: ($gutter-sm * 35);
         margin: 0 auto;
         line-height: 1.4;
-        color: $color--off-black;
-        background-color: $color--white;
-        border: 1px solid $color--cool-grey;
+        color: var(--color--text);
+        background-color: var(--color--light-dark);
+        border: 1px solid var(--color--border);
         border-radius: 5px;
+
+        .theme-dark & {
+            border-color: $color--grey;
+        }
     }
 
     &__message {
@@ -43,12 +47,12 @@
     }
 
     &__link {
-        color: $color--teal;
+        color: var(--color--interaction);
         text-decoration: underline;
         pointer-events: visible;
 
         &:hover {
-            color: $color--secondary;
+            color: var(--color--dark-light);
         }
     }
 
@@ -61,12 +65,12 @@
 
         &:hover {
             #{$root}__btn-icon {
-                fill: $color--secondary;
+                fill: var(--color--dark-light);
             }
         }
     }
 
     &__btn-icon {
-        fill: $color--teal;
+        fill: var(--color--interaction);
     }
 }
diff --git a/wagtailio/static/sass/components/_cta.scss b/wagtailio/static/sass/components/_cta.scss
index 72addd3b6..04b1ee11c 100644
--- a/wagtailio/static/sass/components/_cta.scss
+++ b/wagtailio/static/sass/components/_cta.scss
@@ -6,7 +6,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid $color--off-black;
+    border: 1px solid var(--color--text);
     border-radius: 10px;
     outline-offset: 4px;
     grid-column: 2 / span 2;
@@ -32,7 +32,7 @@
     }
 
     &:hover {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
 
         #{$root}__title,
         #{$root}__description {
@@ -40,13 +40,15 @@
         }
 
         > svg {
+            fill: $color--white;
             transform: translateX(10px) scale(1.1);
         }
     }
 
     &__title {
-        color: $color--teal;
+        color: var(--color--interaction);
         margin-bottom: 10px;
+        transition: color $transition;
 
         @include media-query(medium) {
             margin-bottom: 5px;
@@ -54,7 +56,7 @@
     }
 
     &__description {
-        color: $color--off-black;
+        color: var(--color--meta);
     }
 
     &__content {
diff --git a/wagtailio/static/sass/components/_document.scss b/wagtailio/static/sass/components/_document.scss
index b7a2cf087..85468d7a9 100644
--- a/wagtailio/static/sass/components/_document.scss
+++ b/wagtailio/static/sass/components/_document.scss
@@ -5,7 +5,7 @@
     transition: color 0.3s;
 
     &:hover {
-        color: $color--indigo;
+        color: var(--color--highlight);
     }
 
     @include media-query(medium) {
diff --git a/wagtailio/static/sass/components/_feature.scss b/wagtailio/static/sass/components/_feature.scss
index 7c5d6d63c..16b8d1679 100644
--- a/wagtailio/static/sass/components/_feature.scss
+++ b/wagtailio/static/sass/components/_feature.scss
@@ -16,7 +16,7 @@
         text-decoration: none;
 
         &:hover {
-            color: $color--indigo;
+            color: var(--color--highlight);
         }
     }
 
diff --git a/wagtailio/static/sass/components/_features.scss b/wagtailio/static/sass/components/_features.scss
index 087e47e47..4d325247e 100644
--- a/wagtailio/static/sass/components/_features.scss
+++ b/wagtailio/static/sass/components/_features.scss
@@ -27,31 +27,31 @@
             position: absolute;
 
             &:focus + label {
-                border-color: $color--indigo;
+                border-color: var(--color--active);
             }
 
             &:checked:focus + label {
-                border-color: $color--light-grey-100;
+                border-color: var(--color--card);
             }
 
             &:checked + label {
-                border-color: $color--indigo;
-                background-color: $color--indigo;
+                border-color: var(--color--active);
+                background-color: var(--color--active);
                 color: $color--white;
             }
 
             &:checked + label::before {
-                background-color: $color--indigo;
+                background-color: var(--color--active);
                 background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5.375c1.23 0 2.25 1.02 2.25 2.25v11.25c0 1.266-1.02 2.25-2.25 2.25H2.25A2.221 2.221 0 010 13.875V2.625C0 1.395.984.375 2.25.375H13.5zm-1.582 6.328a.955.955 0 000-1.371.955.955 0 00-1.371 0L6.75 9.129 5.168 7.582a.955.955 0 00-1.371 0 .955.955 0 000 1.371l2.25 2.25a.955.955 0 001.371 0l4.5-4.5z' fill='%23fff'/%3E%3C/svg%3E");
                 background-repeat: no-repeat;
-                color: $color--indigo;
+                color: var(--color--active);
 
             }
         }
 
         label {
-            background-color: $color--white;
-            border: 2px solid $color--light-grey-100;
+            background-color: var(--color--light-dark);
+            border: 2px solid var(--color--card);
             padding: 10px 10px 10px 40px;
             border-radius: 6px;
             position: relative;
@@ -63,9 +63,9 @@
 
             &::before {
                 content: '';
-                background-color: $color--white;
+                background-color: var(--color--light-dark);
                 border-radius: 3px;
-                border: 2px solid $color--off-black;
+                border: 2px solid var(--color--text);
                 width: 20px;
                 height: 20px;
                 inset: 9px;
diff --git a/wagtailio/static/sass/components/_footer-menu.scss b/wagtailio/static/sass/components/_footer-menu.scss
index 26c0505fb..e393fc156 100644
--- a/wagtailio/static/sass/components/_footer-menu.scss
+++ b/wagtailio/static/sass/components/_footer-menu.scss
@@ -1,7 +1,6 @@
 .footer-menu {
     $root: &;
-
-    background-color: $color--teal-300;
+    background-color: var(--color--footer-bg);
     padding: 40px 0;
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
@@ -48,7 +47,7 @@
     &__icon {
         width: 20px;
         height: 20px;
-        fill: $color--teal;
+        fill: var(--color--interaction);
         flex-shrink: 0;
 
         @include media-query(large) {
@@ -81,11 +80,13 @@
     }
 
     &__link {
-        color: $color--off-black;
+        color: var(--color--text);
         text-decoration: none;
+        transition: color $transition;
 
         &:hover {
             text-decoration: underline;
+            color: var(--color--interaction);
         }
     }
 
@@ -102,6 +103,7 @@
         font-size: 1.25rem;
         margin-left: 10px;
         display: none;
+        color: var(--color--heading);
 
         &--collapsible {
             display: block;
diff --git a/wagtailio/static/sass/components/_form.scss b/wagtailio/static/sass/components/_form.scss
index 15979df94..c368e06bb 100644
--- a/wagtailio/static/sass/components/_form.scss
+++ b/wagtailio/static/sass/components/_form.scss
@@ -3,7 +3,9 @@
 
   &__input {
     appearance: none;
-    border: 1px solid $color--off-black;
+    border: 1px solid var(--color--text);
+    color: var(--color--text);
+    background-color: var(--color--light-dark);
     font-size: 1rem;
     padding: 11px 20px;
     border-radius: $rounded-md;
diff --git a/wagtailio/static/sass/components/_grid-align.scss b/wagtailio/static/sass/components/_grid-align.scss
index fa2a173e3..2fe4b73b3 100644
--- a/wagtailio/static/sass/components/_grid-align.scss
+++ b/wagtailio/static/sass/components/_grid-align.scss
@@ -1,5 +1,4 @@
 .grid-align {
-    margin-top: -50px;
     grid-column: 2 / span 2;
 
     @include media-query(medium) {
@@ -8,6 +7,5 @@
 
     @include media-query(large) {
         grid-column: 3 / span 3;
-        margin-top: -90px;
     }
 }
diff --git a/wagtailio/static/sass/components/_headline.scss b/wagtailio/static/sass/components/_headline.scss
index 7281834f0..d7ff1ed10 100644
--- a/wagtailio/static/sass/components/_headline.scss
+++ b/wagtailio/static/sass/components/_headline.scss
@@ -95,7 +95,7 @@
     }
 
     &--dark-theme {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         padding: 80px 0;
 
         @include media-query(medium) {
diff --git a/wagtailio/static/sass/components/_hero.scss b/wagtailio/static/sass/components/_hero.scss
index 73c72fe45..e37e5524a 100644
--- a/wagtailio/static/sass/components/_hero.scss
+++ b/wagtailio/static/sass/components/_hero.scss
@@ -40,6 +40,10 @@
         @include media-query(large) {
             margin-right: 80px;
         }
+
+        a {
+            transition: color $transition;
+        }
     }
 
     &__heading {
@@ -101,6 +105,23 @@
         .icon__svg-fg {
             transform: scale(1);
         }
+
+    }
+
+    &__light-mode {
+        display: block;
+
+        .theme-dark & {
+            display: none;
+        }
+    }
+
+    &__dark-mode {
+        display: none;
+
+        .theme-dark & {
+            display: block;
+        }
     }
 
     &--search {
diff --git a/wagtailio/static/sass/components/_icon-link.scss b/wagtailio/static/sass/components/_icon-link.scss
index bcf97ecfe..117bc9f1c 100644
--- a/wagtailio/static/sass/components/_icon-link.scss
+++ b/wagtailio/static/sass/components/_icon-link.scss
@@ -1,6 +1,6 @@
 .icon-link {
     $root: &;
-    color: $color--off-black;
+    color: var(--color--text);
     text-decoration: none;
     display: flex;
     column-gap: 15px;
@@ -38,13 +38,13 @@
 
     &__subheading {
         font-weight: $weight--regular;
-        color: $color--teal;
+        color: var(--color--meta);
         margin-bottom: 5px;
     }
 
     &:hover {
         #{$root}__heading {
-            color: $color--teal;
+            color: var(--color--interaction);
         }
 
         // Icon overrides
@@ -66,6 +66,32 @@
 
     }
 
+    .modal__grid--get-started & {
+
+        #{$root}__heading {
+            @include media-query(smallonly) {
+                font-size: 21px;
+                line-height: 1.4;
+            }
+        }
+
+        #{$root}__subheading {
+            @include media-query(smallonly) {
+                font-size: 16px;
+                line-height: 1.4;
+            }
+        }
+
+        #{$root}__svg {
+            display: none;
+
+            @include media-query(medium) {
+                display: block;
+            }
+        }
+
+    }
+
     .get-started & {
         flex-direction: column;
 
diff --git a/wagtailio/static/sass/components/_icon.scss b/wagtailio/static/sass/components/_icon.scss
index 70592269f..e0187c992 100644
--- a/wagtailio/static/sass/components/_icon.scss
+++ b/wagtailio/static/sass/components/_icon.scss
@@ -1,5 +1,7 @@
 // Hover states should be handled on a component basis - not in here
 .icon {
+    $root: &;
+
     &--relative {
         position: relative;
     }
@@ -15,14 +17,15 @@
     }
 
     &__svg-bg {
-        fill: rgba($color--teal-200, 0.3);
+        fill: var(--color--large-icon);
         transform-origin: center;
+        opacity: 0.6;
         transform: scale(1.3) rotate(-8deg);
         transition: transform 0.15s ease-out, fill 0.15s ease-out;
-    }
 
-    &--primary &__svg-bg {
-        fill: $color--eggshell;
+        .theme-dark & {
+            opacity: 1;
+        }
     }
 
     &__svg-fg {
diff --git a/wagtailio/static/sass/components/_jump-links.scss b/wagtailio/static/sass/components/_jump-links.scss
index 578bf5966..3a8d13215 100644
--- a/wagtailio/static/sass/components/_jump-links.scss
+++ b/wagtailio/static/sass/components/_jump-links.scss
@@ -25,12 +25,12 @@
     }
 
     &__link {
-        color: $color--off-black;
+        color: var(--color--text);
         transition: color $transition;
 
         &:hover,
         &:focus {
-            color: $color--teal;
+            color: var(--color--interaction);
         }
     }
 }
diff --git a/wagtailio/static/sass/components/_logo-card.scss b/wagtailio/static/sass/components/_logo-card.scss
index 43e2ed1a5..3093da95d 100644
--- a/wagtailio/static/sass/components/_logo-card.scss
+++ b/wagtailio/static/sass/components/_logo-card.scss
@@ -1,13 +1,13 @@
 .logo-card {
     $root: &;
-    color: $color--off-black;
+    color: var(--color--text);
     text-decoration: none;
     display: flex;
     flex-direction: column;
     height: 100%;
     align-items: flex-start;
     border-radius: 15px;
-    background-color: $color--white;
+    background-color: var(--color--background);
     padding: 20px;
     left: -20px;
 
@@ -25,7 +25,7 @@
     }
 
     &__description {
-        color: $color--grey;
+        color: var(--color--meta);
         margin-top: 10px;
         padding-bottom: 20px;
 
@@ -55,7 +55,7 @@
             @include offset-bg-hover-left();
 
             #{$root}__heading {
-                color: $color--teal;
+                color: var(--color--interaction);
             }
         }
     }
@@ -65,4 +65,11 @@
             border-radius: 50%;
         }
     }
+
+    .theme-dark & {
+        #{$root}__image {
+            padding: 10px 20px;
+            background-color: $color--white;
+        }
+    }
 }
diff --git a/wagtailio/static/sass/components/_logos.scss b/wagtailio/static/sass/components/_logos.scss
index c35c5edb9..66672947d 100644
--- a/wagtailio/static/sass/components/_logos.scss
+++ b/wagtailio/static/sass/components/_logos.scss
@@ -1,6 +1,7 @@
 .logos {
-    @include sf-spacing(2);
+    @include sf-spacing(4);
     @include z-index(overlap); // so they sit above the large icons
+    $root: &;
     position: relative;
 
     &__heading {
@@ -33,15 +34,37 @@
         @include media-query(large) {
             grid-column: 2 / span 5;
         }
+
+        .theme-dark & {
+            @include media-query(medium) {
+                gap: 30px;
+            }
+        }
     }
 
     &__list-item {
         min-width: 100px;
         max-width: 100px;
         flex-basis: 100px;
+
+        .theme-dark & {
+            min-width: 120px;
+            max-width: 120px;
+            flex-basis: 120px;
+        }
     }
 
     &__image {
         flex-shrink: 0;
     }
+
+    .theme-dark & {
+        #{$root}__list-item {
+            display: flex;
+            align-items: center;
+            padding: 10px 20px;
+            background-color: $color--white;
+            border-radius: 3px;
+        }
+    }
 }
diff --git a/wagtailio/static/sass/components/_milestone-item.scss b/wagtailio/static/sass/components/_milestone-item.scss
index 71d974bc0..409cd1bff 100644
--- a/wagtailio/static/sass/components/_milestone-item.scss
+++ b/wagtailio/static/sass/components/_milestone-item.scss
@@ -1,11 +1,12 @@
 .milestone-item {
+    $root: &;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 20px;
     overflow: hidden;
     padding: 20px;
-    background-color: $color--light-grey-100;
+    background-color: var(--color--card);
     border: 1px solid transparent;
     border-radius: $rounded-md;
 
@@ -23,13 +24,13 @@
     }
 
     &__external-link {
-        color: $color--off-black;
+        color: var(--color--text);
         transition: color $transition;
         text-decoration: none;
 
         &:hover,
         &:focus-visible {
-            color: $color--teal;
+            color: var(--color--interaction);
 
             .icon {
                 opacity: 1;
@@ -37,13 +38,13 @@
         }
 
         .icon {
-            fill: inherit;
             flex-shrink: 0;
             width: 0.8rem;
             height: 0.8rem;
             opacity: .5;
             margin-inline-end: -8px;
             margin-top: -8px;
+            fill: currentColor;
 
             @media (forced-colors: active) {
                 fill: CanvasText;
@@ -61,7 +62,7 @@
         font-weight: $weight--regular;
         color: $color--teal;
         border: 1px solid $color--teal-100;
-        background-color: $color--light-teal;
+        background-color: var(--color--tag);
         padding: 2px 8px;
         white-space: nowrap;
         border-radius: $rounded-xl;
@@ -80,7 +81,7 @@
         text-decoration: none;
         color: $color--white;
         border: 1px solid transparent;
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         padding: 2px 8px;
 
         .icon {
@@ -89,8 +90,25 @@
         }
 
         &:hover, &:focus-visible {
-            background-color: $color--teal;
+            background-color: var(--color--interaction);
             outline-offset: 4px;
         }
     }
+
+    .theme-dark & {
+        #{$root}__label {
+            border-color: var(--color--border);
+            color: $color--cool-grey;
+        }
+
+        #{$root}__sponsor-label {
+            background-color: $color--teal-200;
+            color: $color--black;
+
+            &:hover,
+            &:focus {
+                background-color: $color--white;
+            }
+        }
+    }
 }
diff --git a/wagtailio/static/sass/components/_milestones.scss b/wagtailio/static/sass/components/_milestones.scss
index 05947e054..7fa9e983e 100644
--- a/wagtailio/static/sass/components/_milestones.scss
+++ b/wagtailio/static/sass/components/_milestones.scss
@@ -7,7 +7,7 @@
         top: 0;
         inset-inline-start: 24px;
         height: 100%;
-        border-inline-start: 2px dashed $color--light-grey;
+        border-inline-start: 2px dashed var(--color--border);;
         grid-column: 2;
     }
 
@@ -55,12 +55,12 @@
     }
 
     &__heading-subtitle {
-        color: $color--grey;
+        color: var(--color--meta);
         font-weight: $weight--regular;
     }
 
     &__heading-link {
-        color: $color--off-black;
+        color: var(--color--text);
         text-decoration: none;
         transition: color $transition;
     }
diff --git a/wagtailio/static/sass/components/_modal.scss b/wagtailio/static/sass/components/_modal.scss
index f165b7519..b8d541b3f 100644
--- a/wagtailio/static/sass/components/_modal.scss
+++ b/wagtailio/static/sass/components/_modal.scss
@@ -1,18 +1,15 @@
 .modal {
     $root: &;
+    @include z-index(modal);
+    position: relative;
 
     &--get-started {
-        // hide the modal if it's open below medium breakpoint
         &.micromodal-slide.is-open {
-            display: none;
-
-            @include media-query(medium) {
-                display: block;
-            }
+            display: block;
         }
 
         #{$root}__content {
-            padding: 0 20px 20px;
+            padding: 0 10px 10px;
 
             @include media-query(large) {
                 padding: 0 40px 40px;
@@ -64,9 +61,14 @@
         align-items: center;
     }
 
+    &__header {
+        @include z-index(modal-controls);
+        position: relative;
+    }
+
     &__container {
-        background-color: $color--white;
-        padding: 30px;
+        background-color: var(--color--light-dark);
+        padding: 20px;
         max-width: 1295px;
         max-height: 100vh;
         border-radius: 15px;
@@ -75,6 +77,10 @@
         width: calc(100% - 40px);
         position: relative;
         border: 2px solid transparent;
+
+        @include media-query(large) {
+            padding: 30px;
+        }
     }
 
     &__grid {
@@ -89,7 +95,10 @@
             }
 
             #{$root}__grid-item {
-                max-width: 75%;
+                // stylelint-disable-next-line max-nesting-depth
+                @include media-query(large) {
+                    max-width: 75%;
+                }
             }
         }
     }
@@ -103,17 +112,31 @@
                 fill: ButtonText;
             }
         }
+
+        &:hover,
+        &:focus {
+            #{$root}__close-icon {
+                fill: var(--color--interaction);
+            }
+        }
     }
 
     &__close-icon {
-        color: $color--off-black;
+        fill: var(--color--dark-light);
         width: 20px;
         height: 20px;
         pointer-events: none;
+        transition: fill $transition;
     }
 
     &__title {
-        margin-bottom: 40px;
+        margin-bottom: 30px;
+        margin-top: -20px;
+
+        @include media-query(medium) {
+            margin-bottom: 40px;
+            margin-top: 0;
+        }
 
         @include media-query(large) {
             margin-bottom: 60px;
diff --git a/wagtailio/static/sass/components/_nav-cta.scss b/wagtailio/static/sass/components/_nav-cta.scss
index 6a917061a..96a58a9bc 100644
--- a/wagtailio/static/sass/components/_nav-cta.scss
+++ b/wagtailio/static/sass/components/_nav-cta.scss
@@ -5,9 +5,11 @@
     color: $color--white;
     text-decoration: none;
     padding: 20px 20px 50px 20px;
+    background-color: var(--color--highlight);
 
     @include media-query(medium) {
         padding: 20px 50px 50px 50px;
+        height: 100%;
     }
 
     @media only screen and (min-width: $header-desktop) {
diff --git a/wagtailio/static/sass/components/_newsletter-cta.scss b/wagtailio/static/sass/components/_newsletter-cta.scss
index fc57d38b7..48f13e5ce 100644
--- a/wagtailio/static/sass/components/_newsletter-cta.scss
+++ b/wagtailio/static/sass/components/_newsletter-cta.scss
@@ -1,7 +1,7 @@
 .newsletter-cta {
     grid-column: 2 / span 2;
     border-radius: $rounded-xl;
-    border: 1px solid $color--off-black;
+    border: 1px solid var(--color--text);
     margin-bottom: 50px;
     padding: 20px;
 
diff --git a/wagtailio/static/sass/components/_overview-item.scss b/wagtailio/static/sass/components/_overview-item.scss
index e8d4234a6..59af5d900 100644
--- a/wagtailio/static/sass/components/_overview-item.scss
+++ b/wagtailio/static/sass/components/_overview-item.scss
@@ -3,16 +3,16 @@
     flex-direction: column;
     font-size: 12px;
     padding: 20px;
-    background-color: $color--light-grey-100;
+    background-color: var(--color--card);
 
     &__link {
-        color: $color--off-black;
+        color: var(--color--text);
         transition: color $transition;
         text-decoration: none;
 
         &:hover,
         &:focus {
-            color: $color--teal;
+            color: var(--color--interaction);
         }
 
         &--edit {
@@ -36,7 +36,7 @@
 
     &__description {
         margin-bottom: 10px;
-        color: $color--grey;
+        color: var(--color--meta);
     }
 
     &__package-links {
@@ -46,12 +46,13 @@
     &__package-link {
         font-size: 13px;
         text-decoration: none;
-        color: $color--off-black;
+        color: var(--color--text);
         transition: color $transition;
 
         &:hover,
         &:focus {
-            color: $color--teal;
+            color: var(--color--interaction);
+            text-decoration: underline;
         }
     }
 }
diff --git a/wagtailio/static/sass/components/_overview.scss b/wagtailio/static/sass/components/_overview.scss
index da19fbd0d..af8ea657a 100644
--- a/wagtailio/static/sass/components/_overview.scss
+++ b/wagtailio/static/sass/components/_overview.scss
@@ -24,7 +24,7 @@
     }
 
     &__sub-heading-link {
-        color: $color--off-black;
+        color: var(--color--text);
         transition: color $transition;
         text-decoration: none;
 
@@ -45,17 +45,17 @@
     }
 
     &__description {
-        color: $color--grey;
+        color: var(--color--meta);
     }
 
     &__description-link {
-        color: $color--off-black;
+        color: var(--color--text);
         text-decoration: none;
         transition: color $transition;
 
         &:hover,
         &:focus {
-            color: $color--teal;
+            color: var(--color--interaction);
         }
     }
 
diff --git a/wagtailio/static/sass/components/_primary-nav.scss b/wagtailio/static/sass/components/_primary-nav.scss
index 6bc5603bc..58b998ffc 100644
--- a/wagtailio/static/sass/components/_primary-nav.scss
+++ b/wagtailio/static/sass/components/_primary-nav.scss
@@ -24,11 +24,11 @@
         padding: 15px 0;
         font-weight: $weight--bold;
         text-align: center;
-        border-bottom: 1px solid $color--light-grey;
+        border-bottom: 1px solid var(--color--border);
         transition: color $transition;
 
         &:first-child {
-            border-top: 1px solid $color--light-grey;
+            border-top: 1px solid var(--color--border);
 
             @media only screen and (min-width: $header-desktop) {
                 border-top: 0;
@@ -53,13 +53,18 @@
         align-items: center;
         justify-content: space-between;
         text-decoration: none;
-        color: $color--off-black;
+        color: var(--color--text);
         padding: 0;
         width: 100%;
 
+        &:focus {
+            outline-color: var(--color--heading);
+        }
+
         &:hover,
+        &:focus,
         &.active {
-            color: $color--primary;
+            color: var(--color--interaction);
         }
     }
 
diff --git a/wagtailio/static/sass/components/_quotes.scss b/wagtailio/static/sass/components/_quotes.scss
index a05c5130f..b5bbf41ac 100644
--- a/wagtailio/static/sass/components/_quotes.scss
+++ b/wagtailio/static/sass/components/_quotes.scss
@@ -5,7 +5,7 @@
     overflow: hidden;
 
     &__header {
-        color: $color--off-black;
+        color: var(--color--text);
         padding-bottom: 30px;
         grid-column: 2 / span 2;
         max-width: 950px;
@@ -46,7 +46,7 @@
         display: flex;
         align-items: center;
         padding: 15px 0 0;
-        color: $color--off-black;
+        color: var(--color--meta);
 
         @include media-query(large) {
             padding: 30px 0 0;
diff --git a/wagtailio/static/sass/components/_rich-text.scss b/wagtailio/static/sass/components/_rich-text.scss
index 3612a6e97..2e4332962 100644
--- a/wagtailio/static/sass/components/_rich-text.scss
+++ b/wagtailio/static/sass/components/_rich-text.scss
@@ -1,10 +1,10 @@
 .rich-text {
     a {
-        color: $color--teal;
+        color: var(--color--link);
         transition: color 0.3s;
 
         &:hover {
-            color: $color--indigo;
+            color: var(--color--interaction);
         }
     }
 
diff --git a/wagtailio/static/sass/components/_search-result.scss b/wagtailio/static/sass/components/_search-result.scss
index 2edba5f9c..c9352fee9 100644
--- a/wagtailio/static/sass/components/_search-result.scss
+++ b/wagtailio/static/sass/components/_search-result.scss
@@ -3,7 +3,7 @@
   border-bottom: 1px solid $color--black;
 
   &__title {
-    color: $color--black;
+    color: var(--color--heading);
     text-decoration: none;
 
     &:focus,
diff --git a/wagtailio/static/sass/components/_search.scss b/wagtailio/static/sass/components/_search.scss
index 27b46b42c..170f5984d 100644
--- a/wagtailio/static/sass/components/_search.scss
+++ b/wagtailio/static/sass/components/_search.scss
@@ -27,11 +27,11 @@
     &__input {
         border-radius: 6px 0 0 6px;
         width: 100%;
-        border: 1px solid $color--black;
+        border: 1px solid var(--color--dark-light);
         padding: 15px 20px;
-        color: $color--off-black;
+        color: var(--color--text);
         height: 100%;
-        background-color: $color--white;
+        background-color: var(--color--light-dark);
 
         // remove rounded edges in ios
         &[type="search"] {
@@ -47,12 +47,12 @@
         inset: 0;
         opacity: 1;
         transform: translate3d(0, 100%, 0);
-        transition: opacity $transition;
+        transition: opacity $transition, transform $transition;
 
         &.is-hidden {
             opacity: 0;
             pointer-events: none;
-            transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -200%, 0);
         }
 
         #{$root}__button {
diff --git a/wagtailio/static/sass/components/_sign-up-form.scss b/wagtailio/static/sass/components/_sign-up-form.scss
index 6a0ea674e..7c9828bed 100644
--- a/wagtailio/static/sass/components/_sign-up-form.scss
+++ b/wagtailio/static/sass/components/_sign-up-form.scss
@@ -2,6 +2,7 @@
     $root: &;
     @include sf-spacing(2);
     grid-column: 2 / span 2;
+    overflow: hidden; // prevent scrollbars from svg size
 
     @include media-query(medium) {
       grid-column: 2 / span 3;
@@ -60,7 +61,7 @@
     &__input {
         flex: 1;
         height: 50px;
-        border: 1px solid $color--off-black;
+        border: 1px solid var(--color--text);
         border-radius: $rounded-md;
         padding: 11px 20px;
 
@@ -82,7 +83,7 @@
         border-style: solid;
         height: 50px;
         margin: 15px 0 0 0;
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         color: $color--white;
 
         @include media-query(medium) {
@@ -94,7 +95,7 @@
     }
 
     &--block {
-        border: 1px solid $color--off-black;
+        border: 1px solid var(--color--text);
         border-radius: 15px;
         padding: 30px;
 
@@ -104,11 +105,11 @@
     }
 
     &--footer {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         color: $color--white;
 
         #{$root}__input {
-            background-color: $color--indigo;
+            background-color: var(--color--highlight);
             border: 1px solid $color--white;
             color: $color--white;
             border-radius: 6px;
@@ -124,7 +125,7 @@
 
         #{$root}__button {
             background-color: $color--white;
-            color: $color--indigo;
+            color: var(--color--highlight);
             border-radius: 6px;
             border-style: solid none none none;
 
@@ -149,6 +150,7 @@
         font-size: 16px;
         margin-bottom: 20px;
         padding-top: 0;
+        font-weight: $weight--regular;
       }
 
       &__container {
diff --git a/wagtailio/static/sass/components/_sitewide-alert.scss b/wagtailio/static/sass/components/_sitewide-alert.scss
index e71326d96..f57c6edf7 100644
--- a/wagtailio/static/sass/components/_sitewide-alert.scss
+++ b/wagtailio/static/sass/components/_sitewide-alert.scss
@@ -1,7 +1,9 @@
 .sitewide-alert {
+    position: relative;
     padding: $gutter-sm $gutter;
     opacity: 0;
     transition: opacity 0.5s ease;
+    margin-top: calc(var(--banner-height) * -1);
 
     &--active {
         opacity: 1;
@@ -32,7 +34,7 @@
         color: $color--white;
 
         h2, h3 {
-            color: $color--indigo;
+            color: var(--color--highlight);
         }
 
         a {
diff --git a/wagtailio/static/sass/components/_skip-link.scss b/wagtailio/static/sass/components/_skip-link.scss
index 871cd6687..096e97c5f 100644
--- a/wagtailio/static/sass/components/_skip-link.scss
+++ b/wagtailio/static/sass/components/_skip-link.scss
@@ -3,7 +3,7 @@
     position: absolute;
     inset: -500px auto auto 0;
     color: $color--white;
-    background-color: $color--indigo;
+    background-color: var(--color--highlight);
     padding: 20px;
     font-weight: $weight--bold;
     text-decoration: none;
diff --git a/wagtailio/static/sass/components/_sub-nav.scss b/wagtailio/static/sass/components/_sub-nav.scss
index 226877df1..b7cc7300f 100644
--- a/wagtailio/static/sass/components/_sub-nav.scss
+++ b/wagtailio/static/sass/components/_sub-nav.scss
@@ -10,7 +10,7 @@
     list-style: none;
     inset: 0 auto auto 0;
     padding: 0 20px;
-    background: $color--white;
+    background-color: var(--color--background);
     border-radius: $rounded-xl;
     // Extra border for high-contrast mode users.
     border: 1px solid transparent;
@@ -23,25 +23,29 @@
     box-shadow: 0 0 40px rgba($color--black, 0.2);
 
     @include media-query(medium) {
+        background-color: var(--color--background);
         padding: 0 50px;
         height: calc(100% - #{$header-tablet-height});
     }
 
     @media only screen and (min-width: $header-desktop) {
         display: none;
-        align-items: flex-start;
+        align-items: stretch;
         width: auto;
         height: auto;
         top: 120px;
         right: 40px;
         left: 40px;
-        background-color: $color--white;
         padding: 0;
         opacity: 1;
         overflow: hidden;
         visibility: visible;
     }
 
+    .theme-dark & {
+        border: 1px solid $color--black;
+    }
+
     // mobile active state
     &.is-visible {
         opacity: 1;
@@ -94,6 +98,7 @@
             @include media-query(medium) {
                 inset: auto auto auto -50px;
                 width: calc(100% + 100px);
+                padding-bottom: 0;
             }
 
             @media only screen and (min-width: $header-desktop) {
@@ -158,7 +163,7 @@
         font-weight: $weight--regular;
         margin-bottom: 20px;
         line-height: 1;
-        color: $color--black;
+        color: var(--color--heading);
     }
 
     &__item-link {
@@ -166,12 +171,12 @@
         flex-direction: row;
         align-items: center;
         text-decoration: none;
-        color: $color--black;
+        color: var(--color--heading);
         transition: color $transition;
 
         &:hover,
         &:focus {
-            color: $color--primary;
+            color: var(--color--interaction);
 
             // Icon overrides
             .icon__svg-bg {
@@ -181,8 +186,8 @@
         }
 
         &--back {
-            border-top: 1px solid $color--cool-grey;
-            border-bottom: 1px solid $color--cool-grey;
+            border-top: 1px solid var(--color--border);
+            border-bottom: 1px solid var(--color--border);
             font-size: 14px;
             line-height: 1;
             padding: 10px 0;
@@ -205,7 +210,7 @@
     &__item-description {
         display: none;
         font-size: 14px;
-        color: $color--grey;
+        color: var(--color--meta);
         font-weight: $weight--regular;
 
         @media only screen and (min-width: $header-desktop) {
diff --git a/wagtailio/static/sass/components/_teaser.scss b/wagtailio/static/sass/components/_teaser.scss
index 63063ad6d..4b995d8ac 100644
--- a/wagtailio/static/sass/components/_teaser.scss
+++ b/wagtailio/static/sass/components/_teaser.scss
@@ -1,12 +1,12 @@
 .teaser {
     $root: &;
-    color: $color--off-black;
+    color: var(--color--text);
     text-decoration: none;
     margin-bottom: 140px;
 
     &:hover {
         #{$root}__heading {
-            color: $color--teal;
+            color: var(--color--interaction);
         }
 
         #{$root}__content {
@@ -29,7 +29,7 @@
 
     &__content {
         @include offset-bg-right();
-        background-color: $color--white;
+        background-color: var(--color--light-dark);
         grid-column: 2 / span 2;
         padding: 20px;
 
@@ -59,4 +59,5 @@
             margin-bottom: 35px;
         }
     }
+
 }
diff --git a/wagtailio/static/sass/components/_theme-toggle.scss b/wagtailio/static/sass/components/_theme-toggle.scss
new file mode 100644
index 000000000..47912cd59
--- /dev/null
+++ b/wagtailio/static/sass/components/_theme-toggle.scss
@@ -0,0 +1,124 @@
+.theme-toggle {
+    $root: &;
+    margin-inline-end: $gutter;
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+
+    @include media-query(medium) {
+        margin-top: 0;
+    }
+
+    @include media-query(large) {
+        margin-inline-end: ($gutter * 1.5);
+    }
+
+    &__label {
+        color: $color--white;
+    }
+
+    // Don't display toggle if in high contrast mode
+    @media (prefers-contrast: more) {
+        display: none;
+    }
+
+    &__button {
+        padding: 0;
+        width: 48px;
+        height: 28px;
+        border: 0;
+        overflow: hidden;
+        position: relative;
+        border-radius: 14px;
+        margin: 0 ($gutter * 0.5);
+        display: inline-block;
+        cursor: pointer;
+        background-color: rgba($color--black, 0.9);
+
+        &:focus {
+            background-color: $color--teal;
+
+            &::before {
+                background-color: $color--teal-100;
+            }
+        }
+
+        &::before {
+            top: 4px;
+            inset-inline-start: 24px;
+            content: '';
+            width: 20px;
+            height: 20px;
+            display: block;
+            position: absolute;
+            border-radius: 12px;
+            background-color: $color--light-grey;
+            transition: inset-inline-start $transition;
+        }
+
+        &::after {
+            content: '';
+            top: 14px;
+            inset-inline-end: 2px;
+            width: 1px;
+            height: 1px;
+            display: block;
+            position: absolute;
+            border-radius: 0.5px;
+            background: $color--off-black;
+        }
+    }
+
+    .dark-only {
+        display: none;
+    }
+
+    .theme-dark & {
+        .dark-only {
+            display: block;
+        }
+
+        .light-only {
+            display: none;
+        }
+
+        #{$root}__button {
+            background-color: $color--light-grey;
+
+            &:focus {
+                background-color: $color--teal-100;
+
+                // stylelint-disable-next-line max-nesting-depth
+                &::after {
+                    background-color: $color--teal-100;
+                }
+            }
+
+            &::before {
+                background-color: $color--black;
+                inset-inline-start: 4px;
+            }
+
+            &::after {
+                background-color: $color--light-grey;
+                top: -2px;
+                inset-inline-end: 2px;
+                width: 32px;
+                height: 32px;
+                border-radius: 16px;
+            }
+        }
+
+        #{$root}__label {
+            color: $color--light-grey;
+        }
+    }
+
+    .no-js & {
+        display: none;
+    }
+
+    @media print {
+        display: none;
+     }
+}
diff --git a/wagtailio/static/sass/components/_wagtail-logo.scss b/wagtailio/static/sass/components/_wagtail-logo.scss
new file mode 100644
index 000000000..9e9a81850
--- /dev/null
+++ b/wagtailio/static/sass/components/_wagtail-logo.scss
@@ -0,0 +1,9 @@
+.wagtail-logo {
+    &__dark {
+        fill: $color--black;
+    }
+
+    &__light {
+        fill: $color--white;
+    }
+}
diff --git a/wagtailio/static/sass/layout/_footer.scss b/wagtailio/static/sass/layout/_footer.scss
index c69cf0d80..5318021cb 100644
--- a/wagtailio/static/sass/layout/_footer.scss
+++ b/wagtailio/static/sass/layout/_footer.scss
@@ -2,7 +2,7 @@
     $root: &;
 
     &__base {
-        background-color: $color--indigo;
+        background-color: var(--color--highlight);
         padding: 60px 0;
         color: $color--white;
     }
@@ -131,10 +131,12 @@
 
     &__link {
         color: $color--teal-100;
-        text-decoration: none;
+        text-decoration: underline;
+        transition: color $transition;
 
         &:hover {
-            text-decoration: underline;
+            text-decoration: none;
+            color: $color--white;
         }
     }
 
@@ -144,16 +146,13 @@
 
     &__socials {
         display: flex;
+        align-items: center;
         gap: 10px;
-        margin-top: 30px;
 
         @include media-query(medium) {
             gap: 20px;
         }
 
-        @include media-query(large) {
-            margin-top: 40px;
-        }
     }
 
     &__social-list {
@@ -205,4 +204,18 @@
             bottom: 0;
         }
     }
+
+    &__sub-footer {
+        margin-bottom: 30px;
+
+        @include media-query(medium) {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        @include media-query(large) {
+            margin-bottom: 40px;
+        }
+    }
 }
diff --git a/wagtailio/static/sass/layout/_header.scss b/wagtailio/static/sass/layout/_header.scss
index 9d35f4d39..378e26b5c 100644
--- a/wagtailio/static/sass/layout/_header.scss
+++ b/wagtailio/static/sass/layout/_header.scss
@@ -1,4 +1,5 @@
 .header {
+    $root: &;
     max-width: $site-width;
     margin: 0 auto 70px;
     padding: 15px;
@@ -18,22 +19,28 @@
     }
 
     &__logo {
-        width: 100px;
-        height: 40px;
-
-        @include media-query(medium) {
-            width: 153px;
-            height: 65px;
-        }
+        width: 100%;
+        height: 100%;
 
         @media (forced-colors: active) {
             fill: CanvasText;
         }
 
+        &--dark {
+            display: none;
+        }
+
     }
 
     &__link {
         display: block;
+        width: 100px;
+        height: 40px;
+
+        @include media-query(medium) {
+            width: 153px;
+            height: 65px;
+        }
     }
 
     &__identity {
@@ -59,7 +66,7 @@
             inset: $header-mobile-height auto auto 0;
             width: 100%;
             height: 100%;
-            background-color: $color--white;
+            background-color: var(--color--background);
             visibility: hidden;
             transform: translate3d(100%,0,0);
             transition: transform $transition;
@@ -84,6 +91,10 @@
         margin: 0;
         width: auto;
 
+        &:focus {
+            outline-color: var(--color--heading);
+        }
+
         &--get-started {
             display: none;
             padding: 10px 13px;
@@ -113,6 +124,14 @@
 
             .header__nav--mobile & {
                 display: block; // show get started on mobile
+                margin: 20px 20px 0;
+                width: calc(100% - 40px);
+                text-align: center;
+
+                // stylelint-disable-next-line max-nesting-depth
+                @include media-query(medium) {
+                    width: calc(100% - 80px);
+                }
             }
         }
 
@@ -120,6 +139,7 @@
             width: 25px;
             height: 25px;
             padding: 0;
+            color: var(--color--text);
 
             svg {
                 width: inherit;
@@ -174,7 +194,7 @@
         transition: color $transition;
 
         &--open {
-            color: $color--black;
+            color: var(--color--dark-light);
 
             .is-expanded & {
                 display: none;
@@ -183,8 +203,8 @@
 
         &--close {
             display: none;
-            color: $color--white;
-            background-color: $color--black;
+            color: var(--color--light-dark);
+            background-color: var(--color--dark-light);
             padding: 5px;
             border-radius: 50%;
 
@@ -195,7 +215,7 @@
 
         &:hover,
         &:focus {
-            color: $color--primary;
+            color: var(--color--interaction);
         }
     }
 
@@ -208,4 +228,16 @@
         }
     }
 
+    .theme-dark & {
+
+        #{$root}__logo {
+            display: none;
+
+            &--dark {
+                display: block;
+            }
+        }
+
+    }
+
 }
diff --git a/wagtailio/static/sass/main.scss b/wagtailio/static/sass/main.scss
index 627992c43..c1d5929ac 100644
--- a/wagtailio/static/sass/main.scss
+++ b/wagtailio/static/sass/main.scss
@@ -76,6 +76,8 @@
 @import 'components/sub-nav';
 @import 'components/teaser';
 @import 'components/text-media';
+@import 'components/theme-toggle';
+@import 'components/wagtail-logo';
 
 // Atoms
 @import 'atoms/icons';
diff --git a/wagtailio/static/sass/vendor/_code-highlighting.scss b/wagtailio/static/sass/vendor/_code-highlighting.scss
index aa6d3388e..bbb9a8dc5 100644
--- a/wagtailio/static/sass/vendor/_code-highlighting.scss
+++ b/wagtailio/static/sass/vendor/_code-highlighting.scss
@@ -1,8 +1,8 @@
 .codehilite pre {
-    background-color:#f5f5f5;
-    white-space : pre-wrap;
-    padding:1em;
-    font-size:0.85em;
+    background-color: var(--color--code-bg);
+    white-space: pre-wrap;
+    padding: 1em;
+    font-size: 0.85em;
 }
 
 .codehilite *{
diff --git a/webpack.config.js b/webpack.config.js
index 8548528e3..234378943 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,6 +13,7 @@ const projectRoot = 'wagtailio';
 
 const options = {
     entry: {
+        blocking: `./${projectRoot}/static/js/blocking.js`,
         main: `./${projectRoot}/static/js/main.js`,
     },
     resolve: {
