diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index c07cc99946..701a91dc23 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -1057,7 +1057,7 @@ or
 
 Docusaurus supports inlining SVGs out of the box.
 
-```js
+```jsx
 import DocusaurusSvg from './docusaurus.svg';
 
 <DocusaurusSvg />;
@@ -1066,3 +1066,23 @@ import DocusaurusSvg from './docusaurus.svg';
 import DocusaurusSvg from '@site/static/img/docusaurus.svg';
 
 <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" />
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 94c8bab2af..8d3a14ba49 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -62,6 +62,14 @@ html[data-theme='dark'] .header-github-link:before {
   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 {
   /* --docsearch-primary-color: var(--ifm-color-primary); */
   /* --docsearch-text-color: var(--ifm-font-color-base); */