mirror of
https://github.com/alphaXiv/OpenResearch.git
synced 2026-10-02 09:44:51 +08:00
Myles AndersonandClaude Opus 4.8
9508aed337
The app previously followed the OS via `prefers-color-scheme` only, with no way to override or persist a theme. Add an Appearance section to Settings with a System/Light/Dark segmented control. - theme.ts: singleton store (useSyncExternalStore) that persists the preference to localStorage `orx:theme`, stamps `data-theme` on <html>, and keeps System mode live-syncing to the OS app-wide. - index.html: pre-paint inline script resolves the theme before first render to avoid a flash of the wrong palette. - styles.css: convert the two `@media (prefers-color-scheme: dark)` blocks to `:root[data-theme="dark"]` so JS drives the palette; add the segmented-control styles. - SettingsPage.tsx: AppearanceTab with an accessible radiogroup (roving tabindex + arrow-key navigation, focus follows selection). Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
35 lines
1.1 KiB
HTML
35 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<title>OpenResearch CLI</title>
|
|
<script>
|
|
// Resolve the theme before first paint to avoid a flash of the wrong palette.
|
|
// Storage key and resolution must match src/theme.ts.
|
|
(function () {
|
|
try {
|
|
var pref = localStorage.getItem("orx:theme") || "system";
|
|
var dark =
|
|
pref === "dark" ||
|
|
(pref !== "light" &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
document.documentElement.dataset.theme = dark ? "dark" : "light";
|
|
} catch (e) {
|
|
document.documentElement.dataset.theme = "light";
|
|
}
|
|
})();
|
|
</script>
|
|
<style>
|
|
/* Pre-CSS background; keep in sync with --base in src/styles.css. */
|
|
html { background: #ffffff; }
|
|
html[data-theme="dark"] { background: #0e0c0c; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|