diff --git a/apps/docs/docs/api/configuration.mdx b/apps/docs/docs/api/configuration.mdx
index 846aadcf..059ea47e 100644
--- a/apps/docs/docs/api/configuration.mdx
+++ b/apps/docs/docs/api/configuration.mdx
@@ -55,7 +55,9 @@ export function ScrollArea() {
 
 The root must be an ancestor of the target. `scrollMargin` is not a substitute for `rootMargin`: it expands or contracts the clipping rectangles of **nested** scroll containers inside the root. Use it when an inner scroller clips the target, for example `useInView({ root, scrollMargin: "80px 0px" })`. Invalid margin syntax, invalid thresholds, iframes, and custom roots can all change what the browser considers visible.
 
-> **Verify configuration:** Test real layout, scrolling, and geometry in [Vitest Browser Mode](/testing/browser-mode). Use a deterministic mock to cross a configured threshold without relying on layout; see [Mock intersections](/testing/mocking-intersections).
+:::note[Verify configuration]
+Test real layout, scrolling, and geometry in [Vitest Browser Mode](/testing/browser-mode). Use a deterministic mock to cross a configured threshold without relying on layout; see [Mock intersections](/testing/mocking-intersections).
+:::
 
 ## Stop, pause, or choose a callback API
 
diff --git a/apps/docs/docs/api/core-apis.mdx b/apps/docs/docs/api/core-apis.mdx
index 3e73de46..0571fba8 100644
--- a/apps/docs/docs/api/core-apis.mdx
+++ b/apps/docs/docs/api/core-apis.mdx
@@ -11,7 +11,9 @@ description: Choose and use the three React APIs for observing elements.
 | `useOnInView` | You need an effect without a hook-owned state update. | A callback `ref` and your `(inView, entry)` callback. |
 | `<InView>` | Render props or a wrapper component fit the composition. | Render-prop fields, or a generated wrapper for plain children. |
 
-> **Initial notification:** By default, the APIs suppress the observer's first `false` result. `initialInView` sets the starting state and changes how that first notification is handled. Later enter and leave transitions report both `true` and `false`.
+:::note[Initial notification]
+By default, the APIs suppress the observer's first `false` result. `initialInView` sets the starting state and changes how that first notification is handled. Later enter and leave transitions report both `true` and `false`.
+:::
 
 The package also exposes a low-level [`observe`](#low-level-observe) function for code that already owns a DOM element.
 
diff --git a/apps/docs/public/logo-horizontal.svg b/apps/docs/public/logo-horizontal.svg
index 3d4c9100..4787857e 100644
--- a/apps/docs/public/logo-horizontal.svg
+++ b/apps/docs/public/logo-horizontal.svg
@@ -4,6 +4,11 @@
   <style>
     path[stroke="#000"] { stroke: currentColor; }
     path[fill="#1a1a1a"] { fill: currentColor; }
+
+    @media (prefers-color-scheme: dark) {
+      path[stroke="#000"] { stroke: #f5f3ff; }
+      path[fill="#1a1a1a"] { fill: #f5f3ff; }
+    }
   </style>
   <path stroke="#000" stroke-linecap="round" stroke-width="4" d="M5.25 21v-9.75c0-3.3 2.7-6 6-6h9m7.5 0h9c3.3 0 6 2.7 6 6v6m-37.5 10.5v9c0 3.3 2.7 6 6 6h6"/>
   <path fill="url(#a)" d="M37.5 22.5h-9a6 6 0 0 0-6 6v9a6 6 0 0 0 6 6h9a6 6 0 0 0 6-6v-9a6 6 0 0 0-6-6"/>
diff --git a/apps/docs/theme.css b/apps/docs/theme.css
index 6e2deca0..38d24d5c 100644
--- a/apps/docs/theme.css
+++ b/apps/docs/theme.css
@@ -12,6 +12,14 @@
   }
 }
 
+[data-docs-logo] path[stroke="#000"] {
+  stroke: currentColor;
+}
+
+[data-docs-logo] path[fill="#1a1a1a"] {
+  fill: currentColor;
+}
+
 @media (min-width: 30rem) and (max-width: 47.999rem) {
   [data-docs-logo-graphic] {
     display: inline-flex;