A bigger face, and the theme where the settings are

The picture fills the account button now — twenty pixels of a face is a
smudge — and light or dark moved out of the sidebar corner into Account →
Profile, next to the typeface and how a chapter opens, which is the kind of
thing it is.

Moving it made it worth keeping: it was pure screen state, so every reload
landed on dark whatever had been chosen. It is a setting on the account now,
like the typeface, with a copy in the browser so the page does not start in
one theme and turn to the other once the account arrives.

The check I first wrote for the sidebar losing its switch could not fail. It
counts the buttons in that corner instead.

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

backend/server.js

@@ -316,6 +316,11 @@ const NOTE_FONTS = ["serif", "sans", "mono"];
  * lays out its pages, or unfolded in place under its own row. A phone has room
  * for neither, and falls back to filling the screen with a way back. */
 const CHAPTER_VIEWS = ["column", "inline"];
+/* Light or dark. On the account rather than in the browser, like the typeface —
+ * it is a choice about how your own notes look, and making it again on every
+ * device is making it badly. The browser keeps a copy of its own so a reload
+ * does not flash the other one while the account is being fetched. */
+const THEMES = ["dark", "light"];
 
 function readPreferences(raw) {
   let parsed = null;
@@ -326,9 +331,11 @@ function readPreferences(raw) {
   }
   const font = parsed?.noteFont;
   const view = parsed?.chapterView;
+  const theme = parsed?.theme;
   return {
     noteFont: NOTE_FONTS.includes(font) ? font : "serif",
     chapterView: CHAPTER_VIEWS.includes(view) ? view : "column",
+    theme: THEMES.includes(theme) ? theme : "dark",
   };
 }
 
@@ -988,13 +995,16 @@ app.put("/api/auth/profile", authMiddleware, (req, res) => {
 });
 
 app.put("/api/auth/preferences", authMiddleware, (req, res) => {
-  const { noteFont, chapterView } = req.body || {};
+  const { noteFont, chapterView, theme } = req.body || {};
   if (noteFont !== undefined && !NOTE_FONTS.includes(noteFont)) {
     return res.status(400).json({ error: `noteFont must be one of ${NOTE_FONTS.join(", ")}` });
   }
   if (chapterView !== undefined && !CHAPTER_VIEWS.includes(chapterView)) {
     return res.status(400).json({ error: `chapterView must be one of ${CHAPTER_VIEWS.join(", ")}` });
   }
+  if (theme !== undefined && !THEMES.includes(theme)) {
+    return res.status(400).json({ error: `theme must be one of ${THEMES.join(", ")}` });
+  }
   const current = readPreferences(
     db.prepare("SELECT preferences FROM users WHERE id = ?").get(req.userId)?.preferences
   );
@@ -1002,6 +1012,7 @@ app.put("/api/auth/preferences", authMiddleware, (req, res) => {
     ...current,
     ...(noteFont !== undefined ? { noteFont } : {}),
     ...(chapterView !== undefined ? { chapterView } : {}),
+    ...(theme !== undefined ? { theme } : {}),
   };
   db.prepare("UPDATE users SET preferences = ?, updated_at = datetime('now') WHERE id = ?")
     .run(JSON.stringify(next), req.userId);