3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-19 09:37:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): add Inline SVG color override example (#3737)

Browse source
This commit is contained in:
Bartosz Kaszubowski 2020-11-13 14:17:22 +01:00 • committed by GitHub
parent 487a9f98e4
commit 74ee8f6150
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1057,7 +1057,7 @@ or
Docusaurus supports inlining SVGs out of the box. Docusaurus supports inlining SVGs out of the box.
```js ```jsx
import DocusaurusSvg from './docusaurus.svg'; import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />; <DocusaurusSvg />;
@ -1066,3 +1066,23 @@ import DocusaurusSvg from './docusaurus.svg';
import DocusaurusSvg from '@site/static/img/docusaurus.svg'; import DocusaurusSvg from '@site/static/img/docusaurus.svg';
<DocusaurusSvg /> <DocusaurusSvg />
This can be useful, if you want to alter the part of the SVG image via CSS. For example, you can change one of the SVG colors based on the current theme.
```jsx
import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg className="themedDocusaurus" />;
```
```css
html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
fill: greenyellow;
}
html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
fill: seagreen;
}
```
<DocusaurusSvg className="themedDocusaurus" />

8
website/src/css/custom.css
View file

@ -62,6 +62,14 @@ html[data-theme='dark'] .header-github-link:before {
background-color: var(--ifm-tabs-color-active); background-color: var(--ifm-tabs-color-active);
} }
html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
fill: greenyellow;
}
html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
fill: seagreen;
}
html[data-theme='light'] .DocSearch { html[data-theme='light'] .DocSearch {
/* --docsearch-primary-color: var(--ifm-color-primary); */ /* --docsearch-primary-color: var(--ifm-color-primary); */
/* --docsearch-text-color: var(--ifm-font-color-base); */ /* --docsearch-text-color: var(--ifm-font-color-base); */