Add themed screenshots and useful troubleshooting guides

README.md

@@ -173,3 +173,16 @@ The documentation content is dual-licensed under
 and [MIT](https://opensource.org/licenses/MIT) for code samples.
 
 Mobile documentation captures use the actual mobile shell with Android user-agent and touch emulation at a 412×915 CSS-pixel viewport. They use sample server state and are layout examples, not physical-device or Android permission-dialog captures.
+
+### Screenshot themes
+
+Current client screenshots use paired assets: `name.png` for light and
+`name-dark.png` for dark. Wrap both images in `.theme-screenshot` with
+`.screenshot-light` and `.screenshot-dark`; the site selects the matching
+image from Starlight’s `data-theme`, including system appearance. Preserve
+the same sample state in both captures.
+
+Screenshots show actual client components populated with local sample data.
+Mobile captures use the Android responsive shell in a browser, rather than
+a physical device. The live document example is a local document canvas;
+it does not demonstrate an active server plugin session.

src/content/docs/admin/acl.mdx

@@ -15,7 +15,7 @@ ACLs are powerful, but easy to over-engineer. Most servers do fine
 with mostly-roles plus a handful of per-channel ACL tweaks.
 
 
-<img src="/screenshot-admin-acl-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-acl-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-acl-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Opening the ACL editor
 

src/content/docs/admin/bans.mdx

@@ -15,7 +15,7 @@ The **Ban list** is a server-wide block list of:
 Banned identities cannot connect. The list survives restarts.
 
 
-<img src="/screenshot-admin-bans-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-bans-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-bans-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Ban from the user list
 

src/content/docs/admin/channels.mdx

@@ -11,7 +11,7 @@ Channels are the rooms in your server. Users sit in one channel at a
 time for voice; chat is per channel.
 
 
-<img src="/screenshot-admin-acl-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-acl-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-acl-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Create a channel
 

src/content/docs/admin/emotes.mdx

@@ -15,7 +15,7 @@ This feature requires the [file server](/server/features/file-server/)
 to be enabled and the **Manage emotes** permission.
 
 
-<img src="/screenshot-admin-emotes-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-emotes-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-emotes-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Upload an emote
 

src/content/docs/admin/groups.mdx

@@ -13,7 +13,7 @@ should use instead. Groups are still useful for **per-channel
 membership lists** that should not be promoted to server-wide roles.
 
 
-<img src="/screenshot-admin-roles-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-roles-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-roles-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Groups vs roles
 

src/content/docs/admin/marketplace.mdx

@@ -5,7 +5,7 @@ description: Browse plugins and check server support before installing them.
 
 Open **Settings, Marketplace** to browse the catalogue exposed to your client. Availability depends on the catalogue, network access, and the connected server’s plugin capabilities.
 
-<img src="/screenshot-admin-marketplace-1.png" alt="Current Marketplace screen with Refresh and an empty sample catalogue" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-marketplace-1.png" alt="Current Marketplace screen with Refresh and an empty sample catalogue" /><img class="screenshot-dark" src="/screenshot-admin-marketplace-1-dark.png" alt="Current Marketplace screen with Refresh and an empty sample catalogue" /></span>
 
 ## Check compatibility
 

src/content/docs/admin/onboarding.mdx

@@ -20,7 +20,7 @@ If you have used Discord's "Community" onboarding, this is the same
 idea.
 
 
-<img src="/screenshot-admin-onboarding-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-onboarding-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-onboarding-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## What you can configure
 

src/content/docs/admin/roles.mdx

@@ -13,7 +13,7 @@ everywhere on the server. Roles are the bread-and-butter of
 administration.
 
 
-<img src="/screenshot-admin-roles-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-roles-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-roles-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Built-in roles
 

src/content/docs/admin/users.mdx

@@ -18,7 +18,7 @@ specific username on your server. Registered users can:
 This page covers the **Registered users** tab in the admin panel.
 
 
-<img src="/screenshot-admin-users-1.png" alt="Current client administration screen with sample data" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-admin-users-1.png" alt="Current client administration screen with sample data" /><img class="screenshot-dark" src="/screenshot-admin-users-1-dark.png" alt="Current client administration screen with sample data" /></span>
 
 ## Register a user
 

src/content/docs/getting-started/android.mdx

@@ -16,7 +16,7 @@ small adjustments for touch.
 
 
 
-<img src="/screenshot-mobile-chat.png" alt="Current mobile conversation with sample members using anime, car, flower, and dog avatars, plus the call bar and message composer" style="width: 100%; max-width: 360px; margin: 0 auto;" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-mobile-chat.png" alt="Current mobile conversation with sample members using anime, car, flower, and dog avatars, plus the call bar and message composer" style="width: 100%; max-width: 360px; margin: 0 auto;" /><img class="screenshot-dark" src="/screenshot-mobile-chat-dark.png" alt="Current mobile conversation with sample members using anime, car, flower, and dog avatars, plus the call bar and message composer" style="width: 100%; max-width: 360px; margin: 0 auto;" /></span>
 
 The screenshots show the current phone layout with a sample community.
 
@@ -59,21 +59,21 @@ notifications. Open **Settings, Battery, Fancy Mumble** and pick
 
 The **Channels**, **Friends**, and **Settings** tabs sit at the bottom of the navigation screen. Select a channel to open its conversation; use **Back** to return to the channel list. The server-strip control shows or hides saved servers.
 
-<img src="/screenshot-mobile-channels.png" alt="Current mobile channel list with a lounge and five members with distinct avatars" style="width: 100%; max-width: 360px; margin: 0 auto;" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-mobile-channels.png" alt="Current mobile channel list with a lounge and five members with distinct avatars" style="width: 100%; max-width: 360px; margin: 0 auto;" /><img class="screenshot-dark" src="/screenshot-mobile-channels-dark.png" alt="Current mobile channel list with a lounge and five members with distinct avatars" style="width: 100%; max-width: 360px; margin: 0 auto;" /></span>
 
 Chat gives the conversation the whole screen. Its composer stays at the bottom, and an active voice call adds a compact call bar above it. File-sharing controls depend on the connected server's capabilities.
 
 ## Call controls
 
 Tap **In voice** on the call bar to expand the call screen. It shows the channel's participants and their audio states. Use the large microphone and headphones controls to mute or deafen, **Disconnect** to leave voice, and the down arrow to return to chat.
 
-<img src="/screenshot-mobile-voice.png" alt="Expanded mobile call screen showing five participants, listening and muted states, microphone and headphones controls, and Disconnect" style="width: 100%; max-width: 360px; margin: 0 auto;" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-mobile-voice.png" alt="Expanded mobile call screen showing five participants, listening and muted states, microphone and headphones controls, and Disconnect" style="width: 100%; max-width: 360px; margin: 0 auto;" /><img class="screenshot-dark" src="/screenshot-mobile-voice-dark.png" alt="Expanded mobile call screen showing five participants, listening and muted states, microphone and headphones controls, and Disconnect" style="width: 100%; max-width: 360px; margin: 0 auto;" /></span>
 
 ## Profiles and message actions
 
 Tap a member's name or avatar to inspect their profile and available actions. Profiles can include their own avatar, banner, status, pronouns, and bio. Long-press a message for its available actions, such as reply, reaction, or copy; moderation actions depend on your permissions.
 
-<img src="/screenshot-mobile-profile.png" alt="Mobile profile sheet for Rin with anime avatar and banner, pronouns, sketching status, bio, and profile actions" style="width: 100%; max-width: 360px; margin: 0 auto;" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-mobile-profile.png" alt="Mobile profile sheet for Rin with anime avatar and banner, pronouns, sketching status, bio, and profile actions" style="width: 100%; max-width: 360px; margin: 0 auto;" /><img class="screenshot-dark" src="/screenshot-mobile-profile-dark.png" alt="Mobile profile sheet for Rin with anime avatar and banner, pronouns, sketching status, bio, and profile actions" style="width: 100%; max-width: 360px; margin: 0 auto;" /></span>
 
 ## Battery and data
 

src/content/docs/getting-started/connect.mdx

@@ -10,7 +10,7 @@ Ask the server owner for its host name, port, and any password. The default Mumb
 3. Save the entry, select it in the server list, and choose **Connect**.
 4. Complete any server password or account prompt. The app can remember passwords in the operating system's credential store.
 
-<img src="/screenshot-getting-started-connect-1.png" alt="Current Add a server dialog with address, port, username, identity, and password fields" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-getting-started-connect-1.png" alt="Current Add a server dialog with address, port, username, identity, and password fields" /><img class="screenshot-dark" src="/screenshot-getting-started-connect-1-dark.png" alt="Current Add a server dialog with address, port, username, identity, and password fields" /></span>
 
 The saved entry belongs to the identity you chose. Use your server owner's address; sample addresses in documentation are examples.
 

src/content/docs/getting-started/first-call.mdx

@@ -5,7 +5,7 @@ description: Join a channel, enable voice, and choose an activation mode.
 
 After connecting, select a channel in the sidebar and use its **Join** action. Viewing a channel's chat and joining its voice room are separate actions.
 
-<img src="/screenshot-getting-started-first-call-1.png" alt="Current lounge channel showing five sample members and the voice dock at the bottom of the sidebar" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-getting-started-first-call-1.png" alt="Current lounge channel showing five sample members and the voice dock at the bottom of the sidebar" /><img class="screenshot-dark" src="/screenshot-getting-started-first-call-1-dark.png" alt="Current lounge channel showing five sample members and the voice dock at the bottom of the sidebar" /></span>
 
 ## Enable voice
 
@@ -15,7 +15,7 @@ Use the microphone control in your voice dock. If it says **Enable voice**, the
 
 The **Activation mode** cards offer **Voice activation**, **Continuous**, and **Push to talk**. Voice activation transmits while you speak; Continuous transmits continuously; Push to talk transmits while your chosen shortcut is held.
 
-<img src="/screenshot-getting-started-first-call-2.png" alt="Current Voice settings with device selectors, activation cards, and automatic or manual voice-gate calibration" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-getting-started-first-call-2.png" alt="Current Voice settings with device selectors, activation cards, and automatic or manual voice-gate calibration" /><img class="screenshot-dark" src="/screenshot-getting-started-first-call-2-dark.png" alt="Current Voice settings with device selectors, activation cards, and automatic or manual voice-gate calibration" /></span>
 
 ## Calibrate and listen
 

src/content/docs/getting-started/install.mdx

@@ -11,7 +11,7 @@ import { Icon } from 'astro-icon/components';
 Fancy Mumble runs on Windows, Linux, and Android. Pick your platform
 below.
 
-<img src="/mainpage.png" alt="Fancy Mumble in use: a community lounge with five members, personal avatars, chat messages, and voice controls" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/mainpage.png" alt="Fancy Mumble in use: a community lounge with five members, personal avatars, chat messages, and voice controls" /><img class="screenshot-dark" src="/mainpage-dark.png" alt="Fancy Mumble in use: a community lounge with five members, personal avatars, chat messages, and voice controls" /></span>
 
 A sample community after connecting. Your first launch guides you through setup; then you can add your community''s server.
 
@@ -116,7 +116,7 @@ name, interface mode, and theme. Choose **Get started** to open the server
 list, which is empty until you add a server.
 
 
-<img src="/screenshot-getting-started-install-2.png" alt="Welcome setup asking what name other users should see, step one of four" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-getting-started-install-2.png" alt="Welcome setup asking what name other users should see, step one of four" /><img class="screenshot-dark" src="/screenshot-getting-started-install-2-dark.png" alt="Welcome setup asking what name other users should see, step one of four" /></span>
 
 If you do not see this screen, check
 [Common issues](/troubleshooting/common-issues/).

src/content/docs/index.mdx

@@ -5,7 +5,7 @@ template: splash
 hero:
   tagline: A modern, feature-rich voice chat for gaming, podcasts, communities, and study groups.
   image:
-    html: '<img src="/mainpage.png" alt="Fancy Mumble current interface with sample community members and chat" style="width: 100%; height: auto; max-width: 100%;" />'
+    html: '<span class="theme-screenshot"><img class="screenshot-light" src="/mainpage.png" alt="Fancy Mumble current interface with sample community members and chat" style="width: 100%; height: auto; max-width: 100%;" /><img class="screenshot-dark" src="/mainpage-dark.png" alt="Fancy Mumble current interface with sample community members and chat" style="width: 100%; height: auto; max-width: 100%;" /></span>'
   actions:
     - text: Get started in 5 minutes
       link: /getting-started/install/

src/content/docs/server/features/link-previews.mdx

@@ -25,4 +25,4 @@ These limits bound page fetches, redirects, parallel work, and thumbnail size. S
 
 The destination site sees a request from your server. Outbound DNS, firewall, and proxy rules can prevent a preview from loading. Check the link-preview service logs, then test a public page with Open Graph metadata. A page without suitable metadata may produce only a text link.
 
-<img src="/screenshot-server-features-link-previews-1.png" alt="Current chat with an illustrated flower link preview" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-server-features-link-previews-1.png" alt="Current chat with an illustrated flower link preview" /><img class="screenshot-dark" src="/screenshot-server-features-link-previews-1-dark.png" alt="Current chat with an illustrated flower link preview" /></span>

src/content/docs/server/features/persistent-chat.mdx

@@ -21,4 +21,4 @@ Send a message, disconnect, reconnect with the same identity, and confirm that h
 
 Moving an existing deployment has separate history limitations. Read [Migrating to Starling](/server/migrating-to-starling/) before importing its database.
 
-<img src="/screenshot-server-features-persistent-chat-1.png" alt="Current conversation showing sample messages from yesterday" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-server-features-persistent-chat-1.png" alt="Current conversation showing sample messages from yesterday" /><img class="screenshot-dark" src="/screenshot-server-features-persistent-chat-1-dark.png" alt="Current conversation showing sample messages from yesterday" /></span>

src/content/docs/server/features/reactions.mdx

@@ -12,7 +12,7 @@ Starling handles reactions and polls through its **social service**. The same se
 The service is included in the default Starling stack. For a custom deployment, check that `social` is running and healthy. See [feature availability](/server/features/) and the [Starling service inventory](https://github.com/Fancy-Mumble/starling/blob/main/docs/SERVICES.md).
 
 
-<img src="/screenshot-server-features-reactions-1.png" alt="Current chat with a two-person art reaction and an open community poll" />
+<span class="theme-screenshot"><img class="screenshot-light" src="/screenshot-server-features-reactions-1.png" alt="Current chat with a two-person art reaction and an open community poll" /><img class="screenshot-dark" src="/screenshot-server-features-reactions-1-dark.png" alt="Current chat with a two-person art reaction and an open community poll" /></span>
 
 ## Reactions