diff --git a/apps/web-twig-demo/templates/layout/base.html.twig b/apps/web-twig-demo/templates/layout/base.html.twig
index 0aeea3ac1a..cbd428e590 100644
--- a/apps/web-twig-demo/templates/layout/base.html.twig
+++ b/apps/web-twig-demo/templates/layout/base.html.twig
@@ -21,11 +21,40 @@
     {# As we also use this demo for visual testing we need to block render until the font is loaded. #}
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=block">
 
+    <!-- Theme switcher -->
+    {% set themes = [
+      {
+        id: 'light-default',
+        name: 'Light default',
+      },
+      {
+        id: 'light-on-brand',
+        name: 'Light on brand',
+      },
+    ] %}
+    <script>
+      const themes = [];
+
+      {% for theme in themes %}
+        themes.push('{{ theme.id }}');
+      {% endfor %}
+
+      const switchTheme = (event) => {
+        const targetElement = document.body;
+        const theme = event.target.value;
+
+        themes.forEach((theme) => {
+          targetElement.classList.remove(`spirit-theme-${theme}`);
+        });
+        targetElement.classList.add(`spirit-theme-${theme}`);
+      };
+    </script>
+
     {{ encore_entry_link_tags('app') }}
     {{ encore_entry_script_tags('app') }}
 
   </head>
-  <body>
+  <body class="bg-primary">
 
     {% block body %}{% endblock %}
 
diff --git a/apps/web-twig-demo/templates/layout/default.html.twig b/apps/web-twig-demo/templates/layout/default.html.twig
index 787c85564e..90630d90a4 100644
--- a/apps/web-twig-demo/templates/layout/default.html.twig
+++ b/apps/web-twig-demo/templates/layout/default.html.twig
@@ -20,7 +20,7 @@
   {%- endset %}
 
   {% block header %}
-    {% include 'partials/header.html.twig' %}
+    {% include 'partials/header.html.twig' with { themes } only %}
     {% include 'partials/cover.html.twig' with { isUnstable, parentPageName, parentPageUrl, title } only %}
   {% endblock %}
 
diff --git a/apps/web-twig-demo/templates/partials/header.html.twig b/apps/web-twig-demo/templates/partials/header.html.twig
index b8279bfa87..7eb20f9188 100644
--- a/apps/web-twig-demo/templates/partials/header.html.twig
+++ b/apps/web-twig-demo/templates/partials/header.html.twig
@@ -23,6 +23,10 @@
     </HeaderNav>
   </HeaderDesktopActions>
 
+  <HeaderDesktopActions isAtEnd>
+    {% include "partials/themeSwitcher.html.twig" with { isLabelHidden: true, themes } only %}
+  </HeaderDesktopActions>
+
 </Header>
 
 <HeaderDialog id="off-canvas-navigation" aria-label="Menu">
@@ -45,4 +49,8 @@
     </HeaderDialogNav>
   </HeaderDialogActions>
 
+  <HeaderDialogActions>
+    {% include "partials/themeSwitcher.html.twig" with { themes } only %}
+  </HeaderDialogActions>
+
 </HeaderDialog>
diff --git a/apps/web-twig-demo/templates/partials/themeSwitcher.html.twig b/apps/web-twig-demo/templates/partials/themeSwitcher.html.twig
new file mode 100644
index 0000000000..225b827b63
--- /dev/null
+++ b/apps/web-twig-demo/templates/partials/themeSwitcher.html.twig
@@ -0,0 +1,15 @@
+{% set inputProps = { autocomplete: 'off' } %}
+
+<Select
+  inputProps={ inputProps }
+  id="select-theme"
+  label="Theme"
+  name="theme"
+  onchange="switchTheme(event)"
+  isFluid
+  isLabelHidden={{ isLabelHidden is defined ? isLabelHidden : false }} {# The `default()` filter doesn't work. #}
+>
+  {% for theme in themes %}
+    <option value="{{ theme.id }}">{{ theme.name }}</option>
+  {% endfor %}
+</Select>
