Merge pull request #6206 from damla/master

fix: add NextJS icon as ThemedImage to solve light mode problem

web/docs/about.mdx

@@ -6,11 +6,13 @@ slug: /
 hide_table_of_contents: true
 ---
 
+import ThemedImage from '@theme/ThemedImage'
 import AngularLogo from '@site/static/img/libraries/angular-icon.svg'
 import ExpoLogo from '@site/static/img/libraries/expo-icon.svg'
 import DartLogo from '@site/static/img/libraries/dart-icon.svg'
 import JavascriptLogo from '@site/static/img/libraries/javascript-icon.svg'
-import NextjsLogo from '@site/static/img/libraries/nextjs-icon.svg'
+import NextjsDarkLogo from '@site/static/img/libraries/nextjs-dark-icon.svg'
+import NextjsLightLogo from '@site/static/img/libraries/nextjs-light-icon.svg'
 import ReactLogo from '@site/static/img/libraries/react-icon.svg'
 import RedwoodJsLogo from '@site/static/img/libraries/redwoodjs-icon.svg'
 import SvelteLogo from '@site/static/img/libraries/svelte-icon.svg'
@@ -37,7 +39,15 @@ const frameworks = [
     logo: JavascriptLogo,
     href: 'https://github.com/supabase/supabase/tree/master/examples/javascript-auth',
   },
-  { name: 'Next.js', logo: NextjsLogo, href: '/docs/guides/with-nextjs' },
+  {
+    name: 'Next.js',
+    themed: true,
+    logo: {
+      dark: '/img/libraries/nextjs-dark-icon.svg',
+      light: '/img/libraries/nextjs-light-icon.svg',
+    },
+    href: '/docs/guides/with-nextjs',
+  },
   { name: 'React', logo: ReactLogo, href: '/docs/guides/with-react' },
   { name: 'RedwoodJS', logo: RedwoodJsLogo, href: '/docs/guides/with-redwoodjs' },
   { name: 'Svelte', logo: SvelteLogo, href: '/docs/guides/with-svelte' },
@@ -101,8 +111,18 @@ Supabase is just Postgres, which makes it compatible with a large number of tool
       <div key={x.name} class="col col--3">
         <Link class="card" to={x.href}>
           <div class="card__body" style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
-            {x.logo && (
+            {x.logo && !x.themed ? (
               <x.logo width="20" alt={x.name} style={{ display: 'block', maxHeight: 20 }} />
+            ) : (
+              <ThemedImage
+                style={{ display: 'block', maxHeight: 20 }}
+                alt={x.name}
+                width="20"
+                sources={{
+                  light: useBaseUrl(x.logo.light),
+                  dark: useBaseUrl(x.logo.dark),
+                }}
+              />
             )}
             <p>{x.name}</p>
           </div>

web/static/img/libraries/nextjs-light-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M467.25.27c-2.15.19-9,.88-15.15,1.37C310.07,14.44,177,91.07,92.77,208.84,45.85,274.32,15.84,348.6,4.5,427.28.49,454.75,0,462.86,0,500.1s.49,45.35,4.5,72.81c27.17,187.76,160.8,345.5,342,404C379,987.32,413.2,994.45,452.1,998.75c15.15,1.67,80.65,1.67,95.8,0,67.15-7.42,124.05-24,180.15-52.68,8.61-4.4,10.27-5.57,9.1-6.55-.79-.58-37.44-49.74-81.43-109.17l-80-108L475.56,574.08c-55.13-81.51-100.49-148.17-100.88-148.17s-.78,65.78-1,146.22c-.29,140.84-.39,146.51-2.15,149.83-2.54,4.79-4.49,6.75-8.6,8.9-3.13,1.56-5.86,1.85-20.62,1.85H325.42l-4.5-2.83a18.32,18.32,0,0,1-6.55-7.14l-2.05-4.4.19-196,.29-196.06,3-3.81a26.7,26.7,0,0,1,7.23-6c4-2,5.57-2.15,22.48-2.15,19.94,0,23.27.78,28.45,6.45,1.46,1.56,55.72,83.27,120.62,181.69S648.29,735.35,691.89,801.32l79.18,119.93,4-2.64c35.49-23.07,73-55.91,102.74-90.12A497.53,497.53,0,0,0,995.5,572.91c4-27.46,4.5-35.57,4.5-72.81s-.49-45.35-4.5-72.82c-27.17-187.75-160.8-345.5-342-403.94-32-10.37-66-17.5-104.11-21.8C540,.56,475.37-.51,467.25.27ZM672,302.67a19.71,19.71,0,0,1,9.87,11.53c.78,2.54,1,56.88.78,179.35l-.29,175.73-31-47.5-31.09-47.5V446.54c0-82.59.4-129,1-131.26A20,20,0,0,1,630.89,303c4-2,5.47-2.25,20.82-2.25C666.18,300.71,668.72,300.91,672,302.67Z"/></g></g></svg>