Feat: dark mode + client side transitions

astro.config.ts

@@ -8,7 +8,7 @@ import rehypeSlug from "rehype-slug"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
 import rehypeWrapAll from "rehype-wrap-all"
 import sitemap from "@astrojs/sitemap"
-import type { RehypePlugins } from "astro"
+import type { AstroIntegration, RehypePlugins } from "astro"
 import { unified } from "@astrojs/markdown-remark"
 import yaml from "@rollup/plugin-yaml"
 import { fileURLToPath } from "node:url"
@@ -47,10 +47,28 @@ const canonicalUrlsWithLanguageVariants = extractCanonicalUrlsWithLanguageVarian
 // Preact files (`@jsxImportSource preact` pragma) and the barrels that only re-export them; everything else is React
 const preactModules = preactModulesMatcher(fileURLToPath(new URL(".", import.meta.url)))
 
+/** Dev-only gallery: injected only under `astro dev`, so builds never see it. */
+const devOnlyComponentGallery: AstroIntegration = {
+  name: "dev-only-component-gallery",
+  hooks: {
+    "astro:config:setup": ({ command, injectRoute }) => {
+      if (command === "dev") {
+        injectRoute({ pattern: "/dev/components", entrypoint: "./src/dev/gallery.astro" })
+      }
+    },
+  },
+}
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://docs.chain.link",
   trailingSlash: "never",
