From 23b08aa4bd5aa3eb182925afc6c4f733abba09aa Mon Sep 17 00:00:00 2001
From: Kenneth Bingham <kenneth.bingham@netfoundry.io>
Date: Thu, 7 Dec 2023 11:29:02 -0500
Subject: [PATCH] use ThemedImage component instead of CSS to switch frontdoor
 diagram dark mode

---
 docs/guides/frontdoor.mdx  | 12 ++++++++++--
 website/src/css/custom.css |  6 ------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/guides/frontdoor.mdx b/docs/guides/frontdoor.mdx
index 3451eb12..ab07a7bd 100644
--- a/docs/guides/frontdoor.mdx
+++ b/docs/guides/frontdoor.mdx
@@ -9,6 +9,8 @@ import OsTabs from '@theme/OsTabs';
 import TabItem from '@theme/TabItem';
 import LinuxService from './_frontdoor-linux.mdx';
 import ReservedDocker from './_frontdoor-docker.mdx';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 **zrok frontdoor** is the heavy-duty front door to your app or site. It makes your website or app available to your online audience through the shield of zrok.io's hardened, managed frontends.
 
@@ -18,8 +20,14 @@ import ReservedDocker from './_frontdoor-docker.mdx';
 
 zrok frontends are the parts of zrok that proxy incoming public web traffic to zrok backend shares via OpenZiti. When you use zrok with a `zrok.io` frontend, you're using **zrok frontdoor**. `zrok.io` is zrok-as-a-service by NetFoundry, the team behind OpenZiti. You need a free account to use **zrok frontdoor**.
 
-![dark mode diagram](/img/zrok-frontdoor-dark-mode.svg#gh-dark-mode-only)
-![light mode diagram](/img/zrok-frontdoor-light-mode.svg#gh-light-mode-only)
+
+<ThemedImage
+  alt="frontdoor diagram"
+  sources={{
+    light: useBaseUrl('/img/zrok-frontdoor-light-mode.svg'),
+    dark: useBaseUrl('/img/zrok-frontdoor-dark-mode.svg'),
+  }}
+/>;
 
 ## Choose your OS
 
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 7ab16998..51d5db7f 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -183,9 +183,3 @@ a code {
 .language-buttonless div > button {
   display: none;
 }
-
-/* hide image sources from the other mode */
-[data-theme="light"] img[src$="#gh-dark-mode-only"],
-[data-theme="dark"] img[src$="#gh-light-mode-only"] {
-  display: none;
-}