feat: implement ‹ThemedSVG› component

Signed-off-by: Matej Focko <mfocko@redhat.com>

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`}
+            />
+        </>
+    );
+}

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;
 }