+  // Prefetch internal links so client-side navigations (ClientRouter) feel instant.
+  // "hover" (not "viewport") avoids prefetching the hundreds of links in the docs sidebar at once.
+  prefetch: {
+    prefetchAll: true,
+    defaultStrategy: "hover",
+  },
   redirects: {
     "/ccip/directory": "/ccip/directory/mainnet",
     "/ccip/supported-networks": "/ccip/directory/mainnet",
@@ -61,6 +79,7 @@ export default defineConfig({
     ...ccipRedirects,
   },
   integrations: [
+    devOnlyComponentGallery,
     trailingSlashMiddleware(),
     preact({
       include: [preactModules],

src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css

@@ -105,7 +105,7 @@
   font-family: var(--font-body);
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--blue-600, #375bd2);
+  color: var(--text-accent);
   background: transparent;
   border: 1px solid var(--blue-600, #375bd2);
   border-radius: 4px;
@@ -204,7 +204,7 @@
 }
 
 .learnMore a {
-  color: var(--blue-600, #375bd2);
+  color: var(--text-accent);
   text-decoration: none;
   font-weight: 500;
 }
@@ -214,57 +214,57 @@
 }
 
 /* Dark theme */
-:global(.theme-dark) .selectorCard {
+:global(html.dark) .selectorCard {
   background: rgba(255, 255, 255, 0.04);
   border-color: #3a3a3a;
 }
 
-:global(.theme-dark) .select {
+:global(html.dark) .select {
   border-color: #3a3a3a;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
-:global(.theme-dark) .idRow {
+:global(html.dark) .idRow {
   background: rgba(255, 255, 255, 0.04);
   border-color: #3a3a3a;
 }
 
-:global(.theme-dark) .table th {
+:global(html.dark) .table th {
   border-bottom-color: #3a3a3a;
 }
 
-:global(.theme-dark) .table td {
+:global(html.dark) .table td {
   border-bottom-color: #3a3a3a;
 }
 
-:global(.theme-dark) .table td code {
+:global(html.dark) .table td code {
   background: rgba(255, 255, 255, 0.06);
 }
 
-:global(.theme-dark) .copyButton {
+:global(html.dark) .copyButton {
   color: var(--blue-400, #6d9eff);
   border-color: var(--blue-400, #6d9eff);
 }
 
-:global(.theme-dark) .copyButton:hover {
+:global(html.dark) .copyButton:hover {
   background: var(--blue-400, #6d9eff);
-  color: #1a1a1a;
+  color: var(--foreground);
 }
 
-:global(.theme-dark) .codeBlock {
+:global(html.dark) .codeBlock {
   border-color: #3a3a3a;
 }
 
-:global(.theme-dark) .codeHeader {
+:global(html.dark) .codeHeader {
   background: rgba(255, 255, 255, 0.06);
   border-bottom-color: #3a3a3a;
 }
 
-:global(.theme-dark) .codeContent {
+:global(html.dark) .codeContent {
   background: var(--theme-bg, #1a1a1a);
 }
 
-:global(.theme-dark) .learnMore a {
+:global(html.dark) .learnMore a {
   color: var(--blue-400, #6d9eff);
 }
 

src/components/AnchoredAccordion/AnchoredAccordion.astro

@@ -23,7 +23,7 @@ const id = anchorId || slugger.slug(title)
   <details
     {...startOpen ? { open: true } : {}}
     {...startOpen ? { expanded: "" } : {}}
-    style={number === 1 || !number ? { borderTop: "1px solid var(--gray-300, #ced0d5)" } : {}}
+    style={number === 1 || !number ? { borderTop: "1px solid var(--border)" } : {}}
   >
     <summary>
       <span class="before">{number}</span>
@@ -60,12 +60,12 @@ const id = anchorId || slugger.slug(title)
 
   details {
     overflow: hidden;
-    border-bottom: 1px solid var(--gray-300, #ced0d5);
+    border-bottom: 1px solid var(--color-border-secondary);
     transition: background-color 0.15s ease;
   }
 
   details:not([open]):hover {
-    background-color: var(--blue-50, #eef2ff);
+    background-color: var(--surface-accent);
   }
 
   summary {
@@ -74,15 +74,15 @@ const id = anchorId || slugger.slug(title)
     align-items: center;
     gap: var(--space-8x);
     cursor: pointer;
-    color: var(--blue-800, #1a2b6b);
+    color: var(--color-text-link-hover);
     font-size: 16px;
     padding: var(--space-2x) 0px;
     list-style: none;
     transition: background-color 0.15s ease;
   }
 
   details[open] > summary:hover {
-    background-color: var(--blue-50, #eef2ff);
+    background-color: var(--surface-accent);
   }
 
   summary::-webkit-details-marker {
@@ -116,7 +116,7 @@ const id = anchorId || slugger.slug(title)
 
   .permalink:hover {
     opacity: 1;
-    color: var(--blue-800, #1a2b6b);
+    color: var(--color-text-link-hover);
   }
 
   .accordion-arrow {

src/components/Aside.astro

@@ -32,14 +32,16 @@ const icons = {
 
 <style>
   aside {
-    --aside-bg: var(--color-background-info);
+    --aside-bg: var(--progress);
+    --aside-border: var(--progress-border);
+    --aside-fg: var(--progress-foreground);
 
     padding: var(--space-4x);
     gap: var(--space-4x);
     background-color: var(--aside-bg);
-    border: 1px solid #eee;
+    border: 1px solid var(--aside-border);
     border-radius: var(--border-radius-10);
-    color: var(--color-text-info);
+    color: var(--aside-fg);
 
     /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
     outline: 1px solid transparent;
@@ -64,11 +66,15 @@ const icons = {
   }
 
   .caution {
-    --aside-bg: var(--color-background-warning);
+    --aside-bg: var(--warning);
+    --aside-border: var(--warning-border);
+    --aside-fg: var(--warning-foreground);
   }
 
   .danger {
-    --aside-bg: var(--color-background-error);
+    --aside-bg: var(--error);
+    --aside-border: var(--error-border);
+    --aside-fg: var(--error-foreground);
   }
 </style>
 
@@ -79,10 +85,6 @@ const icons = {
     text-decoration: underline;
   }
 
-  .theme-dark .asideContent code:not([class*="language"]) {
-    color: var(--theme-code-text);
-  }
-
   .asideContent p,
   .asideContent li {
     color: var(--theme-text-light);

src/components/CCIP/AddButton/AddButton.astro

@@ -32,7 +32,7 @@ const { href, text, urlClass } = Astro.props
   }
 
   .add-button:hover {
-    background-color: var(--gray-100);
+    background-color: var(--muted);
     border-color: var(--gray-400);
   }
 

src/components/CCIP/Breadcrumb/Breadcrumb.css

@@ -2,19 +2,19 @@
   display: flex;
   gap: var(--space-2x);
   align-items: center;
-  color: var(--gray-700);
+  color: var(--color-text-secondary);
   flex-wrap: wrap;
 }
 
 .ccip-hero__breadcrumb a {
-  color: var(--gray-700);
+  color: var(--color-text-secondary);
 }
 
 .ccip-hero__breadcrumb a:hover {
-  color: var(--gray-800);
+  color: var(--foreground);
 }
 
 .ccip-hero__breadcrumb a:last-child {
-  color: var(--gray-900);
+  color: var(--foreground);
   font-weight: var(--font-weight-bold);
 }

src/components/CCIP/BrowseButton/BrowseButton.astro

@@ -30,7 +30,7 @@ const { href, text } = Astro.props
   }
 
   .browse-button:hover {
-    background-color: var(--gray-100);
+    background-color: var(--muted);
     border-color: var(--gray-400);
   }
 </style>