Donker thema toevoegen via gebruikersmenu rechtsboven

Klik op je naam rechtsboven om een menu te openen met een schakelaar
voor het donkere thema. De keuze wordt per browser onthouden.

- global.css: donkere kleurvariabelen, alleen op scherm (afdrukken blijft licht)
- base.html: gebruikersmenu met themaschakelaar
- vaste witte achtergronden en pastelkleuren op enkele pagina's
  volgen nu het thema

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

templates/base.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}PIVOT{% endblock %} – {{ school_name_short|upper or 'PIVOT' }}</title>
+    <script>
+        /* Thema meteen toepassen (vóór het tekenen) zodat de pagina niet eerst licht oplicht */
+        try { if (localStorage.getItem('pivot.thema') === 'donker') document.documentElement.dataset.theme = 'dark'; } catch (e) { /* geen opslag */ }
+    </script>
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='pivot_mark.png') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}">
     {% block head %}{% endblock %}
@@ -44,7 +48,7 @@
                         onchange="if (this.value) location.href = this.value">
                     <option value="" selected>🏫 {{ school.naam }} ⇄</option>
                     {% for s in andere_scholen %}
-                    <option value="{{ url_for('scholen.wissel', code=s.code) }}" style="color:#1e293b">{{ s.naam }}</option>
+                    <option value="{{ url_for('scholen.wissel', code=s.code) }}" style="color:var(--text)">{{ s.naam }}</option>
                     {% endfor %}
                 </select>
                 {% else %}
@@ -52,7 +56,22 @@
                 {% endif %}
             {% endif %}
             {% if session.get('user') %}
-                <span class="header-user">👤 {{ session.get('user') }}</span>
+                <div class="user-menu" id="user-menu">
+                    <button type="button" class="header-btn header-user user-menu-btn" id="user-menu-btn"
+                            aria-haspopup="true" aria-expanded="false" aria-controls="user-menu-panel" title="Gebruikersmenu">
+                        👤 <span class="user-naam">{{ session.get('user') }}</span> <span class="caret">▼</span>
+                    </button>
+                    <div class="user-menu-panel" id="user-menu-panel">
+                        <div class="user-menu-head">Aangemeld als <strong>{{ session.get('user') }}</strong></div>
+                        <label class="switch-row" for="thema-schakelaar">
+                            <span>🌙 Donker thema</span>
+                            <span class="switch">
+                                <input type="checkbox" id="thema-schakelaar">
+                                <span class="slider"></span>
+                            </span>
+                        </label>
+                    </div>
+                </div>
             {% endif %}
             <form action="{{ url_for('auth.logout') }}" method="get">
                 <button type="submit" class="logout-btn">Uitloggen</button>
@@ -134,6 +153,35 @@
             });
         }, 6000);
 
+        // Gebruikersmenu rechtsboven + donker thema aan/uit (onthouden in deze browser)
+        (function () {
+            const menu = document.getElementById('user-menu');
+            if (!menu) return;
+            const knop = document.getElementById('user-menu-btn');
+            const schakelaar = document.getElementById('thema-schakelaar');
+            function zetOpen(open) {
+                menu.classList.toggle('open', open);
+                knop.setAttribute('aria-expanded', open);
+            }
+            knop.addEventListener('click', function (e) {
+                e.stopPropagation();
+                zetOpen(!menu.classList.contains('open'));
+            });
+            document.addEventListener('click', function (e) {
+                if (!menu.contains(e.target)) zetOpen(false);
+            });
+            document.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape') zetOpen(false);
+            });
+
+            schakelaar.checked = document.documentElement.dataset.theme === 'dark';
+            schakelaar.addEventListener('change', function () {
+                if (schakelaar.checked) document.documentElement.dataset.theme = 'dark';
+                else delete document.documentElement.dataset.theme;
+                try { localStorage.setItem('pivot.thema', schakelaar.checked ? 'donker' : 'licht'); } catch (err) { /* negeren */ }
+            });
+        })();
+
         // Escape sluit open modals
         document.addEventListener('keydown', function (e) {
             if (e.key !== 'Escape') return;