wkhandClaude Opus 5.5
e14bada114
The app becomes a Rails 8 application; the Vue frontend moves to app/frontend and is served through vite_rails. - Without an account documents stay in the browser (IndexedDB). Sign-in is by magic link or the 6-digit code from the same mail; afterwards local documents can be uploaded into the account. - Server documents (/d/<id>) with versioned saves and a single-editor lock per browser tab; others see them read-only and follow by polling. - Sharing via link (works without an account) and via e-mail invitation, roles viewer/editor; the owner manages links and people. - Store gains a read-only mode that blocks all content changes. - Solid Queue, Cache and Cable share the one PostgreSQL database. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { ref, watchEffect } from 'vue';
|
|
|
|
type Mode = 'system' | 'light' | 'dark';
|
|
|
|
const KEY = 'numolus:theme';
|
|
/** Key used before the rename to numolus -- still read as a fallback. */
|
|
const LEGACY_KEY = 'numbers-study:theme';
|
|
const stored =
|
|
((localStorage.getItem(KEY) ?? localStorage.getItem(LEGACY_KEY)) as Mode | null) ??
|
|
'system';
|
|
const mode = ref<Mode>(stored);
|
|
|
|
watchEffect(() => {
|
|
const root = document.documentElement;
|
|
if (mode.value === 'system') root.removeAttribute('data-theme');
|
|
else root.setAttribute('data-theme', mode.value);
|
|
try {
|
|
localStorage.setItem(KEY, mode.value);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
});
|
|
|
|
/** True when the effective theme is dark (used to recolour Chart.js). */
|
|
function isDarkNow(): boolean {
|
|
if (mode.value === 'dark') return true;
|
|
if (mode.value === 'light') return false;
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
}
|
|
|
|
export function useTheme() {
|
|
function cycle() {
|
|
mode.value =
|
|
mode.value === 'system' ? 'light' : mode.value === 'light' ? 'dark' : 'system';
|
|
}
|
|
return { mode, cycle, isDarkNow };
|
|
}
|