diff --git a/examples/preact/index.html b/examples/preact/index.html
index f79dbe7..fb770d3 100644
--- a/examples/preact/index.html
+++ b/examples/preact/index.html
@@ -13,9 +13,31 @@
       href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
       crossorigin="anonymous"
     />
+    <script>
+      // Resolve the theme before the first paint, or the page flashes dark on
+      // its way to light. Kept inline and dependency-free for that reason.
+      (() => {
+        let choice = 'system';
+        try {
+          choice =
+            JSON.parse(localStorage.getItem('web-dslr.prefs') || '{}').theme ||
+            'system';
+        } catch {}
+        document.documentElement.dataset.theme =
+          choice === 'light' || choice === 'dark'
+            ? choice
+            : matchMedia('(prefers-color-scheme: light)').matches
+            ? 'light'
+            : 'dark';
+      })();
+    </script>
     <style>
-      :root {
-        color-scheme: dark light;
+      /* Dark is the base. The script above always stamps an explicit
+         data-theme, so there's no prefers-color-scheme query here to fight
+         with an override the user has chosen. */
+      :root,
+      :root[data-theme='dark'] {
+        color-scheme: dark;
         --bg: #14161a;
         --panel: #1c1f26;
         --panel-2: #242832;
@@ -30,17 +52,16 @@
         --radius: 10px;
       }
 
-      @media (prefers-color-scheme: light) {
-        :root {
-          --bg: #f2f4f7;
-          --panel: #ffffff;
-          --panel-2: #f7f8fa;
-          --line: #d9dee6;
-          --text: #1a1d23;
-          --muted: #5c6675;
-          --accent: #1f6fd0;
-          --accent-text: #ffffff;
-        }
+      :root[data-theme='light'] {
+        color-scheme: light;
+        --bg: #f2f4f7;
+        --panel: #ffffff;
+        --panel-2: #f7f8fa;
+        --line: #d9dee6;
+        --text: #1a1d23;
+        --muted: #5c6675;
+        --accent: #1f6fd0;
+        --accent-text: #ffffff;
       }
 
       * {
@@ -91,6 +112,12 @@
         gap: 12px;
       }
 
+      #app-header .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
       #app-header .logo {
         font-size: 24px;
       }
diff --git a/examples/preact/index.js b/examples/preact/index.js
index a18300c..a5eca08 100644
--- a/examples/preact/index.js
+++ b/examples/preact/index.js
@@ -36,6 +36,19 @@ if (isDebug) {
 /** @param {number} ms */
 const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
 
+const systemPrefersLight = () => matchMedia('(prefers-color-scheme: light)');
+
+/**
+ * Turn the stored preference into the theme actually in force.
+ * @param {'system' | 'light' | 'dark'} choice
+ */
+const resolveTheme = choice =>
+  choice === 'light' || choice === 'dark'
+    ? choice
+    : systemPrefersLight().matches
+    ? 'light'
+    : 'dark';
+
 /** @extends Component<{}, AppState> */
 class App extends Component {
   /** @type {Camera | undefined} */
@@ -71,12 +84,20 @@ class App extends Component {
   componentDidMount() {
     this.saver.mode = this.state.prefs.saveMode;
     this.syncNarrator(this.state.prefs);
+    // The voice list arrives after construction; re-render when it does.
+    this.narrator.onVoicesChanged = () => this.forceUpdate();
     // Held for as long as the app is open, not just while a sequence runs -
     // you're usually mid-setup when the display would otherwise sleep.
     if (this.state.prefs.keepAwake) this.wakeLock.acquire();
 
     document.addEventListener('fullscreenchange', this.handleFullscreenChange);
 
+    this.applyTheme(this.state.prefs.theme);
+    // While the choice is 'system', follow the OS if it changes underneath us.
+    systemPrefersLight().addEventListener('change', () => {
+      if (this.state.prefs.theme === 'system') this.applyTheme('system');
+    });
+
     addEventListener('error', ({ message }) =>
       this.log(`Uncaught error: ${message}`, 'error')
     );
@@ -117,13 +138,34 @@ class App extends Component {
     }));
   }
 
+  /** @param {'system' | 'light' | 'dark'} choice */
+  applyTheme(choice) {
+    let theme = resolveTheme(choice);
+    document.documentElement.dataset.theme = theme;
+    // Keeps the PWA title bar and mobile browser chrome in step.
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute('content', theme === 'light' ? '#ffffff' : '#14161a');
+    this.setState({ theme });
+  }
+
+  toggleTheme = () => {
+    let next = /** @type {'light' | 'dark'} */ (
+      resolveTheme(this.state.prefs.theme) === 'dark' ? 'light' : 'dark'
+    );
+    this.applyTheme(next);
+    this.setPref({ theme: next });
+  };
+
   /** @param {import('./settings.js').Prefs} prefs */
   syncNarrator(prefs) {
     Object.assign(this.narrator, {
       enabled: prefs.voice,
       countFrom: prefs.voiceCountFrom,
       voiceURI: prefs.voiceURI,
-      announceFrames: prefs.voiceAnnounceFrames
+      announceFrames: prefs.voiceAnnounceFrames,
+      rate: prefs.voiceRate,
+      pitch: prefs.voicePitch
     });
   }
 
@@ -412,14 +454,31 @@ class App extends Component {
         )
       ),
       h(
-        'button',
-        {
-          type: 'button',
-          class: 'icon-button',
-          onclick: this.toggleSettings,
-          title: 'Settings'
-        },
-        '⚙'
+        'div',
+        { class: 'header-actions' },
+        h(
+          'button',
+          {
+            type: 'button',
+            class: 'icon-button',
+            onclick: this.toggleTheme,
+            title:
+              this.state.theme === 'dark'
+                ? 'Switch to light mode'
+                : 'Switch to dark mode'
+          },
+          this.state.theme === 'dark' ? '☀' : '☾'
+        ),
+        h(
+          'button',
+          {
+            type: 'button',
+            class: 'icon-button settings-button',
+            onclick: this.toggleSettings,
+            title: 'Settings'
+          },
+          '⚙'
+        )
       )
     );
   }
