2026-07-29 13:54:34 +02:00
<!doctype html>
< html lang = "en" >
< head > < meta charset = "utf-8" > < title > Theseus — Settings< / title >
< style >
2026-07-30 22:00:01 +02:00
:root{ color-scheme: light dark; --bg:#0b0e14; --panel:#141a24; --line:rgba(255,255,255,.09);
2026-07-29 13:54:34 +02:00
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; }
*{box-sizing:border-box}
2026-07-30 19:29:32 +02:00
body{margin:0;height:100vh;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app{display:flex;height:100vh}
/* left sidebar menu */
.side{flex:none;width:220px;background:#0e131c;border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:2px}
.brand{font-weight:700;color:var(--acid);font-size:15px;padding:4px 12px 16px}
.side a{display:block;padding:9px 12px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:14px;cursor:pointer}
.side a:hover{background:#ffffff0a;color:var(--ink)}
.side a.active{background:rgba(214,255,61,.12);color:var(--acid)}
/* content */
.content{flex:1;overflow-y:auto;padding:2.4rem 2.4rem 4rem}
section{max-width:640px}
h1{font-size:1.4rem;margin:0 0 .2rem}
.lede{color:var(--mut);margin:0 0 1.8rem;font-size:13.5px}
2026-07-29 13:54:34 +02:00
.row{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);
2026-07-30 19:29:32 +02:00
border-radius:12px;padding:14px 18px;margin-bottom:10px}
2026-07-29 13:54:34 +02:00
.row .txt{flex:1}
2026-07-30 19:29:32 +02:00
.row .t{font-weight:600}
2026-07-29 13:54:34 +02:00
.row .d{color:var(--mut);font-size:13px;margin-top:2px}
2026-07-30 19:29:32 +02:00
.ctl{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.ctl .coords{display:flex;gap:6px}
select,.ctl input{background:#1b2330;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;outline:none}
select:focus,.ctl input:focus{border-color:#4b7bec}
.ctl input{width:150px} .ctl .coords input{width:92px}
2026-07-30 20:58:45 +02:00
code{font-family:ui-monospace,monospace;font-size:12px;background:#0e131b;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#bfeae4}
.addeng{display:flex;gap:6px} .addeng input{flex:1;background:#1b2330;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;outline:none}
.addeng input:focus{border-color:#4b7bec}
.btn{border:1px solid #d6ff3d55;background:rgba(214,255,61,.12);color:#eaffb0;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
.btn:hover{background:rgba(214,255,61,.22)}
.ceng{display:flex;align-items:center;gap:8px;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px}
2026-07-30 22:09:26 +02:00
.ceng .cs{font-size:14px;flex:none}
2026-07-30 22:55:52 +02:00
/* engine checklist */
.eng{display:flex;align-items:center;gap:10px;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px}
.eng .eic{width:18px;height:18px;flex:none;display:grid;place-items:center}
.eng .eic .ei{width:16px;height:16px;border-radius:3px} .eng .eic .es{font-size:14px}
.eng .enm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng .cx{cursor:pointer;color:var(--dim);border:none;background:transparent;font-size:13px} .eng .cx:hover{color:#f6768a}
.sw.sm{width:38px;height:22px} .sw.sm .knob{width:15px;height:15px} .sw.sm input:checked + .track .knob{transform:translateX(16px)}
2026-07-30 20:58:45 +02:00
.ceng .cn{font-weight:600} .ceng .cu{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ceng .cx{cursor:pointer;color:#8b98a9;border:none;background:transparent;font-size:13px} .ceng .cx:hover{color:#f6768a}
.cempty{color:var(--dim);font-size:12.5px}
2026-07-29 13:54:34 +02:00
/* toggle */
.sw{position:relative;width:46px;height:26px;flex:none;cursor:pointer}
.sw input{opacity:0;width:0;height:0}
.track{position:absolute;inset:0;background:#2b3444;border:1px solid var(--line);border-radius:999px;transition:.15s}
.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8b98a9;transition:.15s}
.sw input:checked + .track{background:rgba(214,255,61,.25);border-color:#d6ff3d55}
.sw input:checked + .track .knob{transform:translateX(20px);background:var(--acid)}
.note{color:var(--dim);font-size:12.5px;margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
2026-07-30 22:00:01 +02:00
/* light theme (placed last so these win over the dark base rules) */
@media (prefers-color-scheme: light){
:root{ --bg:#eef0f4; --panel:#ffffff; --line:rgba(0,0,0,.11); --ink:#1a1f28; --mut:#4a5262; --dim:#7b8494; }
.side{ background:#f6f8fb; }
.side a:hover{ background:rgba(0,0,0,.05); }
select, .ctl input, .addeng input{ background:#f1f3f7; }
.track{ background:#c8cfdb; }
.knob{ background:#8a93a2; }
2026-07-30 22:55:52 +02:00
code, .ceng, .eng{ background:#eef1f6; }
2026-07-30 22:00:01 +02:00
}
2026-07-29 13:54:34 +02:00
< / style > < / head >
< body >
2026-07-30 19:29:32 +02:00
< div class = "app" >
< nav class = "side" >
< div class = "brand" > ⛓ Theseus< / div >
< a data-sec = "general" class = "active" > General< / a >
< a data-sec = "performance" > Performance< / a >
< a data-sec = "privacy" > Privacy< / a >
< a data-sec = "fingerprint" > Anti-fingerprinting< / a >
< / nav >
< div class = "content" >
<!-- GENERAL -->
< section id = "general" >
< h1 > General< / h1 >
< p class = "lede" > Changes apply immediately and are saved for next time.< / p >
2026-07-30 22:00:01 +02:00
< div class = "row" >
< div class = "txt" > < div class = "t" > Appearance< / div > < div class = "d" > Light, dark, or follow your system theme.< / div > < / div >
< div class = "ctl" > < select id = "theme" > < option value = "dark" > Dark< / option > < option value = "light" > Light< / option > < option value = "system" > System< / option > < / select > < / div >
< / div >
2026-07-30 19:29:32 +02:00
< div class = "row" >
2026-07-30 22:55:52 +02:00
< div class = "txt" > < div class = "t" > Default search engine< / div > < div class = "d" > Used when you type a search into the address bar.< / div > < / div >
2026-07-30 19:29:32 +02:00
< div class = "ctl" > < select id = "searchEngine" > < / select > < / div >
2026-07-29 13:54:34 +02:00
< / div >
2026-07-30 22:55:52 +02:00
< div class = "row" style = "flex-direction:column;align-items:stretch;gap:10px" >
< div class = "txt" > < div class = "t" > Search engines< / div >
< div class = "d" > Tick which appear in the toolbar's search dropdown. Add your own with a URL containing < code > %s< / code > — e.g. < code > https://searx.be/search?q=%s< / code > . Theseus also offers to add a site's own search when you visit one.< / div > < / div >
< div id = "engineList" > < / div >
2026-07-30 20:58:45 +02:00
< div class = "addeng" >
2026-07-30 22:09:26 +02:00
< input id = "engSym" placeholder = "🔍" style = "max-width:52px;text-align:center;flex:none" >
2026-07-30 20:58:45 +02:00
< input id = "engName" placeholder = "Name (e.g. SearXNG)" >
< input id = "engUrl" placeholder = "https://example.com/search?q=%s" >
< button id = "engAdd" class = "btn" > Add< / button >
< / div >
< / div >
2026-07-30 19:29:32 +02:00
< div class = "row" >
< div class = "txt" > < div class = "t" > Reopen tabs on launch< / div > < div class = "d" > Restore the tabs from your last session when Theseus starts.< / div > < / div >
< label class = "sw" > < input type = "checkbox" id = "restoreSession" > < span class = "track" > < span class = "knob" > < / span > < / span > < / label >
2026-07-29 13:54:34 +02:00
< / div >
2026-07-30 19:29:32 +02:00
< / section >
<!-- PERFORMANCE -->
< section id = "performance" hidden >
< h1 > Performance< / h1 >
< p class = "lede" > Keep Theseus light on resources.< / p >
< div class = "row" >
< div class = "txt" > < div class = "t" > Throttle inactive tabs< / div > < div class = "d" > Background and inactive tabs use far less CPU. Recommended.< / div > < / div >
< label class = "sw" > < input type = "checkbox" id = "backgroundThrottle" > < span class = "track" > < span class = "knob" > < / span > < / span > < / label >
< / div >
< / section >
<!-- PRIVACY -->
< section id = "privacy" hidden >
< h1 > Privacy< / h1 >
< p class = "lede" > Reduce tracking and lock down device access.< / p >
< div class = "row" >
2026-07-30 22:00:01 +02:00
< div class = "txt" > < div class = "t" > WebRTC IP policy< / div >
< div class = "d" > Controls which IP addresses WebRTC may reveal — the same thing the "WebRTC Network Limiter" extension does, built in. < b > Public interface only< / b > hides your local IP; < b > Disable non-proxied UDP< / b > is strongest. Tor forces the strongest automatically.< / div > < / div >
< div class = "ctl" > < select id = "webrtcMode" >
< option value = "default" > Allow all (default)< / option >
< option value = "public_only" > Public interface only< / option >
< option value = "public_private" > Public + private interfaces< / option >
< option value = "disable_udp" > Disable non-proxied UDP< / option >
< / select > < / div >
2026-07-30 19:29:32 +02:00
< / div >
< div class = "row" >
< div class = "txt" > < div class = "t" > Block camera< / div > < div class = "d" > Deny camera by default — also hides its name from fingerprinting.< / div > < / div >
< label class = "sw" > < input type = "checkbox" id = "blockCamera" > < span class = "track" > < span class = "knob" > < / span > < / span > < / label >
< / div >
< div class = "row" >
< div class = "txt" > < div class = "t" > Block microphone< / div > < div class = "d" > Deny microphone by default — also hides its name from fingerprinting.< / div > < / div >
< label class = "sw" > < input type = "checkbox" id = "blockMicrophone" > < span class = "track" > < span class = "knob" > < / span > < / span > < / label >
< / div >
< / section >
<!-- ANTI - FINGERPRINTING -->
< section id = "fingerprint" hidden >
< h1 > Anti-fingerprinting< / h1 >
< p class = "lede" > For each, choose < b > Show< / b > (real), < b > Hide< / b > (neutral value), < b > Spoof< / b > (an automatic decoy), or < b > Manual< / b > (set your own).< / p >
< div class = "row" >
< div class = "txt" > < div class = "t" > Timezone< / div > < div class = "d" > What sites read via JavaScript (Intl / Date).< / div > < / div >
< div class = "ctl" >
< select id = "timezoneMode" > < option value = "show" > Show real< / option > < option value = "hide" > Hide (UTC)< / option > < option value = "spoof" > Spoof (auto)< / option > < option value = "manual" > Manual…< / option > < / select >
< input id = "timezoneValue" placeholder = "e.g. Europe/Berlin" hidden >
< / div >
< / div >
< div class = "row" >
< div class = "txt" > < div class = "t" > Language< / div > < div class = "d" > navigator.language and the Accept-Language header.< / div > < / div >
< div class = "ctl" >
< select id = "languageMode" > < option value = "show" > Show real< / option > < option value = "hide" > Hide (en-US)< / option > < option value = "spoof" > Spoof (auto)< / option > < option value = "manual" > Manual…< / option > < / select >
< input id = "languageValue" placeholder = "e.g. de-DE" hidden >
< / div >
< / div >
< div class = "row" >
< div class = "txt" > < div class = "t" > Location< / div > < div class = "d" > < b > Hide< / b > denies geolocation; < b > Spoof< / b > /< b > Manual< / b > report coordinates you choose.< / div > < / div >
< div class = "ctl" >
< select id = "locationMode" > < option value = "show" > Show real< / option > < option value = "hide" > Hide (block)< / option > < option value = "spoof" > Spoof (auto)< / option > < option value = "manual" > Manual…< / option > < / select >
< div class = "coords" id = "locationCoords" hidden >
< input id = "locationLat" placeholder = "lat" > < input id = "locationLon" placeholder = "lon" >
< / div >
< / div >
< / div >
< div class = "note" > These reduce tracking and hide your IP, but a custom browser can still be fingerprinted. For maximum anonymity, use the Tor Browser.< / div >
< / section >
2026-07-29 13:54:34 +02:00
< / div >
< / div >
< script >
const C = window.cfg;
2026-07-30 19:29:32 +02:00
// sidebar navigation
const sections = ["general", "performance", "privacy", "fingerprint"];
document.querySelectorAll(".side a").forEach((a) => a.onclick = () => {
document.querySelectorAll(".side a").forEach((x) => x.classList.toggle("active", x === a));
for (const s of sections) document.getElementById(s).hidden = (s !== a.dataset.sec);
});
2026-07-30 22:00:01 +02:00
const TOGGLES = ["restoreSession", "backgroundThrottle", "blockCamera", "blockMicrophone"];
2026-07-29 13:54:34 +02:00
C.get().then((s) => {
2026-07-30 19:29:32 +02:00
for (const k of TOGGLES) {
const el = document.getElementById(k); if (!el) continue;
2026-07-29 13:54:34 +02:00
el.checked = !!s[k];
el.addEventListener("change", () => C.set(k, el.checked));
}
2026-07-30 20:58:45 +02:00
// search engines: default picker + custom-engine list + add form
const sel = document.getElementById("searchEngine");
const esc = (s) => String(s || "").replace(/< /g, "< ");
2026-07-30 22:55:52 +02:00
const engIcon = (e) => e.favicon
? `< img class = "ei" src = "${esc(e.favicon)}" onerror = "this.replaceWith(Object.assign(document.createElement('span'),{className:'es',textContent:'${e.sym || " 🔍 " } ' } ) ) " > `
: `< span class = "es" > ${e.sym || "🔍"}< / span > `;
2026-07-30 20:58:45 +02:00
function renderEngines(d) {
2026-07-30 22:55:52 +02:00
// default engine: pick from the ENABLED engines (those shown in the dropdown)
const enabled = d.engines.filter((e) => e.enabled);
sel.innerHTML = enabled.map((e) => `< option value = "${e.id}" > ${(e.sym ? e.sym + " " : "")}${esc(e.name)}< / option > `).join("");
2026-07-30 19:29:32 +02:00
sel.value = d.current;
2026-07-30 22:55:52 +02:00
// unified checklist: built-in engines get an enable toggle; custom get a remove ✕
const list = document.getElementById("engineList");
list.innerHTML = d.engines.map((e) => `< div class = "eng" > < span class = "eic" > ${engIcon(e)}< / span > < span class = "enm" > ${esc(e.name)}< / span > ` +
(e.builtin
? `< label class = "sw sm" > < input type = "checkbox" data-id = "${e.id}" $ { e . enabled ? " checked " : " " } > < span class = "track" > < span class = "knob" > < / span > < / span > < / label > `
: `< button class = "cx" data-id = "${e.id}" title = "Remove" > ✕< / button > `) + `< / div > `).join("");
list.querySelectorAll('input[type="checkbox"]').forEach((cb) => cb.onchange = () => C.setEngineEnabled(cb.dataset.id, cb.checked).then(renderEngines));
2026-07-30 20:58:45 +02:00
list.querySelectorAll(".cx").forEach((b) => b.onclick = () => C.removeEngine(b.dataset.id).then(renderEngines));
}
sel.onchange = () => C.set("searchEngine", sel.value);
2026-07-30 22:00:01 +02:00
// appearance (theme)
const th = document.getElementById("theme");
th.value = s.theme || "dark";
th.onchange = () => C.set("theme", th.value);
// WebRTC IP policy
const wm = document.getElementById("webrtcMode");
wm.value = s.webrtcMode || "public_only";
wm.onchange = () => C.set("webrtcMode", wm.value);
2026-07-30 20:58:45 +02:00
document.getElementById("engAdd").onclick = () => {
const name = document.getElementById("engName").value.trim();
const url = document.getElementById("engUrl").value.trim();
2026-07-30 22:09:26 +02:00
const sym = document.getElementById("engSym").value.trim();
2026-07-30 20:58:45 +02:00
if (!name || !url.includes("%s")) { alert("Enter a name and a URL containing %s (where the query goes)."); return; }
2026-07-30 22:09:26 +02:00
C.addEngine({ name, url, sym }).then((d) => {
document.getElementById("engName").value = ""; document.getElementById("engUrl").value = ""; document.getElementById("engSym").value = "";
renderEngines(d);
});
2026-07-30 20:58:45 +02:00
};
C.engines().then(renderEngines);
2026-07-30 19:29:32 +02:00
// anti-fingerprinting mode selectors, with value field(s) shown on "manual"
const bind = (mode, showValIf, apply) => {
const m = document.getElementById(mode);
2026-07-29 13:54:34 +02:00
m.value = s[mode] || "show";
2026-07-30 19:29:32 +02:00
apply(m.value === "manual");
m.addEventListener("change", () => { C.set(mode, m.value); apply(m.value === "manual"); });
};
const val = (id) => { const v = document.getElementById(id); v.value = s[id] ?? ""; v.addEventListener("change", () => C.set(id, v.value.trim())); return v; };
const tzV = val("timezoneValue"), lgV = val("languageValue"), laV = val("locationLat"), loV = val("locationLon");
bind("timezoneMode", null, (manual) => tzV.hidden = !manual);
bind("languageMode", null, (manual) => lgV.hidden = !manual);
bind("locationMode", null, (manual) => document.getElementById("locationCoords").hidden = !manual);
2026-07-29 13:54:34 +02:00
});
< / script >
< / body >
< / html >
