bible270 1.10.2 → 1.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfe9cdd0fb7b5bc4a42b10a4c5a7dd25fe585d37b9178f5ffe367fa628824dc8
-  data.tar.gz: 92d8d22a9c0572082d756cc797a74c957e816a4d226fe59ad3435874edee59ff
+  metadata.gz: 278f587d3e7ee3670bbed00a42ebb91477cc29adfcf72280ff023e1702a5acdf
+  data.tar.gz: 642a9fa5623de02a5cdee5f8d50184dfb371a3ac15e88ee6b91fb29bef76a2e9
 SHA512:
-  metadata.gz: 12c01200bc093c99d11e1ee90773d633d49986001bf70c1673964d6302484c0e47cd9a1e88241ae3644769c0ed2de0dfe33874f98236a7cf48d511a052791a09
-  data.tar.gz: 59989b7ae98e4c9e796ab8be529755cbc1737cd9cb954e230bfce627d07e21b6d8dd1b448b7167c90c5fa901b53af6722aac6f321eae49c603de99a669059290
+  metadata.gz: 230466a6011d77944bd7994e07ea20e67b4b20e34cc364a1347d780f9bfddaa07bc83b0e534f76282c4b9ac07e8f610d57e120ffab8edf954bafae324e2701c2
+  data.tar.gz: 23ae33b11fc8fc92b795b240d3e38dd4a3492b66dc7ac8b6d4765cfd15a8aa01af964e12d31dfe2f74c315a33b4fe743394cd7d62f2e7860a1443329b8dbc852

data/CHANGELOG.md

@@ -4,7 +4,41 @@ All notable changes to bible270. Format follows [Keep a Changelog](https://keepa
 
 ## [Unreleased]
 
-**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.10.1...main)**
+**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.11.0...main)**
+
+## [1.11.0] - 2026-10-22
+
+### Added
+
+- add Meadow and Ocean light themes alongside Papyrus, Cedar, Forest, and Moonlight
+- add muted artwork for each theme: textured papyrus with ragged edges and curled corners, a sunrise meadow, an afternoon coast with gulls, cedar grain, layered forest silhouettes, and a moonlit lake
+- add shared Hebrew and Greek scripture backgrounds, with rippled reflections in Moonlight
+- add a compact theme selector beside the app title on every signed-in page
+
+### Changed
+
+- save and apply theme selections immediately from the header, Profile, and Admin without submitting unrelated edits
+- synchronize controls for the same reader while keeping an admin's own theme independent of another reader's setting
+- use short theme names, list light themes first, and retain Light/Dark descriptions in Profile and Admin
+- keep the header icon, title, spacing, and theme selector consistently compact across desktop and mobile, without wrapping the navigation
+- let System follow the device appearance using Papyrus for light and Cedar for dark, including their artwork
+
+### Fixed
+
+- restore the previous theme selection and show an error when saving fails; prevent overlapping saves for the same reader
+
+Existing saved theme preferences are preserved; no additional migration is required for installations with display preferences already enabled.
+
+**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.10.2...v1.11.0)**
+
+## [1.10.2] - 2026-10-18
+
+### Changed
+
+- show each Admin reader row in that reader's selected theme, with matching text and link colors
+- let System-themed rows follow the viewing browser's light or dark preference
+
+**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.10.1...v1.10.2)**
 
 ## [1.10.1] - 2026-10-18
 
@@ -863,7 +897,9 @@ This is the initial public release.
 
 * Email sign-in requires working Action Mailer delivery in the host application. Set `config.mailer_from`; delivery is inline by default, or set `email_sign_in_deliver_later` when a queue backend is available.
 
-[Unreleased]: https://github.com/avonderluft/bible270/compare/v1.10.1...HEAD
+[Unreleased]: https://github.com/avonderluft/bible270/compare/v1.11.0...HEAD
+[1.11.0]: https://github.com/avonderluft/bible270/releases/tag/v1.11.0
+[1.10.2]: https://github.com/avonderluft/bible270/releases/tag/v1.10.2
 [1.10.1]: https://github.com/avonderluft/bible270/releases/tag/v1.10.1
 [1.10.0]: https://github.com/avonderluft/bible270/releases/tag/v1.10.0
 [1.9.1]: https://github.com/avonderluft/bible270/releases/tag/v1.9.1

data/README.md

@@ -272,7 +272,8 @@ Admins get an extra "Admin" link in the header. The broadcast form can send an i
 message either to every reader with an email address or only to readers recognized as administrators.
 From a reader's page you can:
 
-- **set their theme** — Parchment, Earth, Forest, Midnight, or System, independently of your own theme;
+- **set their theme** — Papyrus (Light), Meadow (Light), Ocean (Light), Cedar (Dark),
+  Forest (Dark), Moonlight (Dark), or System, independently of your own theme;
 
 - **move them to a day** — "put them on day 42 as of today" back-dates the start date; check-offs are
   keyed to day numbers, so nothing in their history moves;
@@ -373,15 +374,21 @@ Psalm 78: [20, 39, 55]
 
 ## Theme
 
-Readers can choose **Parchment** (light), **Earth** (dark brown), **Forest** (dark green),
-**Midnight** (dark blue), or **System** under **Profile → Theme**, then save. The preference is stored
+Readers can choose **Papyrus (Light)**, **Meadow (Light)**, **Ocean (Light)**, **Cedar (Dark)**,
+**Forest (Dark)**, **Moonlight (Dark)**, or **System** under **Profile → Theme**. Signed-in readers can also use
+the compact selector beside the app title on every page; it shows the short theme names without Light/Dark suffixes.
+Selecting a theme saves and applies it immediately without submitting other profile edits. The header and Profile
+selectors stay synchronized, and a failed save restores the previous selection and displays an error.
+Admin theme selections also save automatically;
+changing another reader's theme does not change the admin's own theme. With JavaScript disabled, use Save.
+The preference is stored
 with their account and applies throughout Bible270 on every device. System is the default for existing
-and new readers, follows the device's current appearance using Parchment for light or Earth for dark,
+and new readers, follows the device's current appearance using Papyrus for light or Cedar for dark,
 and responds to changes without reloading. Signed-out visitors also use System.
 The completion dove retains its bright colors in every theme.
 
-Existing preferences are preserved under the new names. Forest and Midnight require no additional
-migration once display preferences are installed.
+Existing preferences and persisted values are unchanged under the new names. Meadow, Ocean, Cedar, Forest, and Moonlight
+require no additional migration once display preferences are installed.
 
 Upgrading hosts must install and run migration `20260101000023`:
 

data/app/controllers/bible270/admin_controller.rb

@@ -250,18 +250,21 @@ module Bible270
 
     def update_theme
       unless Reader.display_mode_column?
-        return redirect_to admin_reader_path(@reader),
-                           alert: 'Run the pending Bible270 database migration before changing the theme.'
+        return render_theme_error('Run the pending Bible270 database migration before changing the theme.')
       end
 
       mode = params[:display_mode].to_s
-      unless Reader::DISPLAY_MODES.include?(mode)
-        return redirect_to admin_reader_path(@reader), alert: 'Choose a theme from the list.'
-      end
+      return render_theme_error('Choose a theme from the list.') unless Reader::DISPLAY_MODES.include?(mode)
 
       @reader.reload unless @reader.has_attribute?(:display_mode)
       @reader.update!(display_mode: mode)
-      redirect_to admin_reader_path(@reader), notice: 'Theme updated.'
+      respond_to do |format|
+        format.json { render json: { display_mode: @reader.display_mode } }
+        format.html { redirect_to admin_reader_path(@reader), notice: 'Theme updated.' }
+      end
+    rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotSaved => e
+      message = e.record ? e.record.errors.full_messages.to_sentence : nil
+      render_theme_error("The theme could not be saved. #{message.presence || 'Please try again.'}")
     end
 
     def update_notifications
@@ -355,6 +358,13 @@ module Bible270
 
   private
 
+    def render_theme_error(message)
+      respond_to do |format|
+        format.json { render json: { error: message }, status: :unprocessable_entity }
+        format.html { redirect_to admin_reader_path(@reader), alert: message }
+      end
+    end
+
     def comment_notifications_available_for?(reader)
       return false unless Bible270.config.mention_notifications && Reader.comment_notification_columns?
 
@@ -388,6 +398,9 @@ module Bible270
     def load_reader
       @reader = Reader.find_by(id: params[:id])
       return if @reader
+      if action_name == 'update_theme' && request.format.json?
+        return render_theme_error('Reader not found.')
+      end
 
       redirect_to admin_path, alert: 'Reader not found.'
     end

data/app/controllers/bible270/profiles_controller.rb

@@ -43,6 +43,25 @@ module Bible270
       render_profile_error("Your profile could not be saved. #{message.presence || 'Please try again.'}")
     end
 