diff --git a/examples/preact/settings.js b/examples/preact/settings.js
index 7bfab12..b50e0ae 100644
--- a/examples/preact/settings.js
+++ b/examples/preact/settings.js
@@ -40,11 +40,15 @@ export const DEFAULT_PREFS = {
   keepAwake: true,
   bulbEnabled: false,
   bulbSeconds: 30,
+  /** 'system' follows the OS until the header toggle is used. */
+  theme: /** @type {'system' | 'light' | 'dark'} */ ('system'),
   // Toggled from the home screen; the rest live in this drawer.
   voice: false,
   voiceCountFrom: 5,
   voiceURI: '',
-  voiceAnnounceFrames: false
+  voiceAnnounceFrames: false,
+  voiceRate: 1.1,
+  voicePitch: 1
 };
 
 /** @typedef {typeof DEFAULT_PREFS} Prefs */
@@ -95,6 +99,39 @@ function tabLabel(label) {
   return label.replace(/^camera\s+/i, '') || label;
 }
 
+/**
+ * Bucket voices into <optgroup>s by language, keeping the order the narrator
+ * sorted them into (your own language first, offline voices before network).
+ *
+ * @param {SpeechSynthesisVoice[]} voices
+ */
+function groupVoices(voices) {
+  /** @type {{ lang: string, voices: SpeechSynthesisVoice[] }[]} */
+  let groups = [];
+  let byLang = new Map();
+  for (let voice of voices) {
+    let group = byLang.get(voice.lang);
+    if (!group) {
+      group = { lang: voice.lang, voices: [] };
+      byLang.set(voice.lang, group);
+      groups.push(group);
+    }
+    group.voices.push(voice);
+  }
+  return groups;
+}
+
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @param {number} fallback Used when the field is left empty (value is NaN).
+ */
+function clamp(value, min, max, fallback) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.min(max, Math.max(min, Math.round(value * 10) / 10));
+}
+
 /**
  * @param {{ label: string, hint?: string, children?: any }} props
  */
