ably · jamiehenson · Jul 17, 2026 · Jul 9, 2026 · Jul 9, 2026 · Jul 9, 2026
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
@@ -6,6 +6,7 @@ import { PostHogProvider } from 'posthog-js/react';
 import posthog from 'posthog-js';
 
 import UserContextWrapper from './src/contexts/user-context/wrap-with-provider';
+import { ThemeProvider } from './src/contexts/theme-context';
 import { useSiteMetadata } from './src/hooks/use-site-metadata';
 
 const onClientEntry: GatsbyBrowser['onClientEntry'] = () => {
@@ -56,9 +57,11 @@ const InsightsWrapper = ({ children }) => {
 
 export const wrapRootElement = ({ element }) => {
   return (
-    <InsightsWrapper>
-      <UserContextWrapper element={element} />
-    </InsightsWrapper>
+    <ThemeProvider>
+      <InsightsWrapper>
+        <UserContextWrapper element={element} />
+      </InsightsWrapper>
+    </ThemeProvider>
   );
 };
 

diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import type { GatsbySSR } from 'gatsby';
 import { getSandpackCssText } from '@codesandbox/sandpack-react';
+import { THEME_NO_FLASH_SCRIPT } from './src/utilities/theme';
 
 const onRenderBody: GatsbySSR['onRenderBody'] = ({ setHeadComponents }) => {
   const inlineScripts: React.ReactNode[] = [];
 
+  // Set the theme class on <html> before first paint to avoid a flash of the
+  // wrong theme. Runs first so the class is present before any styles apply.
+  inlineScripts.push(<script key="theme-no-flash" dangerouslySetInnerHTML={{ __html: THEME_NO_FLASH_SCRIPT }} />);
+
   // OneTrust consent management, inspiration taken from gatsby-google-tagmanager implementation
   if (process.env.ONE_TRUST_ENABLED === 'true' && !!process.env.ONE_TRUST_DOMAIN) {
     let domainId = process.env.ONE_TRUST_DOMAIN;
@@ -117,9 +122,16 @@ const onPreRenderHTML: GatsbySSR['onPreRenderHTML'] = ({ getHeadComponents, repl
 };
 
 /**
- * Load our user state
+ * Load our user state, wrapped in the theme provider so useTheme is available
+ * everywhere (including pages that don't use the docs Layout).
  */
 import UserContextWrapper from './src/contexts/user-context/wrap-with-provider';
-const wrapRootElement = UserContextWrapper;
+import { ThemeProvider } from './src/contexts/theme-context';
+
+const wrapRootElement: GatsbySSR['wrapRootElement'] = ({ element }) => (
+  <ThemeProvider>
+    <UserContextWrapper element={element} />
+  </ThemeProvider>
+);
 
 export { onRenderBody, onPreRenderHTML, wrapRootElement };
diff --git a/src/components/Examples/ExamplesContent.tsx b/src/components/Examples/ExamplesContent.tsx
@@ -80,15 +80,15 @@ const ExamplesContent = ({ exampleImages }: { exampleImages: ImageProps[] }) =>
         width={660}
         height={282}
         alt="Grid Pattern"
-        className="!absolute -z-10 right-0 top-16 !hidden sm:!block w-[60%] md:w-[40%]"
+        className="!absolute -z-10 right-0 top-16 !hidden sm:!block dark:!hidden w-[60%] md:w-[40%]"
       />
 
       <StaticImage
         src="./images/mobile-grid.png"
         placeholder="blurred"
         width={260}
         alt="Grid Pattern"
-        className="-z-10 right-0 top-16 !absolute !block sm:!hidden"
+        className="-z-10 right-0 top-16 !absolute !block sm:!hidden dark:!hidden"
       />
     </>
   );

diff --git a/src/components/Examples/ExamplesFilter.tsx b/src/components/Examples/ExamplesFilter.tsx
@@ -155,7 +155,7 @@ const ExamplesFilter = ({
           },
         )}
       >
-        <div className="flex justify-between items-center sm:hidden h-16 px-4 py-2 bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-t-2xl sm:rounded-none">
+        <div className="flex justify-between items-center sm:hidden h-16 px-4 py-2 bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1100 rounded-t-2xl sm:rounded-none">
           <p className="ui-text-p1 font-bold text-neutral-1300 dark:text-neutral-000">Filters</p>
           <button onClick={closeFilterMenu} aria-label="Close filter menu">
             <XMarkIcon className="size-[24px]" aria-hidden />

diff --git a/src/components/Examples/ExamplesGrid.tsx b/src/components/Examples/ExamplesGrid.tsx
@@ -65,7 +65,7 @@ const ExamplesGrid = ({
 
       return text.split(searchRegex).map((part, index) =>
         part.toLowerCase() === searchTerm.toLowerCase() ? (
-          <span key={index} className="bg-yellow-200">
+          <span key={index} className="bg-yellow-200 dark:bg-yellow-800">
             {part}
           </span>
         ) : (
@@ -86,19 +86,19 @@ const ExamplesGrid = ({
           role="button"
           aria-label={`View ${name} example`}
         >
-          <div className="z-0 bg-neutral-100 overflow-hidden h-64 sm:h-[12.5rem] relative flex justify-center items-center ">
+          <div className="z-0 bg-neutral-100 dark:bg-neutral-1200 overflow-hidden h-64 sm:h-[12.5rem] relative flex justify-center items-center ">
             <div className="group-hover/examples-index-card:scale-105 transition-transform">
               {exampleImages ? displayExampleImage(exampleImages, id, name) : null}
             </div>
-            <div className="flex bg-neutral-000 gap-x-1.5 py-1.5 px-2 absolute right-3 bottom-3 rounded border border-neutral-200 z-10">
+            <div className="flex bg-neutral-000 dark:bg-neutral-1300 gap-x-1.5 py-1.5 px-2 absolute right-3 bottom-3 rounded border border-neutral-300 dark:border-neutral-1100 z-10">
               {(languages ?? DEFAULT_EXAMPLE_LANGUAGES).map((language) => (
                 <Icon key={language} name={`icon-tech-${language}` as IconName} size="18px" />
               ))}
             </div>
           </div>
           <div className="z-10 pt-4">
-            <p className="ui-text-h4 text-neutral-1300">{highlightSearchTerm(name)}</p>
-            <p className="ui-text-p3 mt-2 text-neutral-900">{highlightSearchTerm(description)}</p>
+            <p className="ui-text-h4 text-neutral-1300 dark:text-neutral-000">{highlightSearchTerm(name)}</p>
+            <p className="ui-text-p3 mt-2 text-neutral-900 dark:text-neutral-500">{highlightSearchTerm(description)}</p>
             <div className="mt-4 flex gap-x-1">
               {products ? products.map((product) => displayProductLabel(product as ProductName, dataProducts)) : null}
               {/* {useCases ? useCases.map((useCase) => displayUseCaseLabel(useCase)) : null} */}

diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
@@ -1,7 +1,8 @@
-import React, { PropsWithChildren, useMemo } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { SandpackProvider, SandpackPreview } from '@codesandbox/sandpack-react';
 import { githubLight } from '@codesandbox/sandpack-themes';
-import { CodeEditor } from 'src/components/CodeEditor';
+import { CodeEditor, sandpackTheme } from 'src/components/CodeEditor';
+import { useTheme } from 'src/contexts/theme-context';
 import { LanguageKey } from 'src/data/languages/types';
 import { ExampleFiles, ExampleWithContent } from 'src/data/examples/types';
 import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-keys';
@@ -74,6 +75,14 @@ const ExamplesRenderer = ({
   children,
 }: PropsWithChildren<ExamplesRendererProps>) => {
   const { id, files, visibleFiles, layout, products } = example;
+  const { resolvedTheme } = useTheme();
+  // Sandpack/Chrome take the theme as JS values (not CSS `dark:` variants), so
+  // gate on mount: render light (matching the server) until hydrated, then
+  // follow the resolved theme. Avoids a hydration mismatch for dark-mode users
+  // when the editor is server-rendered.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const editorTheme = mounted ? resolvedTheme : 'light';
 
   const rewrittenFiles = useMemo<ExampleFiles>(() => {
     const result: ExampleFiles = {};
@@ -149,7 +158,7 @@ const ExamplesRenderer = ({
             : []),
         ],
       }}
-      theme={githubLight}
+      theme={editorTheme === 'dark' ? sandpackTheme : githubLight}
       template={determineSandpackTemplate(activeLanguage as LanguageKey)}
     >
       <div
@@ -181,7 +190,7 @@ const ExamplesRenderer = ({
         >
           <div className={cn('min-w-0 overflow-hidden', isVerticalLayout && 'md:flex-1')}>
             <CodeEditor
-              theme="light"
+              theme={editorTheme}
               editor={{
                 className: '',
                 showLineNumbers: true,

diff --git a/src/components/Homepage/Changelog.tsx b/src/components/Homepage/Changelog.tsx
@@ -184,7 +184,7 @@ export const ChangelogSection = () => {
   `);
 
   return (
-    <div className="rounded-lg border border-neutral-300 dark:border-neutral-1000 p-6 lg:p-8 mt-6 md:mt-0">
+    <div className="rounded-lg border border-neutral-300 dark:border-neutral-1100 p-6 lg:p-8 mt-6 md:mt-0">
       <div className="flex justify-between items-center mb-6">
         <h3 className="ui-text-h3 text-neutral-1300 dark:text-neutral-000">Changelog</h3>
         <FeaturedLink

diff --git a/src/components/Homepage/ExamplesSection.tsx b/src/components/Homepage/ExamplesSection.tsx
@@ -8,9 +8,9 @@ export const ExamplesSection = ({ section, images }: { section: ExamplesSectionD
   const backgroundGrid = getImageFromList(images, 'examples_grid.png');
 
   return (
-    <div className="relative overflow-hidden flex flex-col rounded-lg border border-neutral-300 dark:border-neutral-1000 pt-6 pl-6 md:p-6 lg:p-8 bg-gradient-to-b from-[#fff] to-[#F6F8FA]">
+    <div className="relative overflow-hidden flex flex-col rounded-lg border border-neutral-300 dark:border-neutral-1100 pt-6 pl-6 md:p-6 lg:p-8 bg-gradient-to-b from-[#fff] to-[#F6F8FA] dark:bg-none">
       {backgroundGrid && (
-        <div className="w-full h-full absolute top-0 right-0 z-0">
+        <div className="w-full h-full absolute top-0 right-0 z-0 dark:hidden">
           <Image image={backgroundGrid} />
         </div>
       )}

diff --git a/src/components/Homepage/HomepageContent.tsx b/src/components/Homepage/HomepageContent.tsx
@@ -23,14 +23,14 @@ export const HomepageContent = ({
       {mobileImage && (
         <Image
           image={mobileImage}
-          className="absolute top-[3.9375rem] right-0 z-[-1] block sm:hidden w-auto h-auto pointer-events-none"
+          className="absolute top-[3.9375rem] right-0 z-[-1] block sm:hidden dark:hidden w-auto h-auto pointer-events-none"
           aria-hidden="true"
         />
       )}
       {desktopImage && (
         <Image
           image={desktopImage}
-          className="absolute top-[3.9375rem] right-0 z-[-1] hidden sm:block w-auto h-auto pointer-events-none"
+          className="absolute top-[3.9375rem] right-0 z-[-1] hidden sm:block dark:hidden w-auto h-auto pointer-events-none"
           aria-hidden="true"
         />
       )}

diff --git a/src/components/Homepage/PlatformAndProducts.tsx b/src/components/Homepage/PlatformAndProducts.tsx
@@ -7,9 +7,11 @@ import { navigate } from '../Link';
 const PlatformFeatureCard = ({
   card,
   platformStackLayers,
+  platformStackLayersDark,
 }: {
   card: PlatformCardData;
   platformStackLayers: (ImageProps | undefined)[];
+  platformStackLayersDark: (ImageProps | undefined)[];
 }) => {
   const baseClasses = 'absolute right-0 md:left-0 md:right-auto w-full transition-transform duration-500 ease-in-out';
   const animationClasses = [
@@ -24,9 +26,23 @@ const PlatformFeatureCard = ({
     'top-[2.8125rem] md:top-[6.25rem]',
   ];
 
+  // Render one stack of layers with a visibility class so the light and dark
+  // sets can be CSS-toggled by the theme (no JS / no hydration concern).
+  const renderStack = (layers: (ImageProps | undefined)[], visibility: string) =>
+    layers.map((image, index) =>
+      image ? (
+        <Image
+          key={`${visibility}-${index}`}
+          image={image}
+          className={cn(baseClasses, zIndices[index], initialTops[index], animationClasses[index], visibility)}
+          aria-hidden={true}
+        />
+      ) : null,
+    );
+
   return (
     <div
-      className="md:col-span-1 md:row-span-2 lg:row-span-3 p-3 bg-white dark:bg-neutral-1300 rounded-lg border border-neutral-300 dark:border-neutral-1000 flex flex-col relative group overflow-hidden cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-1200"
+      className="md:col-span-1 md:row-span-2 lg:row-span-3 p-3 bg-white dark:bg-neutral-1300 rounded-lg border border-neutral-300 dark:border-neutral-1100 flex flex-col relative group overflow-hidden cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-1200"
       onClick={() => {
         navigate(card.link);
       }}
@@ -35,16 +51,8 @@ const PlatformFeatureCard = ({
       <p className="text-neutral-800 dark:text-neutral-500 ui-text-p3 flex-grow">{card.content}</p>
       {platformStackLayers && platformStackLayers.length > 0 && (
         <div className="absolute bottom-0 right-[-15px] w-[5.625rem] h-[4.6875rem] md:right-[-30px] md:w-[10.8125rem] md:h-[10.25rem]">
-          {platformStackLayers.map((image, index) => {
-            return image ? (
-              <Image
-                key={index}
-                image={image}
-                className={cn(baseClasses, zIndices[index], initialTops[index], animationClasses[index])}
-                aria-hidden={true}
-              />
-            ) : null;
-          })}
+          {renderStack(platformStackLayers, 'dark:hidden')}
+          {renderStack(platformStackLayersDark, 'hidden dark:block')}
         </div>
       )}
     </div>
@@ -63,17 +71,26 @@ export const PlatformAndProducts = ({
     getImageFromList(images, 'platform_layer_2.svg'),
     getImageFromList(images, 'platform_layer_3.svg'),
   ];
+  const platformStackLayersDark = [
+    getImageFromList(images, 'platform_layer_1-dark.svg'),
+    getImageFromList(images, 'platform_layer_2-dark.svg'),
+    getImageFromList(images, 'platform_layer_3-dark.svg'),
+  ];
 
   return (
     <div className="grid grid-cols-1 md:grid-rows-3 md:grid-cols-3 lg:grid-rows-2 lg:grid-cols-4 gap-3">
-      <PlatformFeatureCard card={section.platformCard} platformStackLayers={platformStackLayers} />
+      <PlatformFeatureCard
+        card={section.platformCard}
+        platformStackLayers={platformStackLayers}
+        platformStackLayersDark={platformStackLayersDark}
+      />
       <div className="lg:col-span-3 md:col-span-2 md:row-span-3 grid grid-cols-2 gap-3 lg:grid-cols-3">
         {section.productCards.map((card) => (
           <ProductTile
             key={card.name}
             name={card.name}
             animateIcons={true}
-            className="border border-neutral-300 dark:border-neutral-1000 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-1200"
+            className="border border-neutral-300 dark:border-neutral-1100 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-1200"
             onClick={() => {
               if (card.link) {
                 navigate(card.link);

diff --git a/src/components/Homepage/ToolingSection.tsx b/src/components/Homepage/ToolingSection.tsx
@@ -4,7 +4,7 @@ import { navigate } from '../Link';
 const ToolingCard = ({ card }: { card: ToolingCardData }) => {
   return (
     <div
-      className="p-4 bg-white dark:bg-neutral-1300 rounded-lg border border-neutral-300 dark:border-neutral-1000 flex flex-col cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-1200"
+      className="p-4 bg-white dark:bg-neutral-1300 rounded-lg border border-neutral-300 dark:border-neutral-1100 flex flex-col cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-1200"
       onClick={() => {
         navigate(card.link);
       }}

diff --git a/src/components/Icon/glyphs/icon-tech-objectivec.tsx b/src/components/Icon/glyphs/icon-tech-objectivec.tsx
@@ -9,6 +9,6 @@ const IconTechObjectivec = ({
   title,
   titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1913"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fill="#03020D" clipPath="url(#clip0_1031_1913)"><path d="M48 45v3H38v-3zM10 45v3H0v-3zM33.068 31.276c-1.728 1.26-3.888 2.088-6.48 2.088-5.508 0-9.54-3.816-9.54-9.144 0-5.4 3.924-9.252 9.252-9.252l7.74 2.376v-5.076c-1.98-.72-4.788-1.476-7.884-1.476-7.74 0-13.752 5.436-13.752 13.428s6.012 13.428 13.752 13.428c3.348 0 6.48-.972 8.532-2.268zM0 3h3v42H0zM48 0v3H38V0zM45 3h3v42h-3zM10 0v3H0V0z" /></g></svg>;
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1913"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fill="currentColor" clipPath="url(#clip0_1031_1913)"><path d="M48 45v3H38v-3zM10 45v3H0v-3zM33.068 31.276c-1.728 1.26-3.888 2.088-6.48 2.088-5.508 0-9.54-3.816-9.54-9.144 0-5.4 3.924-9.252 9.252-9.252l7.74 2.376v-5.076c-1.98-.72-4.788-1.476-7.884-1.476-7.74 0-13.752 5.436-13.752 13.428s6.012 13.428 13.752 13.428c3.348 0 6.48-.972 8.532-2.268zM0 3h3v42H0zM48 0v3H38V0zM45 3h3v42h-3zM10 0v3H0V0z" /></g></svg>;
 const ForwardRef = forwardRef(IconTechObjectivec);
 export default ForwardRef;
diff --git a/src/components/Icon/glyphs/icon-tech-php.tsx b/src/components/Icon/glyphs/icon-tech-php.tsx
@@ -9,6 +9,6 @@ const IconTechPhp = ({
   title,
   titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#000" fillRule="evenodd" d="M10.917 17.073H3.798L0 36.118h3.692l1.01-5.047h3.187q1.62 0 3.134-.372 1.515-.372 2.842-1.753a8.2 8.2 0 0 0 1.7-2.443q.638-1.355.824-2.763.479-3.081-.93-4.86-1.408-1.781-4.542-1.807m-4.016 3.055.005-.026-.026.026zm0 0L5.312 28.07q.16.027.32.027h.371q2.55.027 4.25-.505 1.7-.558 2.284-3.878.479-2.789-.956-3.214-1.408-.425-3.533-.398a8 8 0 0 1-.61.026z" clipRule="evenodd" /><path fill="#000" d="M20.595 12h3.665l-1.036 5.073h3.294q2.71.054 4.037 1.116 1.355 1.062.797 4.037l-1.78 8.846h-3.718l1.7-8.447q.266-1.328-.16-1.886-.425-.558-1.832-.558l-2.949-.027-2.178 10.918H16.77z" /><path fill="#000" fillRule="evenodd" d="M42.407 17.073h-7.119L31.49 36.118h3.692l1.01-5.047h3.187q1.62 0 3.134-.372 1.515-.372 2.842-1.753a8.2 8.2 0 0 0 1.7-2.443q.638-1.355.824-2.763.479-3.081-.93-4.86-1.409-1.781-4.542-1.807m-4.016 3.055.005-.026-.026.026zm0 0-1.588 7.942q.159.027.318.027h.372q2.55.027 4.25-.505 1.7-.558 2.284-3.878.479-2.789-.956-3.214-1.408-.425-3.533-.398a8 8 0 0 1-.61.026z" clipRule="evenodd" /></svg>;
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M10.917 17.073H3.798L0 36.118h3.692l1.01-5.047h3.187q1.62 0 3.134-.372 1.515-.372 2.842-1.753a8.2 8.2 0 0 0 1.7-2.443q.638-1.355.824-2.763.479-3.081-.93-4.86-1.408-1.781-4.542-1.807m-4.016 3.055.005-.026-.026.026zm0 0L5.312 28.07q.16.027.32.027h.371q2.55.027 4.25-.505 1.7-.558 2.284-3.878.479-2.789-.956-3.214-1.408-.425-3.533-.398a8 8 0 0 1-.61.026z" clipRule="evenodd" /><path fill="currentColor" d="M20.595 12h3.665l-1.036 5.073h3.294q2.71.054 4.037 1.116 1.355 1.062.797 4.037l-1.78 8.846h-3.718l1.7-8.447q.266-1.328-.16-1.886-.425-.558-1.832-.558l-2.949-.027-2.178 10.918H16.77z" /><path fill="currentColor" fillRule="evenodd" d="M42.407 17.073h-7.119L31.49 36.118h3.692l1.01-5.047h3.187q1.62 0 3.134-.372 1.515-.372 2.842-1.753a8.2 8.2 0 0 0 1.7-2.443q.638-1.355.824-2.763.479-3.081-.93-4.86-1.409-1.781-4.542-1.807m-4.016 3.055.005-.026-.026.026zm0 0-1.588 7.942q.159.027.318.027h.372q2.55.027 4.25-.505 1.7-.558 2.284-3.878.479-2.789-.956-3.214-1.408-.425-3.533-.398a8 8 0 0 1-.61.026z" clipRule="evenodd" /></svg>;
 const ForwardRef = forwardRef(IconTechPhp);
 export default ForwardRef;
diff --git a/src/components/Icon/glyphs/icon-tech-vercel.tsx b/src/components/Icon/glyphs/icon-tech-vercel.tsx
@@ -9,6 +9,6 @@ const IconTechVercel = ({
   title,
   titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#000" d="m23.856 6 20.785 36H3.07z" /></svg>;
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="m23.856 6 20.785 36H3.07z" /></svg>;
 const ForwardRef = forwardRef(IconTechVercel);
 export default ForwardRef;