+    def update_theme
+      unless Reader.display_mode_column?
+        return render_theme_error('Run the pending Bible270 database migration before changing the theme.')
+      end
+
+      mode = params[:display_mode].to_s
+      return render_theme_error('Choose a theme from the list.') unless Reader::DISPLAY_MODES.include?(mode)
+
+      current_reader.reload unless current_reader.has_attribute?(:display_mode)
+      current_reader.update!(display_mode: mode)
+      respond_to do |format|
+        format.json { render json: { display_mode: current_reader.display_mode } }
+        format.html { redirect_to profile_path, notice: 'Theme updated.' }
+      end
+    rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotSaved => e
+      message = e.record ? e.record.errors.full_messages.to_sentence : nil
+      render_theme_error("Your theme could not be saved. #{message.presence || 'Please try again.'}")
+    end
+
     def remove_avatar
       current_reader.remove_avatar!
       redirect_to profile_path, notice: 'Your picture has been removed.'
@@ -50,6 +69,13 @@ module Bible270
 
   private
 
+    def render_theme_error(message)
+      respond_to do |format|
+        format.json { render json: { error: message }, status: :unprocessable_entity }
+        format.html { redirect_to profile_path, alert: message }
+      end
+    end
+
     def display_mode_problem
       return unless Reader.display_mode_column?
       return if Reader::DISPLAY_MODES.include?(@display_mode)
@@ -143,6 +169,9 @@ module Bible270
     # visitor who isn't signed in, so send them to sign in rather than 404.
     def require_signed_in_reader
       return if signed_in?
+      if action_name == 'update_theme' && request.format.json?
+        return render_theme_error('Please sign in first.')
+      end
 
       redirect_to sign_in_path(origin: request.fullpath), alert: 'Please sign in first.'
     end

data/app/models/bible270/reader.rb

@@ -29,7 +29,16 @@ module Bible270
 
     PASSAGE_SOURCES = %w[bible_com bible_gateway blue_letter_bible].freeze
     DEFAULT_PASSAGE_SOURCE = 'bible_com'
-    DISPLAY_MODES = %w[light dark dark_green dark_blue system].freeze
+    DISPLAY_OPTIONS = {
+      'Papyrus (Light)' => 'light',
+      'Meadow (Light)' => 'sage',
+      'Ocean (Light)' => 'mist',
+      'Cedar (Dark)' => 'dark',
+      'Forest (Dark)' => 'dark_green',
+      'Moonlight (Dark)' => 'dark_blue',
+      'System' => 'system'
+    }.freeze
+    DISPLAY_MODES = DISPLAY_OPTIONS.values.freeze
     DEFAULT_DISPLAY_MODE = 'system'
     DAILY_REMINDER_TIME_FORMAT = %r{\A(?:[01]\d|2[0-3]):[0-5]\d\z}
     DAILY_REMINDER_MINUTES = %w[00 15 30 45].freeze

data/app/views/bible270/admin/show.html.erb

@@ -82,13 +82,15 @@
   <% if Bible270::Reader.display_mode_column? %>
     <%= form_with url: admin_reader_theme_path(@reader), method: :patch, class: "b270-emailform" do %>
       <%= select_tag :display_mode,
-            options_for_select([["Parchment", "light"], ["Earth", "dark"], ["Forest", "dark_green"],
-                                ["Midnight", "dark_blue"], ["System", "system"]], @reader.effective_display_mode),
-            class: "b270-select", aria: { labelledby: "b270-theme-heading", describedby: "b270-theme-hint" } %>
+            options_for_select(Bible270::Reader::DISPLAY_OPTIONS, @reader.effective_display_mode),
+            class: "b270-select", aria: { labelledby: "b270-theme-heading", describedby: "b270-theme-hint b270-theme-status" },
+            data: { b270_theme_url: admin_reader_theme_path(@reader), b270_theme_apply: @reader == current_reader,
+                    b270_saved_theme: @reader.effective_display_mode } %>
       <p id="b270-theme-hint" class="b270-hint" style="margin:0">
-        System follows the reader's device setting: Parchment for light, Earth for dark.
+        System follows the reader's device setting: Papyrus for light, Cedar for dark.
       </p>
-      <%= submit_tag "Save", class: "b270-btn" %>
+      <p id="b270-theme-status" class="b270-hint" role="status" aria-live="polite" style="margin:0"></p>
+      <%= submit_tag "Save", class: "b270-btn", data: { b270_theme_fallback: true } %>
     <% end %>
   <% else %>
     <p class="b270-flash alert" style="margin:0">
@@ -97,6 +99,7 @@
   <% end %>
 </div>
 
+
 <div class="b270-panel">
   <h2 class="b270-subhead">Email notifications</h2>
   <% unless Bible270.config.mention_notifications %>

data/app/views/bible270/profiles/edit.html.erb

@@ -48,11 +48,13 @@
       <label class="b270-field">
         <span>Theme</span>
         <%= select_tag :display_mode,
-              options_for_select([["Parchment", "light"], ["Earth", "dark"], ["Forest", "dark_green"],
-                                  ["Midnight", "dark_blue"], ["System", "system"]], @display_mode),
-              class: "b270-select", aria: { describedby: "b270-display-hint" } %>
-        <span id="b270-display-hint" class="b270-hint" style="margin:0">System follows your device's setting: Parchment for light, Earth for dark.</span>
+              options_for_select(Bible270::Reader::DISPLAY_OPTIONS, @display_mode),
+              class: "b270-select", aria: { describedby: "b270-display-hint b270-theme-status" },
+              data: { b270_theme_url: profile_theme_path, b270_theme_apply: true,
+                      b270_saved_theme: current_reader.effective_display_mode } %>
+        <span id="b270-display-hint" class="b270-hint" style="margin:0">System follows your device's setting: Papyrus for light, Cedar for dark.</span>
       </label>
+      <p id="b270-theme-status" class="b270-hint" role="status" aria-live="polite" style="margin:0"></p>
     <% else %>
       <p class="b270-flash alert" style="margin:0">
         Theme settings are temporarily unavailable while this installation finishes a database update.

data/app/views/bible270/shared/_header.html.erb

@@ -4,6 +4,19 @@
       <%= b270_mark %>
       <span class="b270-title"><%= Bible270.config.app_name %></span>
     <% end %>
+    <% if current_reader && Bible270::Reader.display_mode_column? %>
+      <%= form_with url: profile_theme_path, method: :patch, class: "b270-header-theme" do %>
+        <%= select_tag :display_mode,
+              options_for_select(Bible270::Reader::DISPLAY_OPTIONS.map { |label, value| [label.sub(/ \((?:Light|Dark)\)\z/, ""), value] }, current_reader.effective_display_mode),
+              id: "b270-header-theme", class: "b270-header-theme-select",
+              aria: { label: "Theme", describedby: "b270-header-theme-status" },
+              data: { b270_theme_url: profile_theme_path, b270_theme_apply: true,
+                      b270_saved_theme: current_reader.effective_display_mode,
+                      b270_theme_status: "b270-header-theme-status" } %>
+        <%= submit_tag "Save", class: "b270-btn", data: { b270_theme_fallback: true } %>
+        <span id="b270-header-theme-status" class="b270-header-theme-status" role="status" aria-live="polite"></span>
+      <% end %>
+    <% end %>
   </div>
   <nav class="b270-nav" aria-label="Primary navigation">
     <div class="b270-desktopnav">

data/app/views/bible270/shared/_styles.html.erb

@@ -18,10 +18,46 @@
     margin:0; background:radial-gradient(120% 80% at 100% 0%,rgba(165,129,44,.06),transparent 55%),var(--paper);
     color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.2; -webkit-font-smoothing:antialiased;
   }
-  /* Explicit light keeps native controls light even when the OS is dark.
-     Only system mode follows the media query, including live OS changes. */
+  /* Explicit light also opts out of automatic browser darkening. System still follows the OS. */
+  :root[data-b270-display-mode="light"],
+  :root[data-b270-display-mode="sage"],
+  :root[data-b270-display-mode="mist"]{color-scheme:only light}
+  :root[data-b270-display-mode="dark"],
+  :root[data-b270-display-mode="dark_green"],
+  :root[data-b270-display-mode="dark_blue"]{color-scheme:dark}
+  :root[data-b270-display-mode="system"]{color-scheme:light dark}
   .b270-reader-theme[data-display-mode="light"],