@@ -398,7 +435,12 @@ export class SettingsDrawer extends Component {
                   ),
                   h(
                     Row,
-                    { label: 'Voice' },
+                    {
+                      label: 'Voice',
+                      hint: voices.length
+                        ? `${voices.length} available. Network voices won't work offline.`
+                        : 'Loading the system voice list…'
+                    },
                     h(
                       'select',
                       {
@@ -406,11 +448,56 @@ export class SettingsDrawer extends Component {
                         onChange: e => setPref({ voiceURI: e.currentTarget.value })
                       },
                       h('option', { value: '' }, 'Browser default'),
-                      voices.map(v =>
-                        h('option', { key: v.voiceURI, value: v.voiceURI }, `${v.name} (${v.lang})`)
+                      // Grouped by language: a flat list of ~180 is unusable.
+                      groupVoices(voices).map(group =>
+                        h(
+                          'optgroup',
+                          { key: group.lang, label: group.lang },
+                          group.voices.map(v =>
+                            h(
+                              'option',
+                              { key: v.voiceURI, value: v.voiceURI },
+                              v.localService ? v.name : `${v.name} (network)`
+                            )
+                          )
+                        )
                       )
                     )
                   ),
+                  h(
+                    Row,
+                    {
+                      label: 'Speed',
+                      hint: 'Quicker means a spoken number lands nearer the second it names.'
+                    },
+                    h('input', {
+                      type: 'number',
+                      min: '0.5',
+                      max: '2',
+                      step: '0.1',
+                      value: prefs.voiceRate,
+                      onChange: e =>
+                        setPref({
+                          voiceRate: clamp(e.currentTarget.valueAsNumber, 0.5, 2, 1.1)
+                        })
+                    }),
+                    h('span', { class: 'unit' }, '×')
+                  ),
+                  h(
+                    Row,
+                    { label: 'Pitch' },
+                    h('input', {
+                      type: 'number',
+                      min: '0',
+                      max: '2',
+                      step: '0.1',
+                      value: prefs.voicePitch,
+                      onChange: e =>
+                        setPref({
+                          voicePitch: clamp(e.currentTarget.valueAsNumber, 0, 2, 1)
+                        })
+                    })
+                  ),
                   h(
                     Row,
                     { label: 'Test' },
diff --git a/examples/preact/types.d.ts b/examples/preact/types.d.ts
index 9915db6..3046893 100644
--- a/examples/preact/types.d.ts
+++ b/examples/preact/types.d.ts
@@ -19,4 +19,6 @@ type AppState = {
   singleShotStatus: 'idle' | 'busy';
   /** Whether the preview pane is currently filling the screen. */
   fullscreen?: boolean;
+  /** The theme actually in force, once 'system' has been resolved. */
+  theme?: 'light' | 'dark';
 };
diff --git a/examples/preact/voice.js b/examples/preact/voice.js
index 73cec06..e6cd70c 100644
--- a/examples/preact/voice.js
+++ b/examples/preact/voice.js
@@ -36,6 +36,15 @@ export class Narrator {
   announceFrames = false;
   /** Empty means the browser's default voice. */
   voiceURI = '';
+  rate = 1.1;
+  pitch = 1;
+  /**
+   * Called when the voice list changes, so the UI can re-render. Chrome
+   * reports zero voices synchronously and only fills the list later, so
+   * without this the picker is stuck on whatever existed at construction.
+   * @type {(() => void) | undefined}
+   */
+  onVoicesChanged;
 
   /** @type {number | null} */
   #lastSecond = null;
@@ -49,11 +58,27 @@ export class Narrator {
     if (!supportsSpeech) return;
     this.#loadVoices();
     // Voices arrive asynchronously, and on some platforms only after this fires.
-    speechSynthesis.onvoiceschanged = () => this.#loadVoices();
+    speechSynthesis.onvoiceschanged = () => {
+      this.#loadVoices();
+      this.onVoicesChanged?.();
+    };
   }
 
+  /**
+   * Chrome hands back ~180 voices in no useful order. Sort them so the ones
+   * you'd actually pick are near the top: your own language first, then
+   * offline voices ahead of network ones - the latter are useless in the field.
+   */
   #loadVoices() {
-    this.#voices = speechSynthesis.getVoices();
+    let primary = (navigator.language || 'en').split('-')[0].toLowerCase();
+    let rank = v => (v.lang.toLowerCase().startsWith(primary) ? 0 : 1);
+    this.#voices = speechSynthesis.getVoices().slice().sort(
+      (a, b) =>
+        rank(a) - rank(b) ||
+        a.lang.localeCompare(b.lang) ||
+        Number(b.localService) - Number(a.localService) ||
+        a.name.localeCompare(b.name)
+    );
   }
 
   get voices() {
@@ -72,8 +97,10 @@ export class Narrator {
     let utterance = new SpeechSynthesisUtterance(text);
     let voice = this.#voices.find(v => v.voiceURI === this.voiceURI);
     if (voice) utterance.voice = voice;
-    // Slightly quick, so a spoken "three" lands nearer the second it names.
-    utterance.rate = 1.1;
+    // Default is slightly quick, so a spoken "three" lands nearer the second
+    // it names.
+    utterance.rate = this.rate;
+    utterance.pitch = this.pitch;
     speechSynthesis.speak(utterance);
   }