feat(ui): introducing dark-mode and refactor some template details and css

- chore: increase to 9.7.0 - reconcile with main after rebase
- chore: reconcile fixes to containers.twig from main after rebase
- refactor(layout): increment CSS version from v2 to v3

Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>

php/public/toggle-dark-mode.js

@@ -0,0 +1,26 @@
+// Function to toggle theme
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+
+    // Change the icon based on the current theme
+    const themeIcon = document.getElementById('theme-icon');
+    themeIcon.textContent = newTheme === 'dark' ? '☀️' : '🌙'; // Switch between moon and sun icons
+}
+
+// Function to apply saved theme from localStorage
+function applySavedTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+
+        // Ensure the icon is set correctly based on the saved theme
+        const themeIcon = document.getElementById('theme-icon');
+        themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
+    }
+}
+
+// Apply theme when the page loads
+document.addEventListener('DOMContentLoaded', applySavedTheme);