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

lmc-eu · Oct 3, 2024 · e8eaa38 · e8eaa38
1 parent a0b094b
commit e8eaa38
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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,13 @@
+<Select
+  id="select-theme"
+  inputProps="{{ { autocomplete: 'off' } }}"
+  isFluid
+  isLabelHidden="{{ isLabelHidden | default(false) }}"
+  label="Theme"
+  name="theme"
+  onchange="switchTheme(event)"
+>
+  {% for theme in themes %}
+    <option value="{{ theme.id }}">{{ theme.name }}</option>
+  {% endfor %}
+</Select>