feat: add light/dark theme, browser language detection, localStorage persistence

- Create src/theme.js with CSS custom properties for dark/light palettes
  and a useTheme() hook that respects prefers-color-scheme and localStorage
- Replace all ~50+ inline hex colors in RiskRadar.jsx with semantic CSS vars
- Auto-detect browser language (de/en) via navigator.language
- Persist language and theme choices in localStorage
- Add theme toggle button (sun/moon) in top bar
- Listen to OS theme changes when no explicit user preference is saved
- Bump version to 1.3.0

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

Author: rdmueller

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-coding-risk-radar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "MECE risk framework for AI-generated code — interactive React component with AsciiDoc documentation",
   "type": "module",
   "scripts": {

src/RiskRadar.jsx

@@ -1,8 +1,9 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import Asciidoctor from "@asciidoctor/core";
 import T from "./i18n.js";
+import { useTheme } from "./theme.js";
 
-const VERSION = "1.2.0";
+const VERSION = "1.3.0";
 
 const TIER_BG = ["#10b981", "#f59e0b", "#f97316", "#ef4444"];
 const TYPE_COLORS = {
@@ -31,24 +32,24 @@ function RadarChart({ values, dimensions, size = 320 }) {
       {[1, 2, 3, 4, 5].map((l) => {
         const r = (maxR / levels) * l;
         const pts = Array.from({ length: n }, (_, i) => polarToCartesian(cx, cy, r, i * step));
-        return <polygon key={l} points={pts.map((p) => `${p.x},${p.y}`).join(" ")} fill="none" stroke={l === 5 ? "#475569" : "#334155"} strokeWidth={l === 5 ? 1.5 : 0.7} />;
+        return <polygon key={l} points={pts.map((p) => `${p.x},${p.y}`).join(" ")} fill="none" stroke={l === 5 ? "var(--grid-line-outer)" : "var(--grid-line)"} strokeWidth={l === 5 ? 1.5 : 0.7} />;
       })}
       {dimensions.map((_, i) => {
         const p = polarToCartesian(cx, cy, maxR, i * step);
-        return <line key={`a${i}`} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke="#334155" strokeWidth={0.7} />;
+        return <line key={`a${i}`} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke="var(--grid-line)" strokeWidth={0.7} />;
       })}
       {(() => {
         const pts = dimensions.map((d, i) => polarToCartesian(cx, cy, (maxR / levels) * (values[d.key] + 1), i * step));
         return (
           <>
             <polygon points={pts.map((p) => `${p.x},${p.y}`).join(" ")} fill={tc} fillOpacity={0.25} stroke={tc} strokeWidth={2.5} />
-            {pts.map((p, i) => <circle key={i} cx={p.x} cy={p.y} r={5} fill={tc} stroke="#0f172a" strokeWidth={1.5} />)}
+            {pts.map((p, i) => <circle key={i} cx={p.x} cy={p.y} r={5} fill={tc} stroke="var(--dot-stroke)" strokeWidth={1.5} />)}
           </>
         );
       })()}
       {dimensions.map((d, i) => {
         const lp = polarToCartesian(cx, cy, maxR + 26, i * step);
-        return <text key={`l${i}`} x={lp.x} y={lp.y} textAnchor="middle" dominantBaseline="middle" fill="#94a3b8" fontSize="11" fontWeight="600">{d.shortLabel}</text>;
+        return <text key={`l${i}`} x={lp.x} y={lp.y} textAnchor="middle" dominantBaseline="middle" fill="var(--text-secondary)" fontSize="11" fontWeight="600">{d.shortLabel}</text>;
       })}
     </svg>
   );
@@ -57,30 +58,30 @@ function RadarChart({ values, dimensions, size = 320 }) {
 function MitigationCard({ group, active, accent, t }) {
   const [open, setOpen] = useState(false);
   return (
-    <div style={{ border: `2px solid ${active ? accent : "#1e293b"}`, borderRadius: 12, background: active ? `${accent}10` : "#0f172a", padding: "12px 14px", opacity: active ? 1 : 0.5, transition: "all 0.3s" }}>
+    <div style={{ border: `2px solid ${active ? accent : "var(--border-subtle)"}`, borderRadius: 12, background: active ? `${accent}10` : "var(--bg-main)", padding: "12px 14px", opacity: active ? 1 : 0.5, transition: "all 0.3s" }}>
       <div onClick={() => active && setOpen(!open)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", cursor: active ? "pointer" : "default" }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
           <span style={{ fontSize: 18 }}>{group.icon}</span>
           <div>
-            <div style={{ fontWeight: 700, fontSize: 13, color: active ? "#f8fafc" : "#94a3b8" }}>{group.title}</div>
-            <div style={{ fontSize: 10, color: "#94a3b8" }}>{group.measures.length} {group.measures.length !== 1 ? t.measures : t.measure}</div>
+            <div style={{ fontWeight: 700, fontSize: 13, color: active ? "var(--text-heading)" : "var(--text-secondary)" }}>{group.title}</div>
+            <div style={{ fontSize: 10, color: "var(--text-secondary)" }}>{group.measures.length} {group.measures.length !== 1 ? t.measures : t.measure}</div>
           </div>
         </div>
-        {active && <span style={{ fontSize: 16, color: "#94a3b8", transform: open ? "rotate(180deg)" : "rotate(0)", transition: "transform 0.2s" }}>▾</span>}
+        {active && <span style={{ fontSize: 16, color: "var(--text-secondary)", transform: open ? "rotate(180deg)" : "rotate(0)", transition: "transform 0.2s" }}>▾</span>}
       </div>
       {active && open && (
         <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 6 }}>
           {group.measures.map((m, i) => {
             const tc = TYPE_COLORS[m.type];
             return (
-              <div key={i} style={{ background: "#1e293b", borderRadius: 8, padding: "8px 10px", borderLeft: `3px solid ${tc.color}` }}>
+              <div key={i} style={{ background: "var(--bg-card)", borderRadius: 8, padding: "8px 10px", borderLeft: `3px solid ${tc.color}` }}>
                 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
-                  <span style={{ fontWeight: 600, fontSize: 12, color: "#e2e8f0" }}>{m.name}</span>
+                  <span style={{ fontWeight: 600, fontSize: 12, color: "var(--text-primary)" }}>{m.name}</span>
                   <span style={{ fontSize: 8, fontWeight: 700, color: tc.color, background: tc.bg, padding: "2px 5px", borderRadius: 3, textTransform: "uppercase", letterSpacing: "0.05em" }}>
                     {t.typeBadges[m.type]}
                   </span>
                 </div>
-                <div style={{ fontSize: 11, color: "#94a3b8", marginTop: 3, lineHeight: 1.4 }}>{m.desc}</div>
+                <div style={{ fontSize: 11, color: "var(--text-secondary)", marginTop: 3, lineHeight: 1.4 }}>{m.desc}</div>
               </div>
             );
           })}
@@ -94,10 +95,10 @@ const adoc = Asciidoctor();
 
 const ADOC_SIDEBAR_STYLES = `
   .adoc-content p { margin: 0.5em 0; }
-  .adoc-content a { color: #38bdf8; text-decoration: underline; text-decoration-color: #38bdf844; }
-  .adoc-content a:hover { text-decoration-color: #38bdf8; }
-  .adoc-content strong { color: #e2e8f0; }
-  .adoc-content code { background: #1e293b; padding: 1px 4px; border-radius: 3px; font-size: 0.92em; }
+  .adoc-content a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); }
+  .adoc-content a:hover { text-decoration-color: var(--link); }
+  .adoc-content strong { color: var(--text-primary); }
+  .adoc-content code { background: var(--bg-card); padding: 1px 4px; border-radius: 3px; font-size: 0.92em; }
 `;
 
 function DocSidebar({ docs, open, onClose }) {
@@ -126,36 +127,36 @@ function DocSidebar({ docs, open, onClose }) {
       style={{
         position: "fixed", top: 0, right: 0, bottom: 0,
         width: open ? "min(480px, 85vw)" : "0",
-        background: "#111827", borderLeft: open ? "1px solid #334155" : "none",
+        background: "var(--bg-sidebar)", borderLeft: open ? "1px solid var(--border)" : "none",
         overflowY: "auto", overflowX: "hidden",
         transition: "width 0.3s ease",
         zIndex: 1000,
-        boxShadow: open ? "-8px 0 30px rgba(0,0,0,0.5)" : "none",
+        boxShadow: open ? "-8px 0 30px var(--shadow)" : "none",
       }}
     >
       {open && (
         <div style={{ padding: "24px 20px" }}>
           <style>{ADOC_SIDEBAR_STYLES}</style>
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
-            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: "#f8fafc" }}>📖 {docs.title}</h2>
-            <button onClick={onClose} style={{ background: "#1e293b", border: "1px solid #334155", borderRadius: 6, color: "#94a3b8", padding: "4px 10px", cursor: "pointer", fontSize: 12 }}>✕</button>
+            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: "var(--text-heading)" }}>{docs.title}</h2>
+            <button onClick={onClose} style={{ background: "var(--bg-card)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-secondary)", padding: "4px 10px", cursor: "pointer", fontSize: 12 }}>✕</button>
           </div>
           {rendered.map((sec) => (
             <div key={sec.id} style={{
               marginBottom: 28,
-              ...(sec.id === "disclaimer" ? { background: "#1e293b", borderRadius: 10, padding: "14px 16px", border: "1px solid #334155" } : {}),
+              ...(sec.id === "disclaimer" ? { background: "var(--bg-card)", borderRadius: 10, padding: "14px 16px", border: "1px solid var(--border)" } : {}),
             }}>
-              <h3 style={{ fontSize: 15, fontWeight: 700, color: sec.id === "disclaimer" ? "#f59e0b" : "#e2e8f0", margin: "0 0 10px", paddingBottom: 6, borderBottom: sec.id === "disclaimer" ? "none" : "1px solid #1e293b" }}>
+              <h3 style={{ fontSize: 15, fontWeight: 700, color: sec.id === "disclaimer" ? "#f59e0b" : "var(--text-primary)", margin: "0 0 10px", paddingBottom: 6, borderBottom: sec.id === "disclaimer" ? "none" : "1px solid var(--border-subtle)" }}>
                 {sec.id === "disclaimer" ? "\u26A0\uFE0F " : ""}{sec.title}
               </h3>
               <div
                 className="adoc-content"
-                style={{ fontSize: 13, color: "#94a3b8", lineHeight: 1.7 }}
+                style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.7 }}
                 dangerouslySetInnerHTML={{ __html: sec.html }}
               />
             </div>
           ))}
-          <div style={{ borderTop: "1px solid #1e293b", paddingTop: 16, marginTop: 8, fontSize: 11, color: "#94a3b8", textAlign: "center" }}>
+          <div style={{ borderTop: "1px solid var(--border-subtle)", paddingTop: 16, marginTop: 8, fontSize: 11, color: "var(--text-secondary)", textAlign: "center" }}>
             Generated with data from Veracode, CodeRabbit, BaxBench, Unit 42, Aikido Security, CSA, and others.
           </div>
         </div>
@@ -164,8 +165,18 @@ function DocSidebar({ docs, open, onClose }) {
   );
 }
 
+function detectBrowserLanguage() {
+  const nav = navigator.language || navigator.userLanguage || "";
+  return nav.startsWith("de") ? "de" : "en";
+}
+
 export default function RiskRadar() {
-  const [lang, setLang] = useState("de");
+  const [lang, setLang] = useState(() => {
+    const saved = localStorage.getItem("lang");
+    if (saved === "de" || saved === "en") return saved;
+    return detectBrowserLanguage();
+  });
+  const { theme, setTheme, isDark } = useTheme();
   const [docsOpen, setDocsOpen] = useState(false);
   const [values, setValues] = useState({ codeType: 0, language: 1, deployment: 0, data: 0, blastRadius: 0 });
   const t = T[lang];
@@ -175,33 +186,41 @@ export default function RiskRadar() {
   const set = (k, v) => setValues((p) => ({ ...p, [k]: v }));
   const activeCount = t.mitigations.filter((g) => g.tier <= ti + 1).reduce((s, g) => s + g.measures.length, 0);
 
+  const toggleLang = () => {
+    const next = lang === "de" ? "en" : "de";
+    setLang(next);
+    localStorage.setItem("lang", next);
+  };
+
+  const btnStyle = { background: "var(--bg-card)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-secondary)", padding: "4px 10px", cursor: "pointer", fontSize: 12, fontWeight: 600 };
+
   return (
-    <div style={{ fontFamily: "'Inter', system-ui, sans-serif", background: "#0f172a", color: "#e2e8f0", minHeight: "100vh", padding: "20px 16px", transition: "margin-right 0.3s", marginRight: docsOpen ? "min(480px, 85vw)" : 0 }}>
+    <div style={{ fontFamily: "'Inter', system-ui, sans-serif", background: "var(--bg-main)", color: "var(--text-primary)", minHeight: "100vh", padding: "20px 16px", transition: "margin-right 0.3s", marginRight: docsOpen ? "min(480px, 85vw)" : 0 }}>
       {/* Top bar */}
       <div style={{ display: "flex", justifyContent: "flex-end", gap: 6, marginBottom: 12, maxWidth: 800, margin: "0 auto 12px" }}>
-        <button
-          onClick={() => setLang(lang === "de" ? "en" : "de")}
-          style={{ background: "#1e293b", border: "1px solid #334155", borderRadius: 6, color: "#94a3b8", padding: "4px 10px", cursor: "pointer", fontSize: 12, fontWeight: 600 }}
-        >
-          🌐 {t.langSwitch}
+        <button onClick={() => setTheme(isDark ? "light" : "dark")} style={btnStyle} aria-label="Toggle theme">
+          {isDark ? "\u2600\uFE0F" : "\uD83C\uDF19"} {isDark ? "Light" : "Dark"}
+        </button>
+        <button onClick={toggleLang} style={btnStyle}>
+          {t.langSwitch}
         </button>
         <button
           onClick={() => setDocsOpen(!docsOpen)}
-          style={{ background: docsOpen ? `${tc}22` : "#1e293b", border: `1px solid ${docsOpen ? tc : "#334155"}`, borderRadius: 6, color: docsOpen ? "#f8fafc" : "#94a3b8", padding: "4px 10px", cursor: "pointer", fontSize: 12, fontWeight: 600 }}
+          style={{ ...btnStyle, background: docsOpen ? `${tc}22` : "var(--bg-card)", border: `1px solid ${docsOpen ? tc : "var(--border)"}`, color: docsOpen ? "var(--text-heading)" : "var(--text-secondary)" }}
         >
-          📖 {docsOpen ? t.closeButton : t.docsButton}
+          {docsOpen ? t.closeButton : t.docsButton}
         </button>
       </div>
 
-      <h1 style={{ fontSize: 22, fontWeight: 700, textAlign: "center", margin: "0 0 4px", color: "#f8fafc" }}>{t.title}</h1>
-      <p style={{ textAlign: "center", color: "#94a3b8", fontSize: 13, margin: "0 0 18px" }}>{t.subtitle}</p>
+      <h1 style={{ fontSize: 22, fontWeight: 700, textAlign: "center", margin: "0 0 4px", color: "var(--text-heading)" }}>{t.title}</h1>
+      <p style={{ textAlign: "center", color: "var(--text-secondary)", fontSize: 13, margin: "0 0 18px" }}>{t.subtitle}</p>
 
       {/* Presets */}
       <div style={{ display: "flex", flexWrap: "wrap", gap: 5, justifyContent: "center", marginBottom: 18 }}>
         {t.presets.map((p) => {
           const active = JSON.stringify(values) === JSON.stringify(p.values);
           return (
-            <button key={p.name} onClick={() => setValues(p.values)} style={{ padding: "4px 9px", fontSize: 11, borderRadius: 6, border: active ? `2px solid ${tc}` : "1px solid #334155", background: active ? `${tc}22` : "#1e293b", color: active ? "#f8fafc" : "#cbd5e1", cursor: "pointer", fontWeight: active ? 600 : 400, transition: "all 0.15s" }}>
+            <button key={p.name} onClick={() => setValues(p.values)} style={{ padding: "4px 9px", fontSize: 11, borderRadius: 6, border: active ? `2px solid ${tc}` : "1px solid var(--border)", background: active ? `${tc}22` : "var(--bg-card)", color: active ? "var(--text-heading)" : "var(--text-muted)", cursor: "pointer", fontWeight: active ? 600 : 400, transition: "all 0.15s" }}>
               {p.name}
             </button>
           );
@@ -216,7 +235,7 @@ export default function RiskRadar() {
           <span style={{ fontSize: 26, fontWeight: 800, color: tc }}>{ti + 1}</span>
           <div>
             <div style={{ fontWeight: 700, fontSize: 14, color: tc }}>{tier.label}</div>
-            <div style={{ fontSize: 11, color: "#94a3b8" }}>{tier.desc}</div>
+            <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>{tier.desc}</div>
           </div>
         </div>
 
@@ -232,7 +251,7 @@ export default function RiskRadar() {
                   <span style={{ fontSize: 10, color: sc, fontWeight: 600 }}>{dim.levels[v]}</span>
                 </div>
                 <input type="range" min={0} max={4} step={1} value={v} onChange={(e) => set(dim.key, parseInt(e.target.value))} style={{ width: "100%", accentColor: sc, height: 5, cursor: "pointer" }} />
-                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 9, color: "#94a3b8", marginTop: 1 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 9, color: "var(--text-secondary)", marginTop: 1 }}>
                   <span>{t.low}</span><span>{t.high}</span>
                 </div>
               </div>
@@ -241,30 +260,30 @@ export default function RiskRadar() {
         </div>
 
         {/* Mitigations */}
-        <div style={{ width: "100%", maxWidth: 500, borderTop: "1px solid #1e293b", paddingTop: 18 }}>
+        <div style={{ width: "100%", maxWidth: 500, borderTop: "1px solid var(--border-subtle)", paddingTop: 18 }}>
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
             <h2 style={{ fontSize: 16, fontWeight: 700, margin: 0 }}>{t.mitigationHeading}</h2>
-            <span style={{ fontSize: 11, color: "#94a3b8" }}>{activeCount} {t.active}</span>
+            <span style={{ fontSize: 11, color: "var(--text-secondary)" }}>{activeCount} {t.active}</span>
           </div>
           <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 12 }}>
             {Object.entries(TYPE_COLORS).map(([key, c]) => (
               <div key={key} style={{ display: "flex", alignItems: "center", gap: 4 }}>
                 <div style={{ width: 9, height: 9, borderRadius: 2, background: c.color }} />
-                <span style={{ fontSize: 10, color: "#94a3b8" }}>{t.typeBadges[key]}</span>
+                <span style={{ fontSize: 10, color: "var(--text-secondary)" }}>{t.typeBadges[key]}</span>
               </div>
             ))}
           </div>
-          <div style={{ background: "#1e293b", borderRadius: 8, padding: "8px 12px", marginBottom: 14, fontSize: 11, color: "#94a3b8", lineHeight: 1.5, borderLeft: `3px solid ${tc}` }}>
-            <strong style={{ color: "#e2e8f0" }}>{t.cumulative}:</strong> {t.cumulativeNote(ti, t.mitigations[ti].title)}
+          <div style={{ background: "var(--bg-card)", borderRadius: 8, padding: "8px 12px", marginBottom: 14, fontSize: 11, color: "var(--text-secondary)", lineHeight: 1.5, borderLeft: `3px solid ${tc}` }}>
+            <strong style={{ color: "var(--text-primary)" }}>{t.cumulative}:</strong> {t.cumulativeNote(ti, t.mitigations[ti].title)}
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
             {t.mitigations.map((g) => <MitigationCard key={g.tier} group={g} active={g.tier <= ti + 1} accent={TIER_BG[g.tier - 1]} t={t} />)}
           </div>
         </div>
 
-        <div style={{ marginTop: 24, fontSize: 10, color: "#94a3b8", textAlign: "center", lineHeight: 1.8 }}>
-          <div>v{VERSION} · <a href="https://github.com/LLM-Coding/vibe-coding-risk-radar" target="_blank" rel="noopener" style={{ color: "#94a3b8" }}>{t.footer.github}</a> · <a href={`docs/risk-radar${lang === "en" ? "-en" : ""}.html`} target="_blank" rel="noopener" style={{ color: "#94a3b8" }}>{t.footer.fullDocs}</a></div>
-          <div>{t.footer.madeBy} <a href="https://www.linkedin.com/in/rdmueller" target="_blank" rel="noopener" style={{ color: "#94a3b8" }}>Ralf D. Müller</a></div>
+        <div style={{ marginTop: 24, fontSize: 10, color: "var(--text-secondary)", textAlign: "center", lineHeight: 1.8 }}>
+          <div>v{VERSION} · <a href="https://github.com/LLM-Coding/vibe-coding-risk-radar" target="_blank" rel="noopener" style={{ color: "var(--text-secondary)" }}>{t.footer.github}</a> · <a href={`docs/risk-radar${lang === "en" ? "-en" : ""}.html`} target="_blank" rel="noopener" style={{ color: "var(--text-secondary)" }}>{t.footer.fullDocs}</a></div>
+          <div>{t.footer.madeBy} <a href="https://www.linkedin.com/in/rdmueller" target="_blank" rel="noopener" style={{ color: "var(--text-secondary)" }}>Ralf D. Müller</a></div>
         </div>
       </div>