-  .b270[data-display-mode="light"]{color-scheme:light}
+  .b270[data-display-mode="light"]{color-scheme:only light}
+  .b270-reader-theme[data-display-mode="sage"],
+  .b270[data-display-mode="sage"]{
+    color-scheme:only light;
+    background-image:none;
+    --paper:#e1e8df; --card:#edf0e9; --ink:#29382d; --muted:#52634f; --faint:#5b6c58;
+    --line:#cbd6c7; --line-soft:#dce4d8; --teal:#356b60; --oxblood:#905466; --gold:#776023;
+    --gold-lite:#776023; --shadow:0 1px 0 rgba(41,56,45,.04),0 10px 30px -18px rgba(41,56,45,.25);
+    --control:#fcfdf9; --control-line:#768572; --task-surface:rgba(255,255,255,.35); --button-hover:#3b5040;
+    --on-accent:#ffffff; --complete-ink:#ffffff; --complete-dot:#edf0e9;
+    --button-surface:#29382d; --button-ink:#edf0e9;
+    --teal-fill:#356b60; --oxblood-fill:#905466; --gold-fill:#776023;
+    --teal-mark:#356b60; --oxblood-mark:#905466; --gold-mark:#776023;
+    --alert-surface:#f5e7e9; --alert-ink:#783f4c; --alert-line:#d9b7c0;
+    --notice-surface:#e3eee0; --notice-ink:#375b37; --notice-line:#b8d1b1;
+  }
+  .b270-reader-theme[data-display-mode="mist"],
+  .b270[data-display-mode="mist"]{
+    color-scheme:only light;
+    background-image:none;
+    --paper:#e2e7ed; --card:#ecf0f5; --ink:#293746; --muted:#4f6074; --faint:#58687b;
+    --line:#ced7e2; --line-soft:#dfe5ed; --teal:#316977; --oxblood:#86566f; --gold:#7b602b;
+    --gold-lite:#7b602b; --shadow:0 1px 0 rgba(41,55,70,.04),0 10px 30px -18px rgba(41,55,70,.25);
+    --control:#fcfdff; --control-line:#758496; --task-surface:rgba(255,255,255,.35); --button-hover:#3c5065;
+    --on-accent:#ffffff; --complete-ink:#ffffff; --complete-dot:#ecf0f5;
+    --button-surface:#293746; --button-ink:#ecf0f5;
+    --teal-fill:#316977; --oxblood-fill:#86566f; --gold-fill:#7b602b;
+    --teal-mark:#316977; --oxblood-mark:#86566f; --gold-mark:#7b602b;
+    --alert-surface:#f3e7ee; --alert-ink:#754357; --alert-line:#d7bbc9;
+    --notice-surface:#e3eeea; --notice-ink:#355c50; --notice-line:#b7d0c7;
+  }
   .b270-reader-theme[data-display-mode="dark"],
   .b270[data-display-mode="dark"]{
     color-scheme:dark;
@@ -88,7 +124,80 @@
       --notice-surface:#25382a; --notice-ink:#b6dfb6; --notice-line:#6d956e;
     }
   }
+  /* A fixed SVG avoids mobile background-attachment quirks and stays behind all content. */
+  .b270-theme-scenery{display:none;--b270-scene-height:clamp(280px,52vh,560px);position:fixed;inset:auto 0 0;width:100%;height:var(--b270-scene-height);z-index:-1;pointer-events:none}
+  .b270{isolation:isolate}
+  .b270 > .b270-theme-scripture{display:block;color:var(--gold)}
+  .b270[data-display-mode="dark_blue"] > .b270-theme-scripture{color:#c6d6e9}
+  .b270[data-display-mode="mist"] > .b270-theme-scenery[data-scenery="mist"],
+  .b270[data-display-mode="mist"] > .b270-theme-scenery[data-scenery="mist_sky"],
+  .b270[data-display-mode="mist"] > .b270-theme-scenery[data-scenery="ocean_gulls"],
+  .b270[data-display-mode="sage"] > .b270-theme-scenery[data-scenery="sage"],
+  .b270[data-display-mode="sage"] > .b270-theme-scenery[data-scenery="sage_sky"],
+  .b270[data-display-mode="dark"] > .b270-theme-scenery[data-scenery="dark"],
+  .b270[data-display-mode="dark_green"] > .b270-theme-scenery[data-scenery="dark_green"],
+  .b270[data-display-mode="dark_blue"] > .b270-theme-scenery[data-scenery="dark_blue"],
+  .b270[data-display-mode="dark_blue"] > .b270-theme-scenery[data-scenery="hebrew_water"],
+  .b270[data-display-mode="light"] > .b270-theme-scenery[data-scenery="light"],
+  .b270[data-display-mode="system"] > .b270-theme-scenery[data-scenery="light"]{display:block}
+  .b270-theme-scenery[data-scenery="light"],.b270-theme-scripture{font-size:clamp(12px,2.2vw,30px)}
+  .b270-theme-scripture{height:clamp(380px,76vh,820px)}
+  .b270-theme-scenery[data-scenery="light"]{height:100%;overflow:hidden}
+  .b270-papyrus-grid{transform-box:view-box;transform:translateY(calc(100% - clamp(380px,76vh,820px) * .7))}
+  .b270-papyrus-opposite{transform-box:view-box;transform-origin:0 0;transform:translate(100%,100%) rotate(180deg)}
+  @media (max-width:600px){
+    .b270-papyrus-corner{transform:scale(.55)}
+  }
+  .b270-theme-scenery[data-scenery="dark"]{height:100%}
+  .b270-theme-scenery[data-scenery="sage_sky"]{height:100%}
+  .b270-theme-scenery[data-scenery="mist_sky"]{height:100%}
+  .b270-ocean-gulls{transform-box:view-box;transform:translate(calc(100% - 115px),calc(100% - 35px))}
+  /* Match the moon's 90-unit right inset in its 1600 × 440, right-aligned slice viewport. */
+  .b270-scripture-letters [lang="el"]{transform-box:view-box;transform:translateX(calc(100% - max(5.625%, var(--b270-scene-height) * 90 / 440)))}
+  .b270-scripture-letters [lang="el"] tspan{font-size:.9em}
+  /* Scale reflected Hebrew with the lake artwork, allowing for its smaller letterforms. */
+    .b270-hebrew-water{font-size:max(2vw, var(--b270-scene-height) * 32 / 440);transform-box:view-box;transform:translate(10%,calc(100% - max(12.5vw, var(--b270-scene-height) * 200 / 440)))}
+  @media (prefers-color-scheme:dark){
+    .b270[data-display-mode="system"] > .b270-theme-scenery[data-scenery="light"]{display:none}
+    .b270[data-display-mode="system"] > .b270-theme-scenery[data-scenery="dark"]{display:block}
+  }
+  .b270-mobile-scenery{display:none}
+  /* Phone artwork is a quiet accent below the reading area, not a cropped desktop scene. */
+  @media (max-width:600px){
+    .b270-theme-scenery{--b270-scene-height:clamp(180px,30vh,260px)}
+    .b270[data-display-mode] > .b270-theme-scripture,
+    .b270[data-display-mode] > .b270-theme-scenery[data-scenery="hebrew_water"]{display:none}
+    .b270-mobile-scenery{display:block}
+    .b270-papyrus-grid{opacity:.2}
+    .b270-papyrus-edges{opacity:.55}
+    .b270-theme-scenery[data-scenery="sage_sky"]{opacity:.3}
+    #b270-meadow-clouds{opacity:.5}
+    #b270-meadow-clouds path:nth-child(even),
+    #b270-meadow-grass-distant,
+    #b270-meadow-grass-near path:not(:nth-child(3n + 1)){display:none}
+    #b270-meadow-grass-near{opacity:.15}
+    .b270-theme-scenery[data-scenery="sage"] [fill="url(#b270-meadow-rays)"]{opacity:.25}
+    .b270-theme-scenery[data-scenery="mist_sky"]{opacity:.2}
+    .b270-theme-scenery[data-scenery="mist"]{opacity:.45}
+    #b270-ocean-clouds,
+    #b270-ocean-distant-waves,
+    #b270-ocean-glints,
+    #b270-ocean-sand-detail,
+    #b270-ocean-surf path:not(:first-child){display:none}
+    .b270-theme-scenery[data-scenery="dark"]{height:clamp(240px,42vh,380px);opacity:.45}
+    #b270-cedar-fine-grain path:not(:first-child),
+    #b270-cedar-knots path:nth-child(n + 4){display:none}
+    #b270-spruce-distant path:nth-of-type(even),
+    #b270-spruce-near path:nth-of-type(even),
+    #b270-spruce-distant path:nth-of-type(n + 22),
+    #b270-spruce-near path:nth-of-type(n + 22),
+    #b270-lake-reflection{display:none}
+  }
+  @media print{
+    .b270[data-display-mode] > .b270-theme-scenery[data-scenery]{display:none}
+  }
   .b270 *{box-sizing:border-box}
+  .b270 [data-b270-theme-fallback][hidden]{display:none}
   /* Blanket anchor colour. NB: this is (0,1,1), so any single-class rule
      colouring an <a> (.b270-btn, .b270-cell, .b270-arrow ...) must be
      qualified with .b270 to outrank it, or the link inherits body colour. */
@@ -96,14 +205,26 @@
   .b270 :where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
   .b270-wrap{max-width:820px;margin:0 auto;padding:clamp(14px,3.5vw,36px) clamp(14px,4vw,40px) 64px}
 
-  .b270-topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line-soft);margin-bottom:26px}
-  .b270-brand{display:flex;margin-right:auto}
+  .b270-topbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding-bottom:20px;border-bottom:1px solid var(--line-soft);margin-bottom:26px}
+  .b270-brand{display:flex;align-items:baseline;gap:14px;margin-right:auto;min-width:0}
+  .b270-header-theme{position:relative;display:flex;align-items:baseline;gap:4px;margin:0;flex:none}
+  .b270-header-theme-select{font:inherit;font-size:12px;width:6.5em;height:28px;padding:2px;margin:0;
+                           border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer}
+  @supports (field-sizing:content){
+    .b270-header-theme-select{field-sizing:content;width:auto}
+  }
+  .b270-header-theme-select:disabled{cursor:wait;opacity:.7}
+  .b270-header-theme-status:not([data-error="true"]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
+                                                      clip:rect(0,0,0,0);white-space:nowrap;border:0}
+  .b270-header-theme-status[data-error="true"]{position:absolute;z-index:30;right:0;top:calc(100% + 6px);width:220px;max-width:calc(100vw - 28px);
+                                             padding:8px 10px;border:1px solid var(--alert-line);border-radius:8px;background:var(--alert-surface);
+                                             color:var(--alert-ink);font-size:12px;line-height:1.5;box-shadow:var(--shadow)}
   /* The whole brand is one link, so the mark and the words highlight together. */
