Bugfixes

frontend/src/components/InstellingenModal.jsx

@@ -1,6 +1,5 @@
 import { useApp } from "../context/AppContext.jsx";
-
-const TEAL = "linear-gradient(135deg, #7c3aed, #a855f7)";
+import { THEMAS } from "../constants/themas.js";
 
 const BACKUP_ICON = (
   <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
@@ -35,7 +34,7 @@ function ActionRow({ icon, title, description, onClick }) {
 }
 
 export default function InstellingenModal({ onClose }) {
-  const { T, darkMode, setDarkMode, doBackup, doRestore } = useApp();
+  const { T, darkMode, setDarkMode, thema, setThema, doBackup, doRestore } = useApp();
 
   return (
     <div
@@ -70,21 +69,63 @@ export default function InstellingenModal({ onClose }) {
           padding: "4px 0 16px",
         }}>
           <span style={{ fontWeight: 600, fontSize: 14 }}>Dark mode</span>
-          <div
+          <button
+            type="button"
+            role="switch"
+            aria-checked={darkMode}
+            aria-label="Donkere modus"
             onClick={() => setDarkMode((d) => !d)}
             style={{
               width: 44, height: 24, borderRadius: 12, cursor: "pointer",
-              background: darkMode ? TEAL : "#334155",
+              background: darkMode ? T.accent : "#334155",
+              border: "none", padding: 0,
               position: "relative", transition: "background 0.2s", flexShrink: 0,
             }}
           >
-            <div style={{
+            <span style={{
               position: "absolute", top: 3, borderRadius: "50%",
               width: 18, height: 18, background: "#fff",
               left: darkMode ? 23 : 3,
               transition: "left 0.2s",
               boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
             }} />
+          </button>
+        </div>
+
+        {/* Kleurthema */}
+        <div style={{ padding: "0 0 18px" }}>
+          <div style={{
+            display: "flex", alignItems: "baseline", justifyContent: "space-between",
+            gap: 10, marginBottom: 10,
+          }}>
+            <span style={{ fontWeight: 600, fontSize: 14 }}>Kleurthema</span>
+            <span style={{ fontSize: 12, color: T.muted }}>{T.themaNaam}</span>
+          </div>
+          {/* Drie kolommen: negen thema's vullen zo precies drie rijen, zonder
+              een halve rij onderaan. */}
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
+            {THEMAS.map((t) => {
+              const gekozen = t.id === thema;
+              return (
+                <button
+                  key={t.id}
+                  type="button"
+                  onClick={() => setThema(t.id)}
+                  title={t.naam}
+                  aria-label={`Thema ${t.naam}`}
+                  aria-pressed={gekozen}
+                  style={{
+                    height: 30, borderRadius: 9, cursor: "pointer", padding: 0,
+                    background: `linear-gradient(135deg, ${t.hoofd}, ${t.licht})`,
+                    // De gekozen kleur krijgt een ring in de kaartkleur plus een
+                    // rand, zodat hij ook opvalt als het thema zelf licht is.
+                    border: `2px solid ${gekozen ? T.text : "transparent"}`,
+                    boxShadow: gekozen ? `0 0 0 2px ${T.accentLicht}` : "none",
+                    transition: "box-shadow 0.15s, border-color 0.15s",
+                  }}
+                />
+              );
+            })}
           </div>
         </div>