feat(demo): start the demo in the round Fjord Night theme

A visitor without a chosen theme on this device sees the demo in
fjord-night instead of the square default; a chosen theme stays and
real installations are unchanged.

Release v0.27.0.

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

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mindsift-frontend",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.26.1",
+      "version": "0.27.0",
       "license": "Unlicense",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.26.1",
+  "version": "0.27.0",
   "license": "Unlicense",
   "type": "module",
   "scripts": {

frontend/src/App.tsx

@@ -42,6 +42,8 @@ import {
   AVAILABLE_THEMES,
   customThemeOption,
   initThemeOnBoot,
+  hasChosenTheme,
+  DEMO_THEME,
   watchSystemScheme,
   isCustomThemeId,
   setActiveTheme as applyTheme,
@@ -595,6 +597,13 @@ export const App: React.FC = () => {
     );
   }, [authStatus.demoMode, authStatus.demoResetInSeconds]);
 
+  // Demo: first visit on this device starts with a round theme instead of the square default
+  useEffect(() => {
+    if (!authStatus.demoMode || hasChosenTheme()) return;
+    applyTheme(DEMO_THEME);
+    setActiveThemeState(DEMO_THEME);
+  }, [authStatus.demoMode]);
+
   // Web Share Target: import shared thoughts from external apps
   useEffect(() => {
     if (!user) return;

frontend/src/lib/theme.ts

@@ -397,6 +397,14 @@ export function getActiveTheme(): ThemeId {
   return 'dark';
 }
 
+/** True once a theme was chosen on this device (the default 'dark' is not stored until then) */
+export function hasChosenTheme(): boolean {
+  return load(THEME_STORAGE_KEY) !== null;
+}
+
+// The demo starts with a round theme, so visitors see the rounded look; a chosen theme stays
+export const DEMO_THEME: ThemeId = 'fjord-night';
+
 // customCss is required for custom themes and ignored for built-in ones
 export function setActiveTheme(themeId: ThemeId, customCss?: string): void {
   const css = isCustomThemeId(themeId) ? customCss ?? null : null;