-  .b270-brandlink{display:flex;align-items:center;gap:12px;text-decoration:none}
-  .b270-mark{display:flex;align-items:center;flex:none;line-height:0}
-  .b270-mark svg,.b270-mark img{display:block;border-radius:8px}
-  .b270-title{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:22px;text-decoration:none}
-  .b270-nav{display:flex;align-items:center;font-size:14px}
+  .b270-brandlink{display:flex;align-items:baseline;gap:6px;text-decoration:none;min-width:0}
+  .b270-mark{display:flex;align-items:center;align-self:center;flex:none;line-height:0}
+  .b270-mark svg,.b270-mark img,.b270-brandlink > img.b270-mark{display:block;width:28px;height:28px;border-radius:8px}
+  .b270-title{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:18px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .b270-nav{display:flex;align-items:center;font-size:14px;flex:none;white-space:nowrap}
   .b270-desktopnav{display:flex;align-items:center;gap:16px}
   .b270-navmenu{display:none}
   .b270-nav a{color:var(--muted);text-decoration:none}
@@ -475,9 +596,10 @@
   .b270-footer p{margin:0;line-height:1.5}
   details.b270-index summary{cursor:pointer;font-family:"Spectral",serif;font-size:18px;font-weight:600;list-style:none;margin-top:30px}
   details.b270-index summary::-webkit-details-marker{display:none}
-  @media (max-width:620px){
-    .b270-topbar{flex-wrap:nowrap;align-items:center}
-    .b270-brand{min-width:0}
+  /* Switch to the compact menu before the full navigation can crowd the theme control. */
+  @media (max-width:820px){
+    .b270-topbar{flex-wrap:nowrap;align-items:center;gap:8px}
+
     .b270-nav{position:relative;flex:none}
     .b270-desktopnav{display:none}
     .b270-navmenu{display:block}
@@ -497,6 +619,7 @@
     .b270-navlinks a:hover,.b270-nav .b270-linkbtn:hover{background:var(--paper)}
     .b270-nav form{display:block;width:100%}
   }
+
   @media (max-width:480px){
     .b270-tm{grid-template-columns:104px 1fr auto}
     .b270-avatarrow{align-items:flex-start;flex-wrap:wrap}

data/app/views/bible270/shared/_theme_scenery.html.erb

@@ -0,0 +1,474 @@
+<%# Kept in the DOM so changing themes can reveal the artwork without a page reload. %>
+<%# Keep the saved "mist" preference compatible while presenting it as Ocean. %>
+<svg class="b270-theme-scenery" data-scenery="mist_sky" viewBox="0 0 1600 1000" preserveAspectRatio="none"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <linearGradient id="b270-ocean-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#b9d2e5" stop-opacity=".7" />
+      <stop offset=".5" stop-color="#dce6e9" stop-opacity=".45" />
+      <stop offset=".75" stop-color="#eee5d3" stop-opacity=".25" />
+      <stop offset="1" stop-color="#e2e7ed" stop-opacity="0" />
+    </linearGradient>
+    <radialGradient id="b270-ocean-afternoon-glow">
+      <stop offset="0" stop-color="#fff1ce" stop-opacity=".4" />
+      <stop offset="1" stop-color="#fff1ce" stop-opacity="0" />
+    </radialGradient>
+  </defs>
+  <rect width="1600" height="1000" fill="url(#b270-ocean-sky)" />
+  <ellipse cx="1420" cy="180" rx="460" ry="340" fill="url(#b270-ocean-afternoon-glow)" />
+  <g id="b270-ocean-clouds" fill="#fffdf7" opacity=".25">
+    <path d="M45 148Q154 127 242 130T409 115Q343 143 245 144T45 148Z" />
+    <path d="M948 87Q1050 69 1141 73T1322 57Q1237 84 1144 86T948 87Z" />
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="mist" viewBox="0 0 1600 440" preserveAspectRatio="xMidYMax slice"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <linearGradient id="b270-ocean-water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#91b2c6" stop-opacity=".65" />
+      <stop offset=".55" stop-color="#a3c6ce" stop-opacity=".75" />
+      <stop offset="1" stop-color="#b9d4cf" stop-opacity=".7" />
+    </linearGradient>
+    <linearGradient id="b270-ocean-sand" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#c8c9b6" stop-opacity=".8" />
+      <stop offset=".35" stop-color="#d9cfb9" stop-opacity=".85" />
+      <stop offset="1" stop-color="#e6ddcb" stop-opacity=".9" />
+    </linearGradient>
+    <linearGradient id="b270-ocean-shimmer" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#fff6de" stop-opacity="0" />
+      <stop offset=".65" stop-color="#fff6de" stop-opacity=".35" />
+      <stop offset="1" stop-color="#fff6de" stop-opacity=".1" />
+    </linearGradient>
+  </defs>
+  <rect x="0" y="135" width="1600" height="305" fill="url(#b270-ocean-water)" />
+  <path id="b270-ocean-horizon" d="M0 135H1600" fill="none" stroke="#7f9eae" stroke-width="1" opacity=".3" />
+  <g id="b270-ocean-distant-waves" fill="none" stroke="#f5f5eb" stroke-linecap="round" opacity=".35">
+    <path d="M22 154H178M235 158H442M532 151H708M811 159H1032M1119 153H1385M1460 160H1590" stroke-width="1" />
+    <path d="M0 181Q150 174 294 181T601 184M728 182Q874 175 1028 181T1370 180M1442 183H1600" stroke-width="1.4" />
+    <path d="M43 216Q193 203 353 214T691 213M821 220Q970 208 1128 218T1510 215" stroke-width="2" />
+  </g>
+  <g id="b270-ocean-glints" fill="none" stroke="url(#b270-ocean-shimmer)" stroke-linecap="round">
+    <path d="M880 170H1360M808 196H1434M751 230H1507" stroke-width="3" />
+    <path d="M685 269Q1050 253 1560 272" stroke-width="5" />
+  </g>
+  <path id="b270-ocean-beach" fill="url(#b270-ocean-sand)"
+        d="M0 365C230 338 396 388 617 361S981 304 1190 322 1450 346 1600 310V440H0Z" />
+  <path id="b270-ocean-wash" fill="#f9f8ed" opacity=".24"
+        d="M0 343C230 318 396 367 617 340S981 283 1190 301 1450 325 1600 289V310C1450 346 1399 340 1190 322S838 334 617 361 230 338 0 365Z" />
+  <g id="b270-ocean-surf" fill="none" stroke="#fffdf2" stroke-linecap="round">
+    <path d="M0 343C230 318 396 367 617 340S981 283 1190 301 1450 325 1600 289" stroke-width="2.8" opacity=".6" />
+    <path d="M0 292C208 270 381 310 593 289S973 254 1181 266 1444 288 1600 257" stroke-width="2" opacity=".38" />
+    <path d="M50 365Q174 352 282 366M370 381Q499 389 611 374M745 352Q887 326 1012 328M1194 339Q1335 359 1450 344" stroke-width="1.4" opacity=".38" />
+  </g>
+  <g id="b270-ocean-sand-detail" fill="none" stroke="#b4a88c" stroke-linecap="round" opacity=".17">
+    <path d="M105 414Q228 401 347 413M530 424Q669 412 777 417M1007 386Q1110 379 1227 391M1337 420Q1450 406 1562 411" />
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="ocean_gulls"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <%# A viewport-based layer keeps both birds on the lower-right sand when the coast is cropped on phones. %>
+  <defs>
+    <g id="b270-ocean-gull">
+      <ellipse cx="0" cy="12" rx="17" ry="2.5" fill="#968e78" opacity=".2" />
+      <path d="M-3 3-4 11-8 12M4 3 6 11 10 12" fill="none" stroke="#a18a60" stroke-width="1.2" stroke-linecap="round" />
+      <path d="M-19-5-11-4Q-6-11 4-8L8-15Q11-19 15-15Q18-11 13-8L11-1Q7 7-5 4Q-12 2-19-5Z" fill="#f7f5eb" />
+      <path d="M-17-5Q-5-11 5-6Q2 1-9 0Z" fill="#8898a0" />
+      <path d="M-17-5-10-3-7 0-12-1Z" fill="#52656c" />
+      <path d="M15-14 22-11 15-10Z" fill="#b49a63" />
+      <circle cx="13" cy="-14" r=".8" fill="#53636a" />
+    </g>
+  </defs>
+  <g class="b270-ocean-gulls" opacity=".65">
+    <use href="#b270-ocean-gull" transform="translate(0 -8) scale(.95 .95)" />
+    <use href="#b270-ocean-gull" transform="translate(60 3) scale(-1.15 1.15)" />
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="sage_sky" viewBox="0 0 1600 1000" preserveAspectRatio="none"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <linearGradient id="b270-meadow-blue-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#bdd8eb" stop-opacity=".8" />
+      <stop offset=".4" stop-color="#d1e2ea" stop-opacity=".55" />
+      <stop offset=".75" stop-color="#e1e8df" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="b270-meadow-cloud-fade" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#fffdf5" stop-opacity="0" />
+      <stop offset=".35" stop-color="#fffdf5" stop-opacity=".5" />
+      <stop offset=".7" stop-color="#fffdf5" stop-opacity=".35" />
+      <stop offset="1" stop-color="#fffdf5" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+  <rect width="1600" height="1000" fill="url(#b270-meadow-blue-sky)" />
+  <g id="b270-meadow-clouds" fill="url(#b270-meadow-cloud-fade)">
+    <path d="M20 105Q105 99 162 84T275 81Q322 82 376 72Q317 94 253 94T142 106Q78 111 20 105Z" />
+    <path d="M368 51Q448 45 497 34T586 36Q635 37 690 26Q628 46 562 47T458 52Q407 55 368 51Z" />
+    <path d="M1002 99Q1098 90 1160 74T1265 73Q1329 76 1400 61Q1328 86 1247 87T1130 99Q1065 105 1002 99Z" />
+    <path d="M1270 161Q1352 153 1405 139T1502 140Q1553 141 1610 128Q1546 151 1481 152T1371 163Q1315 166 1270 161Z" />
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="sage" viewBox="0 0 1600 440" preserveAspectRatio="xMaxYMax slice"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <clipPath id="b270-meadow-sky">
+      <path d="M0 280C160 180 360 180 560 250S900 260 1040 210 1400 200 1600 270V0H0Z" />
+    </clipPath>
+    <radialGradient id="b270-meadow-glow">
+      <stop offset="0" stop-color="#f8e8b6" stop-opacity=".55" />
+      <stop offset=".5" stop-color="#f6e8c4" stop-opacity=".25" />
+      <stop offset="1" stop-color="#f6e8c4" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="b270-meadow-rays" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#f8e8b6" stop-opacity="0" />
+      <stop offset=".45" stop-color="#f8e8b6" stop-opacity=".22" />
+      <stop offset="1" stop-color="#f8e8b6" stop-opacity=".4" />
+    </linearGradient>
+    <linearGradient id="b270-meadow-distant" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#c2cfb7" />
+      <stop offset="1" stop-color="#e1e8df" />
+    </linearGradient>
+    <linearGradient id="b270-meadow-middle" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#afc1a3" />
+      <stop offset="1" stop-color="#e1e8df" />
+    </linearGradient>
+    <linearGradient id="b270-meadow-near" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#9fb693" />
+      <stop offset="1" stop-color="#e1e8df" />
+    </linearGradient>
+  </defs>
+  <g clip-path="url(#b270-meadow-sky)">
+    <ellipse cx="1560" cy="245" rx="440" ry="200" fill="url(#b270-meadow-glow)" />
+    <path fill="url(#b270-meadow-rays)"
+          d="M1560 260 860 0 1020 0Z M1560 260 1180 0 1295 0Z M1560 260 1435 0 1515 0Z M1560 260 1605 0 1685 0Z M1560 260 1825 0 1940 0Z M1560 260 2100 0 2260 0Z" />
+    <circle cx="1560" cy="260" r="61" fill="#f6e5b0" opacity=".55" />
+  </g>
+  <path fill="url(#b270-meadow-distant)" opacity=".65"
+        d="M0 280C160 180 360 180 560 250S900 260 1040 210 1400 200 1600 270V440H0Z" />
+  <path fill="url(#b270-meadow-middle)" opacity=".55"
+        d="M0 320C240 260 350 260 550 300S850 340 1090 290 1420 260 1600 320V440H0Z" />
+  <path fill="url(#b270-meadow-near)" opacity=".45"
+        d="M0 370C200 340 430 350 640 375S1030 340 1220 360 1480 400 1600 370V440H0Z" />
+  <g id="b270-meadow-grass-distant" fill="none" stroke="#7e9672" stroke-width="1" stroke-linecap="round" opacity=".16">
+    <path d="M232 287Q232 275 226 269M232 287Q236 277 242 274" />
+    <path d="M405 301Q408 286 402 280M405 301Q399 292 393 290" />
+    <path d="M708 317Q706 305 711 299M708 317Q714 309 720 307" />
+    <path d="M1015 302Q1015 287 1009 281M1015 302Q1020 291 1026 289" />
+    <path d="M1278 287Q1280 273 1274 266M1278 287Q1284 278 1290 275" />
+    <path d="M1540 320Q1538 306 1544 299M1540 320Q1534 310 1528 308" />
+  </g>
+  <g id="b270-meadow-grass-near" fill="none" stroke="#7e9672" stroke-width="1.6" stroke-linecap="round" opacity=".24">
+    <path d="M110 409Q112 380 99 364M110 409Q119 387 130 380M110 409Q101 393 91 389" />
+    <path d="M153 415Q150 394 159 378M153 415Q145 402 136 398" />
+    <path d="M1434 418Q1433 392 1446 375M1434 418Q1424 399 1412 393" />
+    <path d="M1480 411Q1482 381 1470 366M1480 411Q1491 387 1505 380M1480 411Q1471 397 1463 393" />
+    <path d="M285 388Q287 367 279 356M285 388Q293 372 301 368M285 388Q278 378 271 375" />
+    <path d="M451 420Q448 398 457 385M451 420Q442 407 435 404" />
+    <path d="M635 408Q637 385 629 374M635 408Q644 391 653 387" />
+    <path d="M850 383Q849 363 855 354M850 383Q842 369 833 366" />
+    <path d="M1064 409Q1066 384 1057 371M1064 409Q1074 390 1084 386M1064 409Q1056 397 1047 393" />
+    <path d="M1227 425Q1224 403 1232 391M1227 425Q1218 410 1209 407" />
+    <path d="M1570 404Q1572 383 1564 371M1570 404Q1578 389 1587 385" />
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="light"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <%# CSS anchors the full-page grid to the unchanged scripture baseline. %>
+    <pattern id="b270-papyrus-fibres" width="4em" height="3.6em"
+             viewBox="0 0 120 108" patternUnits="userSpaceOnUse">
+      <g fill="none" stroke="#a48b60" stroke-width=".85" opacity=".23">
+        <path d="M0 12H120M0 48H120M0 84H120" />
+        <path d="M18 0Q16 28 19 60T18 108M55 0Q58 35 54 72T55 108M96 0Q94 30 97 67T96 108" />
+      </g>
+      <path d="M8 25H43M78 52H111M32 76H67" stroke="#fff9ed" stroke-width="1" opacity=".3" />
+    </pattern>
+    <pattern id="b270-papyrus-edge-top" width="240" height="12" patternUnits="userSpaceOnUse">
+      <path d="M0 0H240V5L228 7 218 4 203 6 191 3 175 7 162 5 149 8 132 5 118 6 103 3 91 7 77 5 61 8 49 4 35 6 22 3 10 7 0 5Z" fill="#c9bda4" />
+      <path d="M0 5L10 7 22 3 35 6 49 4 61 8 77 5 91 7 103 3 118 6 132 5 149 8 162 5 175 7 191 3 203 6 218 4 228 7 240 5" fill="none" stroke="#a48b60" stroke-opacity=".32" />
+    </pattern>
+    <pattern id="b270-papyrus-edge-side" width="12" height="240" patternUnits="userSpaceOnUse">
+      <path d="M0 0H5L7 14 4 28 6 43 3 59 7 74 5 89 8 105 4 121 6 137 3 152 7 168 5 186 8 203 4 221 5 240H0Z" fill="#c9bda4" />
+      <path d="M5 0L7 14 4 28 6 43 3 59 7 74 5 89 8 105 4 121 6 137 3 152 7 168 5 186 8 203 4 221 5 240" fill="none" stroke="#a48b60" stroke-opacity=".32" />
+    </pattern>
+    <linearGradient id="b270-papyrus-curl" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#bbaa89" />
+      <stop offset=".45" stop-color="#dfd3b9" />
+      <stop offset=".78" stop-color="#fff7e5" />
+      <stop offset="1" stop-color="#c5b38f" />
+    </linearGradient>
+    <radialGradient id="b270-papyrus-curl-shadow">
+      <stop offset="0" stop-color="#705b37" stop-opacity=".25" />
+      <stop offset="1" stop-color="#705b37" stop-opacity="0" />
+    </radialGradient>
+    <g id="b270-papyrus-corner">
+      <ellipse cx="29" cy="31" rx="43" ry="31" fill="url(#b270-papyrus-curl-shadow)" transform="rotate(-42 29 31)" />
+      <path d="M0 0H64Q31 14 0 64Z" fill="#c9bda4" />
+      <path d="M0 64Q15 27 64 0Q48 24 54 49Q29 43 0 64Z" fill="url(#b270-papyrus-curl)" stroke="#a48b60" stroke-opacity=".3" stroke-width=".7" />
+      <path d="M3 61Q26 43 54 49" fill="none" stroke="#fff9ed" stroke-opacity=".65" />
+    </g>
+  </defs>
+  <g class="b270-papyrus-grid">
+    <rect y="-100%" width="100%" height="200%" fill="url(#b270-papyrus-fibres)" />
+  </g>
+  <g class="b270-papyrus-edges">
+    <rect width="100%" height="12" fill="url(#b270-papyrus-edge-top)" />
+    <rect width="12" height="100%" fill="url(#b270-papyrus-edge-side)" />
+  </g>
+  <g class="b270-papyrus-edges b270-papyrus-opposite">
+    <rect width="100%" height="12" fill="url(#b270-papyrus-edge-top)" />
+    <rect width="12" height="100%" fill="url(#b270-papyrus-edge-side)" />
+  </g>
+  <use class="b270-papyrus-corner" href="#b270-papyrus-corner" />
+  <g class="b270-papyrus-opposite">
+    <use class="b270-papyrus-corner" href="#b270-papyrus-corner" />
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="dark"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <pattern id="b270-cedar-grain" width="600" height="900" patternUnits="userSpaceOnUse">
+      <g fill="#20190f" opacity=".32">
+        <path d="M44 0 38 92 49 166 35 246 43 325 30 412 40 492 29 578 42 659 34 744 48 825 44 900H57L61 824 48 743 57 658 43 578 53 492 44 413 56 326 48 248 62 166 51 92 57 0Z" />
+        <path d="M204 0 215 116 201 210 210 294 195 378 207 469 194 559 205 648 193 735 208 819 204 900H217L220 818 207 735 218 648 207 559 220 468 209 378 223 295 215 210 227 116 217 0Z" />
+        <path d="M372 0 359 104 371 193 356 283 369 369 358 460 372 547 359 635 373 723 362 815 372 900H385L375 814 387 723 373 635 386 547 372 459 383 369 370 282 385 193 373 105 385 0Z" />
+        <path d="M529 0 538 92 523 184 536 276 522 362 533 451 518 542 531 636 520 726 534 813 529 900H540L547 813 533 726 544 636 532 542 546 452 535 362 549 276 537 184 551 92 540 0Z" />
+      </g>
+      <g id="b270-cedar-fine-grain" fill="none" stroke="#ad8359" stroke-linecap="round" opacity=".17">
+        <path stroke-width="2" d="M75 0C51 134 85 209 65 330S79 525 62 653 82 811 75 900M241 0C260 112 231 202 250 314S229 511 247 629 225 802 241 900M402 0C383 127 413 223 393 345S418 534 398 665 414 810 402 900M565 0C581 123 552 223 574 348S552 548 571 677 552 807 565 900" />
+        <path d="M97 51 88 147 99 232M95 468 84 556 94 631 85 710M272 79 264 164 276 245 267 320M272 502 261 588 273 667 264 757 272 830M455 43 446 132 458 219 449 295M471 408 459 486 471 568M472 767 461 842" />
+        <path d="M163 47C150 163 167 221 150 271M150 416C165 481 151 539 160 617M316 171 307 262 318 347 308 429M311 671 302 753 313 845M491 109 481 195 492 281 482 359" />
+      </g>
+      <g id="b270-cedar-knots" fill="none" stroke="#9b744e" stroke-width="1.5" opacity=".2">
+        <path d="M143 261C113 290 108 342 126 385L143 425C158 390 175 346 162 302Z" />
+        <path d="M142 288C126 310 124 340 135 365L144 387C152 359 158 329 149 307Z" />
+        <path d="M141 315Q134 335 144 352Q150 332 141 315Z" />
+        <path d="M433 576C410 608 405 650 424 695L434 731C449 694 463 655 452 614Z" />
+        <path d="M433 604C421 627 420 650 430 677L435 695C443 671 448 646 440 624Z" />
+      </g>
+    </pattern>
+    <linearGradient id="b270-cedar-fade" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset=".28" stop-color="white" stop-opacity=".5" />
+      <stop offset=".7" stop-color="white" stop-opacity=".9" />
+      <stop offset="1" stop-color="white" />
+    </linearGradient>
+    <mask id="b270-cedar-mask">
+      <rect width="100%" height="100%" fill="url(#b270-cedar-fade)" />
+    </mask>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#b270-cedar-grain)" mask="url(#b270-cedar-mask)" />
+</svg>
+
+<%# Direct paths avoid SVG use-instance repainting when a hidden theme is revealed. %>
+<% spruce_tree_path = "M0 0-9 29-5 27-20 55-11 52-29 85-18 81-39 119-26 113-48 154-32 146-57 194-6 181-6 218H6V181L57 194 32 146 48 154 26 113 39 119 18 81 29 85 11 52 20 55 5 27 9 29Z" %>
+<svg class="b270-theme-scenery" data-scenery="dark_green" viewBox="0 0 1600 440" preserveAspectRatio="xMidYMax slice"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <linearGradient id="b270-spruce-fade" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="white" />
+      <stop offset=".75" stop-color="white" stop-opacity=".9" />
+      <stop offset="1" stop-color="white" stop-opacity="0" />
+    </linearGradient>
+    <mask id="b270-spruce-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="1600" height="440">
+      <rect width="1600" height="440" fill="url(#b270-spruce-fade)" />
+    </mask>
+  </defs>
+  <g id="b270-spruce-treeline" transform="translate(0 -24)">
+    <g id="b270-spruce-distant" fill="#66816b" opacity=".19" mask="url(#b270-spruce-mask)">
+      <rect id="b270-spruce-distant-ground" y="300" width="1600" height="164" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(15 145) scale(.64 .95)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(90 171) scale(.55 .82)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(164 112) scale(.7 1.1)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(244 157) scale(.6 .92)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(321 137) scale(.66 1.02)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(405 186) scale(.55 .82)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(478 163) scale(.67 .96)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(560 194) scale(.58 .83)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(643 180) scale(.6 .91)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(719 212) scale(.5 .77)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(790 192) scale(.58 .88)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(875 211) scale(.52 .78)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(950 174) scale(.62 .96)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1030 193) scale(.54 .84)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1110 148) scale(.7 1.02)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1195 166) scale(.58 .91)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1270 108) scale(.7 1.15)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1350 153) scale(.6 .94)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1435 129) scale(.64 1.05)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1515 168) scale(.58 .88)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1590 139) scale(.7 1)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(53 237) scale(.3 .36)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(205 225) scale(.34 .43)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(365 247) scale(.28 .31)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(520 231) scale(.33 .4)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(681 241) scale(.29 .34)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(834 218) scale(.36 .47)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1068 237) scale(.31 .37)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1235 244) scale(.28 .33)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#66816b" transform="translate(1394 228) scale(.34 .42)" />
+    </g>
+    <%# Keep the foreground outside the distant haze mask so no trees show through it. %>
+    <g id="b270-spruce-near" fill="#0c2017">
+      <rect id="b270-spruce-near-ground" y="350" width="1600" height="114" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(-15 104) scale(1.1 1.65)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(115 64) scale(1.08 1.78)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(228 153) scale(.87 1.4)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(343 121) scale(1 1.56)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(455 189) scale(.83 1.26)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(561 161) scale(.94 1.4)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(676 227) scale(.75 1.12)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(781 202) scale(.88 1.25)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(890 231) scale(.76 1.1)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(998 182) scale(.89 1.32)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1112 153) scale(.98 1.46)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1227 106) scale(1.03 1.65)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1343 162) scale(.9 1.38)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1460 73) scale(1.12 1.78)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1580 133) scale(.97 1.5)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(55 213) scale(.62 1.08)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(394 245) scale(.58 .94)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(622 132) scale(.78 1.52)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(944 263) scale(.55 .88)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1171 230) scale(.65 1.04)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1524 201) scale(.7 1.17)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(173 282) scale(.34 .4)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(283 265) scale(.4 .49)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(506 290) scale(.32 .35)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(727 271) scale(.38 .46)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(835 297) scale(.3 .31)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1054 277) scale(.36 .43)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1284 288) scale(.33 .36)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1398 260) scale(.42 .52)" />
+      <path class="b270-spruce-tree" d="<%= spruce_tree_path %>" fill="#0c2017" transform="translate(1552 294) scale(.31 .33)" />
+    </g>
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="dark_blue" viewBox="0 0 1600 440" preserveAspectRatio="xMaxYMax slice"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <defs>
+    <radialGradient id="b270-moon-halo">
+      <stop offset="0" stop-color="#c7d8ec" stop-opacity=".16" />
+      <stop offset=".45" stop-color="#9fb7d3" stop-opacity=".07" />
+      <stop offset="1" stop-color="#9fb7d3" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="b270-lake-water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#526e91" stop-opacity=".14" />
+      <stop offset="1" stop-color="#526e91" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="b270-moon-reflection" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#c6d6e9" stop-opacity=".3" />
+      <stop offset=".5" stop-color="#abc3df" stop-opacity=".17" />
+      <stop offset="1" stop-color="#abc3df" stop-opacity="0" />
+    </linearGradient>
+    <filter id="b270-water-far" x="-20%" y="-50%" width="140%" height="200%" color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency=".008 .14" numOctaves="1" seed="7" result="ripples" />
+      <feDisplacementMap in="SourceGraphic" in2="ripples" scale="2" xChannelSelector="R" yChannelSelector="G" />
+      <feGaussianBlur stdDeviation=".15" />
+    </filter>
+    <filter id="b270-water-middle" x="-20%" y="-50%" width="140%" height="200%" color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency=".008 .14" numOctaves="1" seed="7" result="ripples" />
+      <feDisplacementMap in="SourceGraphic" in2="ripples" scale="5" xChannelSelector="R" yChannelSelector="G" />
+      <feGaussianBlur stdDeviation=".45" />
+    </filter>
+    <filter id="b270-water-near" x="-20%" y="-50%" width="140%" height="200%" color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency=".008 .14" numOctaves="1" seed="7" result="ripples" />
+      <feDisplacementMap in="SourceGraphic" in2="ripples" scale="9" xChannelSelector="R" yChannelSelector="G" />
+      <feGaussianBlur stdDeviation="1.1" />
+    </filter>
+    <mask id="b270-greek-reflection" maskUnits="userSpaceOnUse" x="0" y="240" width="1600" height="200">
+      <g fill="white" font-family="Georgia, Times New Roman, serif" font-size="28" text-anchor="middle">
+        <g filter="url(#b270-water-far)">
+          <text transform="translate(1510 250) scale(.38 -.22)">ΟΛΟΓΟΣ</text>
+          <text transform="translate(1510 270) scale(.5 -.28)">ΘΕΟΣΗΝ</text>
+        </g>
+        <g filter="url(#b270-water-middle)">
+          <text transform="translate(1510 293) scale(.66 -.36)">ΘΕΟΝΚΑΙ</text>
+          <text transform="translate(1510 319) scale(.8 -.44)">ΗΝΠΡΟΣΤΟΝ</text>
+          <text transform="translate(1510 348) scale(.95 -.54)">ΚΑΙΟΛΟΓΟΣ</text>
+        </g>
+        <g filter="url(#b270-water-near)">
+          <text transform="translate(1510 380) scale(1.1 -.68)">ΗΝΟΛΟΓΟΣ</text>
+          <text transform="translate(1510 411) scale(1.4 -.85)">ΕΝΑΡΧΗ</text>
+        </g>
+      </g>
+    </mask>
+    <radialGradient id="b270-moon-mobile-glow">
+      <stop offset="0" stop-color="#c6d6e9" stop-opacity=".18" />
+      <stop offset=".5" stop-color="#abc3df" stop-opacity=".07" />
+      <stop offset="1" stop-color="#abc3df" stop-opacity="0" />
+    </radialGradient>
+    <clipPath id="b270-lake-clip">
+      <rect y="240" width="1600" height="200" />
+    </clipPath>
+  </defs>
+  <circle cx="1510" cy="162" r="105" fill="url(#b270-moon-halo)" />
+  <circle id="b270-midnight-moon" cx="1510" cy="162" r="31" fill="#c7d5e5" opacity=".55" />
+  <g fill="#71869d" opacity=".1">
+    <ellipse cx="1501" cy="155" rx="9" ry="12" />
+    <ellipse cx="1518" cy="173" rx="11" ry="7" />
+  </g>
+  <path id="b270-lake-shore" fill="#0c1829" opacity=".42"
+        d="M0 224Q110 201 230 216T465 220 710 226 950 215 1190 222 1420 224 1600 218V240H0Z" />
+  <rect y="240" width="1600" height="200" fill="url(#b270-lake-water)" />
+  <path d="M0 240H1600" stroke="#8fa7c3" stroke-width=".7" opacity=".12" />
+  <g clip-path="url(#b270-lake-clip)">
+    <ellipse cx="1510" cy="305" rx="145" ry="125" fill="url(#b270-moon-halo)" opacity=".6" />
+    <rect id="b270-lake-reflection" fill="url(#b270-moon-reflection)"
+          x="0" y="240" width="1600" height="200" mask="url(#b270-greek-reflection)" />
+    <%# Phones use a quiet pool of moonlight instead of the reflected scripture. %>
+    <ellipse class="b270-mobile-scenery" cx="1510" cy="332" rx="65" ry="92" fill="url(#b270-moon-mobile-glow)" />
+    <%# The rippled letters supply the desktop water texture without straight lines crossing the reflections. %>
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery" data-scenery="hebrew_water"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <%# A viewport-based layer keeps the faint reflection beneath the Hebrew column on narrow screens. %>
+  <g class="b270-hebrew-water" lang="he" direction="rtl" unicode-bidi="isolate"
+     fill="#c6d6e9" text-anchor="middle" opacity=".4" font-family="Noto Serif Hebrew, Times New Roman, serif">
+    <g filter="url(#b270-water-far)" opacity=".3">
+      <text transform="translate(0 10) scale(.38 -.22)">הארץ</text>
+      <text transform="translate(0 30) scale(.5 -.28)">ואת</text>
+    </g>
+    <g filter="url(#b270-water-middle)" opacity=".2">
+      <text transform="translate(0 53) scale(.66 -.36)">השּׁמים</text>
+      <text transform="translate(0 79) scale(.8 -.44)">את</text>
+      <text transform="translate(0 108) scale(.95 -.54)">אלהים</text>
+    </g>
+    <g filter="url(#b270-water-near)" opacity=".09">
+      <text transform="translate(0 140) scale(1.1 -.68)">בּרא</text>
+      <text transform="translate(0 171) scale(1.4 -.85)">בּראשׁית</text>
+    </g>
+  </g>
+</svg>
+
+<svg class="b270-theme-scenery b270-theme-scripture" data-scenery="scripture"
+     xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <%# Shared across themes; explicit lines preserve word breaks and Hebrew vowel marks. %>
+  <g class="b270-scripture-letters" fill="currentColor" text-anchor="middle" opacity=".22">
+    <g lang="he" direction="rtl" unicode-bidi="isolate" font-family="Noto Serif Hebrew, Times New Roman, serif">
+      <text x="10%" y="30%" dy="-3.2em">בּראשׁית</text>
+      <text x="10%" y="30%" dy="-2em">בּרא</text>
+      <text x="10%" y="30%" dy="-.8em">אלהים</text>
+      <text x="10%" y="30%" dy=".4em">את</text>
+      <text x="10%" y="30%" dy="1.6em">השּׁמים</text>
+      <text x="10%" y="30%" dy="2.8em">ואת</text>
+      <text x="10%" y="30%" dy="4em">הארץ</text>
+    </g>
+    <g lang="el" direction="ltr" text-anchor="middle" font-family="Georgia, Times New Roman, serif">
+      <text y="30%" dy="-3.2em"><tspan>ΕΝΑΡΧΗ</tspan></text>
+      <text y="30%" dy="-2em"><tspan>ΗΝΟΛΟΓΟΣ</tspan></text>
+      <text y="30%" dy="-.8em"><tspan>ΚΑΙΟΛΟΓΟΣ</tspan></text>
+      <text y="30%" dy=".4em"><tspan>ΗΝΠΡΟΣΤΟΝ</tspan></text>
+      <text y="30%" dy="1.6em"><tspan>ΘΕΟΝΚΑΙ</tspan></text>
+      <text y="30%" dy="2.8em"><tspan>ΘΕΟΣΗΝ</tspan></text>
+      <text y="30%" dy="4em"><tspan>ΟΛΟΓΟΣ</tspan></text>
+    </g>
+  </g>
+</svg>

