From 568b9194d2b7b041811c9b676feef025ad83cbf8 Mon Sep 17 00:00:00 2001
From: Matej Focko <mfocko@redhat.com>
Date: Thu, 20 Jul 2023 20:26:49 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20implement=20=E2=80=B9ThemedSVG=E2=80=BA?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Matej Focko <mfocko@redhat.com>
---
 src/components/ThemedSVG/index.tsx | 22 ++++++++++++++++++++++
 src/css/custom.scss                | 14 +++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ThemedSVG/index.tsx

diff --git a/src/components/ThemedSVG/index.tsx b/src/components/ThemedSVG/index.tsx
new file mode 100644
index 0000000..7b7503f
--- /dev/null
+++ b/src/components/ThemedSVG/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+export default function ThemedSVG(props): JSX.Element {
+    const { source, className: parentClassName, alt, ...propsRest } = props;
+
+    return (
+        <>
+            <embed
+                className={clsx("light-mode-only", parentClassName)}
+                type="image/svg+xml"
+                src={`${source}_light.svg`}
+            />
+            <embed
+                className={clsx("dark-mode-only", parentClassName)}
+                type="image/svg+xml"
+                src={`${source}_dark.svg`}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 8a76304..c388de7 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -26,7 +26,12 @@
   --ifm-color-primary-lightest: #69bcf5;
 }
 
-pre, code, kbd, var, tt {
+pre,
+code,
+kbd,
+var,
+tt,
+text {
   font-family: 'Iosevka', 'Cascadia Code PL', 'JetBrains Mono', 'Fira Code', 'Hack', monospace;
 }
 
@@ -34,12 +39,15 @@ pre, code, kbd, var, tt {
 [data-theme='dark'] code,
 [data-theme='dark'] kbd,
 [data-theme='dark'] var,
-[data-theme='dark'] tt {
+[data-theme='dark'] tt,
+[data-theme='dark'] text {
   font-weight: 350;
 }
 
 [data-theme='light'] img[src$='#gh-dark-mode-only'],
-[data-theme='dark'] img[src$='#gh-light-mode-only'] {
+[data-theme='dark'] img[src$='#gh-light-mode-only'],
+[data-theme="light"] .dark-mode-only,
+[data-theme="dark"] .light-mode-only {
   display: none;
 }