Docs(web-twig): Add theme switcher to the demo app #DS-1479

lmc-eu · Oct 1, 2024 · 0bba463 · 0bba463
1 parent 3a82d05
commit 0bba463
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/apps/web-twig-demo/templates/layout/base.html.twig b/apps/web-twig-demo/templates/layout/base.html.twig
@@ -19,11 +19,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/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
@@ -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>