data/app/views/bible270/shared/_theme_ui.html.erb

@@ -0,0 +1,108 @@
+<script nonce="<%= content_security_policy_nonce %>" data-refresh-path="<%= refresh_session_path %>">
+  (() => {
+    if (window.Bible270ThemeUI) {
+      window.Bible270ThemeUI.initialize();
+      return;
+    }
+
+    const refreshPath = document.currentScript.dataset.refreshPath;
+    const selector = "select[data-b270-theme-url]";
+
+    function status(select, message) {
+      const region = document.getElementById(select.dataset.b270ThemeStatus || "b270-theme-status");
+      if (region) {
+        region.textContent = message;
+        region.dataset.error = String(message.startsWith("Couldn’t save"));
+      }
+    }
+
+    function syncColorScheme() {
+      const mode = document.body.dataset.displayMode || "system";
+      document.documentElement.dataset.b270DisplayMode = mode;
+      const meta = document.getElementById("b270-color-scheme");
+      if (meta) {
+        meta.content = ["light", "sage", "mist"].includes(mode) ? "only light" :
+          ["dark", "dark_green", "dark_blue"].includes(mode) ? "dark" : "light dark";
+      }
+    }
+
+    function initialize() {
+      syncColorScheme();
+      document.querySelectorAll("[data-b270-theme-fallback]").forEach((button) => { button.hidden = true; });
+    }
+
+    document.addEventListener("change", async (event) => {
+      const select = event.target;
+      if (!select.matches(selector) || select.disabled) return;
+
+      const mode = select.value;
+      const group = Array.from(document.querySelectorAll(selector))
+        .filter((other) => other.isConnected && (
+          other.dataset.b270ThemeUrl === select.dataset.b270ThemeUrl ||
+          (other.dataset.b270ThemeApply === "true" && select.dataset.b270ThemeApply === "true")
+        ))
+        .map((other) => ({ select: other, previous: other.dataset.b270SavedTheme }));
+      group.forEach(({ select: other }) => {
+        other.disabled = true;
+        other.setAttribute("aria-busy", "true");
+        if (other !== select) {
+          const region = document.getElementById(other.dataset.b270ThemeStatus || "b270-theme-status");
+          if (region?.dataset.error === "true") status(other, "");
+        }
+      });
+      status(select, "Saving theme…");
+
+      try {
+        // A suspended mobile tab may need a fresh session and CSRF token.
+        const session = await fetch(refreshPath, {
+          credentials: "same-origin", cache: "no-store", headers: { Accept: "text/plain" }
+        });
+        const token = session.headers.get("X-CSRF-Token");
+        if (!session.ok || !token) throw new Error("Could not refresh the session.");
+        const meta = document.querySelector("meta[name='csrf-token']");
+        if (meta) meta.content = token;
+        document.querySelectorAll("input[name='authenticity_token']").forEach((input) => { input.value = token; });
+
+        const response = await fetch(select.dataset.b270ThemeUrl, {
+          method: "PATCH", credentials: "same-origin", cache: "no-store",
+          headers: { Accept: "application/json", "Content-Type": "application/json", "X-CSRF-Token": token },
+          body: JSON.stringify({ display_mode: mode })
+        });
+        const result = await response.json();
+        if (!response.ok || result.display_mode !== mode) throw new Error("Theme was not saved.");
+
+        group.forEach(({ select: other }) => {
+          other.value = mode;
+          other.dataset.b270SavedTheme = mode;
+        });
+        if (!select.isConnected) return;
+        if (select.dataset.b270ThemeApply === "true") {
+          document.body.dataset.displayMode = mode;
+          syncColorScheme();
+        }
+        status(select, "Theme saved.");
+      } catch (_error) {
+        group.forEach(({ select: other, previous }) => { other.value = previous; });
+        if (select.isConnected) status(select, "Couldn’t save the theme. Please select it again to retry.");
+      } finally {
+        group.forEach(({ select: other }) => {
+          other.disabled = false;
+          other.removeAttribute("aria-busy");
+        });
+      }
+    });
+
+    // Do not race a profile submission against an in-flight theme update.
+    document.addEventListener("submit", (event) => {
+      const select = event.target.querySelector(selector);
+      if (select?.disabled) {
+        event.preventDefault();
+        status(select, "Please wait for the theme to finish saving.");
+      }
+    });
+
+    document.addEventListener("turbo:load", initialize);
+    window.Bible270ThemeUI = { initialize };
+    initialize();
+  })();
+</script>

