add mono mode

assets/javascript/emoji-footprint.js

@@ -1,6 +1,11 @@
 // Sparkle effect on mouse move
 document.addEventListener('mousemove', function (e) {
-    const emojis = ['✨', '💖', '🌟', '💅', '🦄', '🎉', '🌈'];
+    let emojis = ['✨', '💖', '🌟', '💅', '🦄', '🎉', '🌈'];
+    const htmlElement = document.documentElement;
+
+    if (htmlElement.getAttribute('data-website-mode') === 'mono') {
+        emojis = ['🦇', '🦹', '🌙', '⚰️', '🕯️'];
+    }
     const sparkle = document.createElement('div');
     sparkle.className = 'emoji-footprint';
     sparkle.textContent = emojis[Math.floor(Math.random() * emojis.length)];

assets/styles/modes.css

@@ -307,6 +307,10 @@
     animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
 }
 
+[data-website-mode="mono"] body {
+    filter: grayscale(1);
+}
+
 /* Enhanced mode styles (for future use) */
 [data-website-mode="enhanced"] .btn {
     background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));

templates/base.html.twig

@@ -26,6 +26,10 @@
                             <li class="nav-item"><a class="nav-link" href="https://git.hannover.ccc.de/lubiana/futtern/issues/new" target="_blank">Create Issue</a></li>
                         </ul>
                         <div class="btn-group ms-auto" role="group" aria-label="Mode selection">
+                            <input type="radio" class="btn-check" name="mode" id="mono" autocomplete="off">
+                            <label class="btn btn-outline-primary" for="mono">
+                                Mono
+                            </label>
                             <input type="radio" class="btn-check" name="mode" id="normal" autocomplete="off" checked>
                             <label class="btn btn-outline-primary" for="normal">
                               Normal