From beb41f8145017346e588b13c193a66dce9769ace Mon Sep 17 00:00:00 2001
From: Cassie_Fox <249835913+CassieFox23@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:53:00 -0400
Subject: [PATCH] docs(website): add dark-mode styles to the favicon and social
 card (#6909)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The favicon tile (#20252b) is almost invisible on a dark browser tab
strip, and the social card opened on its own is light only. Add one
prefers-color-scheme: dark block to each SVG. Each edit is a pure
insertion, and the light render is 0 pixels different in magick and in
CairoSVG. CairoSVG ignores the block, so the PNG that link previews
fetch stays light. website/figures.md says so.

🤖 Generated with Claude Code (Sonnet 5.5) 🦊

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 website/figures.md                    |  5 +++++
 website/public/assets/favicon.svg     |  2 +-
 website/public/assets/social-card.svg | 12 ++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/website/figures.md b/website/figures.md
index 73fc70c42c..cef6c871e6 100644
--- a/website/figures.md
+++ b/website/figures.md
@@ -52,6 +52,11 @@ preparation. Check the rendered image for readable text and spacing before
 publishing. The build uses DejaVu Sans for consistent typography; only the SVG
 source is committed. Metadata and build instructions are in the website README.
 
+The card and `public/assets/favicon.svg` each carry a dark
+`prefers-color-scheme` block for people who open the SVG directly or use a dark
+browser tab strip. CairoSVG ignores it, so the PNG that link previews fetch
+stays light.
+
 ## Beginner homepage and dinosaur reconstruction
 
 The manual/agent comparison and Calculator percentage controls are semantic
diff --git a/website/public/assets/favicon.svg b/website/public/assets/favicon.svg
index 78512ef981..10a2e315c7 100644
--- a/website/public/assets/favicon.svg
+++ b/website/public/assets/favicon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="5" fill="#20252b"/><path fill="#fff" d="M9 7h7.5c5 0 7.5 2.3 7.5 6.2 0 2.8-1.4 4.7-4 5.6L25 25h-5l-4.5-5.8H13V25H9zm4 3.5v5.2h3.5c2.3 0 3.5-.8 3.5-2.6s-1.2-2.6-3.5-2.6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>@media (prefers-color-scheme: dark){rect{fill:#89b4fa}path{fill:#11111b}}</style><rect width="32" height="32" rx="5" fill="#20252b"/><path fill="#fff" d="M9 7h7.5c5 0 7.5 2.3 7.5 6.2 0 2.8-1.4 4.7-4 5.6L25 25h-5l-4.5-5.8H13V25H9zm4 3.5v5.2h3.5c2.3 0 3.5-.8 3.5-2.6s-1.2-2.6-3.5-2.6z"/></svg>
diff --git a/website/public/assets/social-card.svg b/website/public/assets/social-card.svg
index faab21bd25..2e30ac9eec 100644
--- a/website/public/assets/social-card.svg
+++ b/website/public/assets/social-card.svg
@@ -1,6 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
   <title id="title">REA — Find out how software works.</title>
   <desc id="desc">Reverse engineering with your coding agent. REA connects your agent to analysis tools and returns evidence.</desc>
+  <style>
+@media (prefers-color-scheme: dark){
+[fill="#ffffff"]{fill:#181825}
+[fill="#f0f5fa"]{fill:#313244}
+[fill="#20252b"]{fill:#cdd6f4}
+[fill="#5b6570"]{fill:#a6adc8}
+[fill="#294f82"]{fill:#89b4fa}
+[stroke="#dce2e8"]{stroke:#45475a}
+[stroke="#5b6570"]{stroke:#a6adc8}
+[stroke="#294f82"]{stroke:#89b4fa}
+}
+  </style>
   <rect width="1200" height="630" fill="#ffffff"/>
   <g font-family="DejaVu Sans, sans-serif" fill="#20252b">
     <text x="72" y="110" font-size="44" font-weight="700">REA</text>