fc75b27ac6
Some users want light. Dark stays the default/brand; light is a
first-class option.
• app.css: :root[data-theme="light"] overrides the @theme token values
(deeper cyan accent so it's legible as text on white; light elevation
ramp + text tiers + semantic colors). Every utility is var(--color-*),
so flipping the vars flips the whole app — no per-component work.
• lib/theme.svelte.ts: choice (light/dark/system) persisted to
localStorage; "system" follows prefers-color-scheme live; sets
<html data-theme> + syncs the mobile theme-color meta.
• index.html: inline pre-paint script resolves the theme before first
render to avoid a flash of the wrong palette.
• Settings: new Appearance section with a Light/Dark/System segmented
control + a hint line ("Following your device (dark)").
• EmojiButton: picker now follows the app theme (was hardcoded white).
• main.ts: side-effect import so the system-theme listener is always
live.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
56 lines
2.3 KiB
HTML
56 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
|
|
<title>kez-chat</title>
|
|
<meta name="description" content="End-to-end encrypted chat on top of KEZ — portable cross-app identity." />
|
|
|
|
<!-- Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). Loaded
|
|
here, not via CSS @import — see app.css note. -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" />
|
|
|
|
<!-- Browser tab + Android Chrome favicon -->
|
|
<link rel="icon" href="/favicon.ico" sizes="48x48" />
|
|
<link rel="icon" type="image/svg+xml" href="/kez-icon.svg" />
|
|
|
|
<!-- iOS Add-to-Home-Screen icon + status-bar styling -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
|
|
<!-- mobile-web-app-capable is the standard; apple-mobile-web-app-capable
|
|
is the legacy iOS-only variant (Chrome flags it as deprecated). -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="kez-chat" />
|
|
|
|
<!-- Web App Manifest (generated by vite-plugin-pwa) + Android theme color -->
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<meta name="theme-color" content="#0b0c0e" />
|
|
|
|
<!-- Resolve the theme before first paint to avoid a flash of the wrong
|
|
palette. Mirrors lib/theme.svelte.ts. -->
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var c = localStorage.getItem("kez-chat:theme") || "system";
|
|
var light =
|
|
c === "light" ||
|
|
(c === "system" &&
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-color-scheme: light)").matches);
|
|
document.documentElement.dataset.theme = light ? "light" : "dark";
|
|
} catch (e) {
|
|
document.documentElement.dataset.theme = "dark";
|
|
}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|