data/app/views/layouts/bible270/application.html.erb

@@ -1,7 +1,16 @@
 <!DOCTYPE html>
-<html lang="en">
+<%
+  display_mode = current_reader&.effective_display_mode || Bible270::Reader::DEFAULT_DISPLAY_MODE
+  color_scheme = case display_mode
+                 when "light", "sage", "mist" then "only light"
+                 when "system" then "light dark"
+                 else "dark"
+                 end
+%>
+<html lang="en" data-b270-display-mode="<%= display_mode %>">
 <head>
   <meta charset="utf-8">
+  <meta id="b270-color-scheme" name="color-scheme" content="<%= color_scheme %>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= content_for?(:title) ? yield(:title) : Bible270.config.app_name %></title>
   <%= csrf_meta_tags %>
@@ -13,7 +22,8 @@
   <%= render "bible270/shared/styles" %>
   <%= yield :head %>
 </head>
-<body class="b270" data-display-mode="<%= current_reader&.effective_display_mode || Bible270::Reader::DEFAULT_DISPLAY_MODE %>">
+<body class="b270" data-display-mode="<%= display_mode %>">
+  <%= render "bible270/shared/theme_scenery" %>
   <div class="b270-wrap">
     <%= render "bible270/shared/header" %>
     <% if flash[:alert] %><div class="b270-flash alert"><%= flash[:alert] %></div><% end %>
