From d72d715f6b3d075db00f7b45c0812ea0041df1a6 Mon Sep 17 00:00:00 2001
From: Nicholas Flamy <30300649+NicholasFlamy@users.noreply.github.com>
Date: Tue, 11 Mar 2025 18:13:25 -0400
Subject: [PATCH] fix(docs): logo not loading dark theme variant in production
 (#16820)

fix logo not loading dark theme variant in production
---
 docs/src/pages/index.tsx          | 26 +++++++++-----------------
 docs/src/pages/privacy-policy.tsx |  3 ---
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index d4325eb006..2ffe1debc7 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
-import { useColorMode } from '@docusaurus/theme-common';
 import { discordPath, discordViewBox } from '@site/src/components/svg-paths';
+import ThemedImage from '@theme/ThemedImage';
 import Icon from '@mdi/react';
 function HomepageHeader() {
-  const { isDarkTheme } = useColorMode();
-
   return (
     <header>
       <div className="top-[calc(12%)]  md:top-[calc(30%)] h-screen w-full absolute -z-10">
@@ -14,8 +12,8 @@ function HomepageHeader() {
         <div className="w-full h-[120vh] absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
       </div>
       <section className="text-center pt-12 sm:pt-24 bg-immich-bg/50 dark:bg-immich-dark-bg/80">
-        <img
-          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
+        <ThemedImage
+          sources={{ dark: 'img/logomark-dark.svg', light: 'img/logomark-light.svg' }}
           className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
           alt="Immich logo"
         />
@@ -35,7 +33,6 @@ function HomepageHeader() {
             sacrificing your privacy.
           </p>
         </div>
-
         <div className="flex flex-col sm:flex-row place-items-center place-content-center mt-9 gap-4 ">
           <Link
             className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary dark:bg-immich-dark-primary rounded-xl no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold uppercase"
@@ -58,7 +55,6 @@ function HomepageHeader() {
             Buy Merch
           </Link>
         </div>
-
         <div className="my-12 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary">
           <Icon
             path={discordPath}
@@ -67,22 +63,19 @@ function HomepageHeader() {
           />
           <Link to="https://discord.immich.app/">Join our Discord</Link>
         </div>
-        <img
-          src={isDarkTheme ? '/img/screenshot-dark.webp' : '/img/screenshot-light.webp'}
+        <ThemedImage
+          sources={{ dark: '/img/screenshot-dark.webp', light: '/img/screenshot-light.webp' }}
           alt="screenshots"
           className="w-[95%] lg:w-[85%] xl:w-[70%] 2xl:w-[60%] "
         />
-
         <div className="mx-[25%] m-auto my-14 md:my-28">
           <hr className="border bg-gray-500 dark:bg-gray-400" />
         </div>
-
-        <img
-          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
+        <ThemedImage
+          sources={{ dark: 'img/logomark-dark.svg', light: 'img/logomark-light.svg' }}
           className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
           alt="Immich logo"
         />
-
         <div>
           <p className="font-bold text-2xl md:text-5xl ">Download the mobile app</p>
           <p className="text-lg">
@@ -101,9 +94,8 @@ function HomepageHeader() {
             </a>
           </div>
         </div>
-
-        <img
-          src={isDarkTheme ? '/img/app-qr-code-dark.svg' : '/img/app-qr-code-light.svg'}
+        <ThemedImage
+          sources={{ dark: '/img/app-qr-code-dark.svg', light: '/img/app-qr-code-light.svg' }}
           alt="app qr code"
           width={'150px'}
           className="shadow-lg p-3 my-8 dark:bg-immich-dark-bg "
diff --git a/docs/src/pages/privacy-policy.tsx b/docs/src/pages/privacy-policy.tsx
index 9ffce50ed9..7bc113c0fc 100644
--- a/docs/src/pages/privacy-policy.tsx
+++ b/docs/src/pages/privacy-policy.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
-import { useColorMode } from '@docusaurus/theme-common';
 function HomepageHeader() {
-  const { isDarkTheme } = useColorMode();
-
   return (
     <header>
       <section className="max-w-[900px] m-4 p-4 md:p-6 md:m-auto md:my-12 border border-red-400 rounded-2xl  bg-slate-200 dark:bg-immich-dark-gray">