mfocko/blog
1
0
Fork 0
mirror of https://github.com/mfocko/blog.git synced 2024-12-22 09:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement ‹ThemedSVG› component

Browse source 
Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
Matej Focko 2023-07-20 20:26:49 +02:00
parent 0be9e55b03
commit 568b9194d2
Signed by: mfocko
GPG key ID: 7C47D46246790496
2 changed files with 33 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/ThemedSVG/index.tsx Normal file
View file

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

14
src/css/custom.scss
View file

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