3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-31 09:57:03 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): add ThemedImage component (#3730)

Browse source 
* feat(v2): add ThemedImage component

* add themed image problematic example

* refactor, SSR fix, openness about extending img tag, docs update

* refactor themed-image

* update themed image doc

Co-authored-by: slorber <lorber.sebastien@gmail.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
This commit is contained in:
Bartosz Kaszubowski 2020-11-13 14:29:45 +01:00 • committed by GitHub
parent 73f151d04c
commit 9d90e896f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 229 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

27
website/docs/markdown-features.mdx
View file

@ -1086,3 +1086,30 @@ html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
```
<DocusaurusSvg className="themedDocusaurus" />
### Themed Images
Docusaurus supports themed images: the `ThemedImage` component (included in the classic/bootstrap themes) allows you to switch the image source based on the current theme.
```jsx {5-8}
import ThemedImage from '@theme/ThemedImage';
<ThemedImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl('img/docusaurus_light.svg'),
dark: useBaseUrl('img/docusaurus_dark.svg'),
}}
/>;
```
import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemedImage from '@theme/ThemedImage';
<ThemedImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl('img/docusaurus_keytar.svg'),
dark: useBaseUrl('img/docusaurus_speed.svg'),
}}
/>