Add dark mode and compact chapter links

src/App.tsx

@@ -19,6 +19,7 @@ const timelineLimit = 200
 type ViewMode = 'page' | 'study' | 'notes' | 'compare'
 type StrongDisplayMode = 'off' | 'highlight' | 'numbers'
 type PageMotion = 'idle' | 'turn-forward' | 'turn-back'
+type ThemeMode = 'light' | 'dark'
 type TimelineEntryType = 'verse' | 'strong' | 'footnote' | 'search' | 'navigation' | 'view' | 'setting'
 
 type TimelineEntry = {
@@ -223,6 +224,7 @@ function App() {
   const [pageMotion, setPageMotion] = useState<PageMotion>('idle')
   const [viewMode, setViewMode] = useState<ViewMode>('notes')
   const [query, setQuery] = useState('')
+  const [themeMode, setThemeMode] = useState<ThemeMode>('light')
   const [libraryVerses, setLibraryVerses] = useState<Verse[]>([])
   const [verses, setVerses] = useState<Verse[]>([])
   const [selectedId, setSelectedId] = useState<number | null>(null)
@@ -407,6 +409,7 @@ function App() {
           showDictionaryPanel: boolean
           splitPercent: number
           notesPinned: boolean
+          themeMode: ThemeMode
         }>
         setLemmaFontSize(parsed.lemmaFontSize ?? 17)
         setLinkedFontSize(parsed.linkedFontSize ?? 15)
@@ -422,6 +425,7 @@ function App() {
         setShowDictionaryPanel(parsed.showDictionaryPanel ?? true)
         setSplitPercent(parsed.splitPercent ?? 50)
         setNotesPinned(parsed.notesPinned ?? false)
+        setThemeMode(parsed.themeMode ?? 'light')
       } catch {
         localStorage.removeItem(studySettingsStorageKey)
       }
@@ -493,6 +497,7 @@ function App() {
         showDictionaryPanel,
         splitPercent,
         notesPinned,
+        themeMode,
       }),
     )
   }, [
@@ -510,6 +515,7 @@ function App() {
     showLinkedLine,
     showOriginalLine,
     splitPercent,
+    themeMode,
   ])
 
   useEffect(() => {
@@ -782,6 +788,11 @@ function App() {
     })
   }
 
+  function changeThemeMode(nextThemeMode: ThemeMode) {
+    setThemeMode(nextThemeMode)
+    recordDisplaySetting(`Theme: ${nextThemeMode}`)
+  }
+
   function beginSplitResize(event: ReactMouseEvent<HTMLDivElement>) {
     event.preventDefault()
     const reader = readerRef.current
@@ -1278,6 +1289,7 @@ function App() {
                 key={chapter}
                 type="button"
                 className={chapter === selectedVerse?.chapter ? 'active' : ''}
+                style={{ fontSize: `${Math.max(8, Math.min(11, 13 - chapters.length / 20))}px` }}
                 onClick={() => selectedVerse && jumpTo(selectedVerse.book, chapter, 1)}
               >
                 {chapter}
@@ -1733,6 +1745,26 @@ function App() {
             </button>
           </header>
           <div className="settings-grid">
+            <section className="modal-section">
+              <h3>Theme</h3>
+              <div className="segmented-control" aria-label="Theme mode">
+                <button
+                  type="button"
+                  className={themeMode === 'light' ? 'active' : ''}
+                  onClick={() => changeThemeMode('light')}
+                >
+                  Light
+                </button>
+                <button
+                  type="button"
+                  className={themeMode === 'dark' ? 'active' : ''}
+                  onClick={() => changeThemeMode('dark')}
+                >
+                  Dark
+                </button>
+              </div>
+            </section>
+
             <section className="modal-section">
               <h3>Original Language Line</h3>
               <label>
@@ -1964,6 +1996,7 @@ function App() {
         'app-shell',
         railOpen ? 'menu-open' : '',
         notesPinned ? 'notes-pinned' : '',
+        themeMode === 'dark' ? 'theme-dark' : 'theme-light',
       ].filter(Boolean).join(' ')}
     >
       <aside