@@ -23,6 +33,7 @@
     <%= render 'bible270/shared/day_index', expanded: content_for?(:expand_day_index) unless content_for?(:hide_day_index) %>
     <%= b270_footer %>
   </div>
+  <%= render "bible270/shared/theme_ui" %>
   <%= render "bible270/shared/scripture_popups" %>
   <%= render "bible270/shared/video_embeds" %>
 </body>

data/config/routes.rb

@@ -44,6 +44,7 @@ Bible270::Engine.routes.draw do
 
   get   'profile',                       to: 'profiles#edit', as: :profile
   patch 'profile',                       to: 'profiles#update'
+  patch 'profile/theme',                 to: 'profiles#update_theme', as: :profile_theme
   delete 'profile/avatar', to: 'profiles#remove_avatar', as: :profile_avatar
 
   get 'reflections', to: 'comments#index', as: :reflections

data/lib/bible270/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bible270
-  VERSION = '1.10.2'
+  VERSION = '1.11.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bible270
 version: !ruby/object:Gem::Version
-  version: 1.10.2
+  version: 1.11.1
 platform: ruby
 authors:
 - Andrew vonderLuft
@@ -189,6 +189,8 @@ files:
 - app/views/bible270/shared/_reflections.html.erb
 - app/views/bible270/shared/_scripture_popups.html.erb
 - app/views/bible270/shared/_styles.html.erb
+- app/views/bible270/shared/_theme_scenery.html.erb
+- app/views/bible270/shared/_theme_ui.html.erb
 - app/views/bible270/shared/_track_bars.html.erb
 - app/views/bible270/shared/_video_embeds.html.erb
 - app/views/bible270/sign_in_mailer/magic_link.html.erb