diff --git a/examples/stories/src/pages/media/gatsby-logo.tsx b/examples/stories/src/pages/media/gatsby-logo.tsx
index 60fdb96ba..73c04ed01 100644
--- a/examples/stories/src/pages/media/gatsby-logo.tsx
+++ b/examples/stories/src/pages/media/gatsby-logo.tsx
@@ -49,7 +49,7 @@ export const GatsbyLogo: FC = () => {
   return (
     <div sx={{ margin: ['10px auto', 'auto 30px', 'auto 50px', 'auto 80px'] }}>
       <a href="/tutorial/getting-started/gatsby">
-        {colorMode === 'light' ? <LightLogo /> : <DarkLogo />}
+        {colorMode === 'dark' ? <DarkLogo /> : <LightLogo />}
       </a>
     </div>
   );
diff --git a/examples/stories/src/pages/media/nextjs-logo.tsx b/examples/stories/src/pages/media/nextjs-logo.tsx
index 3046d8ede..0c4307bc4 100644
--- a/examples/stories/src/pages/media/nextjs-logo.tsx
+++ b/examples/stories/src/pages/media/nextjs-logo.tsx
@@ -84,7 +84,7 @@ export const NextjsLogo: FC = () => {
   return (
     <div sx={{ margin: ['10px auto', 'auto 30px', 'auto 50px', 'auto 80px'] }}>
       <a href="/tutorial/getting-started/nextjs" style={{ margin: 'auto' }}>
-        {colorMode === 'light' ? <LightLogo /> : <DarkLogo />}
+        {colorMode === 'dark' ? <DarkLogo /> : <LightLogo />}
       </a>
     </div>
   );
diff --git a/examples/stories/src/pages/media/webpack-logo.tsx b/examples/stories/src/pages/media/webpack-logo.tsx
index 8158a5a71..f42edca3a 100644
--- a/examples/stories/src/pages/media/webpack-logo.tsx
+++ b/examples/stories/src/pages/media/webpack-logo.tsx
@@ -60,7 +60,7 @@ export const WebpackLogo: FC = () => {
   return (
     <div sx={{ margin: ['10px auto', 'auto 30px', 'auto 50px', 'auto 80px'] }}>
       <a href="/tutorial/getting-started/webpack">
-        {colorMode === 'light' ? <LightLogo /> : <DarkLogo />}
+        {colorMode === 'dark' ? <DarkLogo /> : <LightLogo />}
       </a>
     </div>
   );