docs: Auto-switch screenshots based on light/dark theme

Use CSS classes (light-only/dark-only) in Starlight docs and GitHub's
#gh-light-mode-only/#gh-dark-mode-only fragments in README so only
the matching theme screenshot is shown.

Author: shridarpatil

README.md

@@ -4,7 +4,8 @@
 
 Modern, open-source WhatsApp Business Platform. Single binary app.
 
-![Dashboard](docs/public/images/dashboard-dark.png)
+![Dashboard](docs/public/images/dashboard-light.png#gh-light-mode-only)
+![Dashboard](docs/public/images/dashboard-dark.png#gh-dark-mode-only)
 
 ## Features
 
@@ -38,13 +39,14 @@ Modern, open-source WhatsApp Business Platform. Single binary app.
 <details>
 <summary>View more screenshots</summary>
 
-![Dashboard Light](docs/public/images/dashboard-light.png)
-![Chatbot Dark](docs/public/images/chatbot-dark.png)
-![Chatbot Light](docs/public/images/chatbot-light.png)
-![Agent Analytics Dark](docs/public/images/agent-analytics-dark.png)
-![Agent Analytics Light](docs/public/images/agent-analytics-light.png)
-![Conversation Flow Builder Dark](docs/public/images/conversation-flow-dark.png)
-![Conversation Flow Builder Light](docs/public/images/conversation-flow-light.png)
+![Dashboard](docs/public/images/dashboard-light.png#gh-light-mode-only)
+![Dashboard](docs/public/images/dashboard-dark.png#gh-dark-mode-only)
+![Chatbot](docs/public/images/chatbot-light.png#gh-light-mode-only)
+![Chatbot](docs/public/images/chatbot-dark.png#gh-dark-mode-only)
+![Agent Analytics](docs/public/images/agent-analytics-light.png#gh-light-mode-only)
+![Agent Analytics](docs/public/images/agent-analytics-dark.png#gh-dark-mode-only)
+![Conversation Flow Builder](docs/public/images/conversation-flow-light.png#gh-light-mode-only)
+![Conversation Flow Builder](docs/public/images/conversation-flow-dark.png#gh-dark-mode-only)
 ![Templates](docs/public/images/11-templates.png)
 ![Campaigns](docs/public/images/13-campaigns.png)
 

docs/src/content/docs/features/chatbot.mdx

@@ -5,8 +5,8 @@ description: Automate customer conversations with intelligent chatbots
 
 import { Card, CardGrid, Steps, Aside } from '@astrojs/starlight/components';
 
-![Chatbot Overview (Light)](/whatomate/images/chatbot-light.png)
-![Chatbot Overview (Dark)](/whatomate/images/chatbot-dark.png)
+<img src="/whatomate/images/chatbot-light.png" alt="Chatbot Overview" class="light-only" />
+<img src="/whatomate/images/chatbot-dark.png" alt="Chatbot Overview" class="dark-only" />
 
 ## Overview
 
@@ -180,8 +180,8 @@ Design multi-step conversation flows with branching logic to guide customers thr
 
 ### Flow Builder
 
-![Conversation Flow Builder (Light)](/whatomate/images/conversation-flow-light.png)
-![Conversation Flow Builder (Dark)](/whatomate/images/conversation-flow-dark.png)
+<img src="/whatomate/images/conversation-flow-light.png" alt="Conversation Flow Builder" class="light-only" />
+<img src="/whatomate/images/conversation-flow-dark.png" alt="Conversation Flow Builder" class="dark-only" />
 
 The visual flow builder allows you to:
 - Create multiple conversation steps

docs/src/content/docs/features/dashboard.mdx

@@ -5,8 +5,8 @@ description: Monitor your WhatsApp business at a glance
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-<img src="/whatomate/images/dashboard-light.png" alt="Whatomate Dashboard (Light)" />
-<img src="/whatomate/images/dashboard-dark.png" alt="Whatomate Dashboard (Dark)" />
+<img src="/whatomate/images/dashboard-light.png" alt="Whatomate Dashboard" class="light-only" />
+<img src="/whatomate/images/dashboard-dark.png" alt="Whatomate Dashboard" class="dark-only" />
 
 ## Overview
 
@@ -77,8 +77,8 @@ All widgets and dashboard metrics reflect the selected time period. Number widge
 
 ### Agent Analytics
 
-<img src="/whatomate/images/agent-analytics-light.png" alt="Agent Analytics (Light)" />
-<img src="/whatomate/images/agent-analytics-dark.png" alt="Agent Analytics (Dark)" />
+<img src="/whatomate/images/agent-analytics-light.png" alt="Agent Analytics" class="light-only" />
+<img src="/whatomate/images/agent-analytics-dark.png" alt="Agent Analytics" class="dark-only" />
 
 The Agent Analytics page provides performance metrics for your support team, including transfers handled, active conversations, average resolution time, queue time, and break time. It also shows transfer trends over time, conversation source breakdowns, and agent-by-agent comparisons.
 

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

@@ -5,8 +5,8 @@ description: Welcome to Whatomate - A modern WhatsApp Business Platform
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-![Whatomate Dashboard (Light)](/whatomate/images/dashboard-light.png)
-![Whatomate Dashboard (Dark)](/whatomate/images/dashboard-dark.png)
+<img src="/whatomate/images/dashboard-light.png" alt="Whatomate Dashboard" class="light-only" />
+<img src="/whatomate/images/dashboard-dark.png" alt="Whatomate Dashboard" class="dark-only" />
 
 ## What is Whatomate?
 

docs/src/content/docs/index.mdx

@@ -5,7 +5,8 @@ description: Welcome to Whatomate - A modern WhatsApp Business Platform
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-![Whatomate Dashboard](/whatomate/images/dashboard-light.png)
+<img src="/whatomate/images/dashboard-light.png" alt="Whatomate Dashboard" class="light-only" />
+<img src="/whatomate/images/dashboard-dark.png" alt="Whatomate Dashboard" class="dark-only" />
 
 ## What is Whatomate?
 

docs/src/styles/custom.css

@@ -32,3 +32,12 @@ img {
   border-radius: 8px;
   border: 1px solid var(--sl-color-gray-3);
 }
+
+/* Theme-aware screenshots: show light image by default, dark in dark mode */
+:root[data-theme='light'] .dark-only,
+:root:not([data-theme='dark']) .dark-only {
+  display: none !important;
+}
+:root[data-theme='dark'] .light-only {
+  display: none !important;
+}