Replacing svg images in dark mode

[monica-m-ps]

I have an SVG image with a green tickmark and a * for conditions apply. So in dark mode, the * needs to change color, I assume we need to replace the image and I can create a new image. But how to replace the image in dark mode?

[slorber]

If your SVG is an external .svg file, you can do:

import ThemedImage from '@theme/ThemedImage';

<ThemedImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl('/img/docusaurus_light.svg'),
    dark: useBaseUrl('/img/docusaurus_dark.svg'),
  }}
/>;

https://docusaurus.io/docs/markdown-features/assets#github-style-themed-images

---

If you don't want to have duplicate .svg files, you can target SVG elements with custom CSS

svg.mySvg .mySvgPath {
  fill: red;
}

[data-theme='dark'] svg.mySvg .mySvgPath {
  fill: blue;
}

---

If your SVG is a React component you can do:

import React from 'react';
import {useColorMode} from '@docusaurus/theme-common';

export default function IconArrow(props) {
  const {colorMode} = useColorMode();
  const mySvgColor = colorMode === "dark" ? "red" : "blue";
  return (
    <svg width="20" height="20" {...props}>
      <g fill={mySvgColor}>
        <path d="M9.992 10.023c0..." />
      </g>
    </svg>
  );
}

Note: I don't recommend much this one because it can produce "hydration FOUC": on first page load the colorMode injected in the component will be the default color mode, not the actual one, and your svg might be of the wrong color for a few milliseconds/seconds before being fixed after React hydration. It may be a problem depending on your use-case.

[felipecrs]

Hey @slorber, thanks a lot for the response. I believe option 2 will greatly help me indeed.

Note that if possible it's preferable to customize the SVG with CSS instead of using this component. Only use this if your light/dark logos are significantly different.

My light/dark logo aren't significantly different (I just change the color), the problem is:

• I want ThemedImage so that I have full control over the position of the image like margin, alignment, etc. AFAIK this is not possible with <DocusaurusSvg>. Maybe I can use the plain <img>? Not sure if the CSS would still apply in this case.
• I don't want to write stuff to the main CSS. My doc portal is divided into multiple repositories, where I have a central one that builds the website and pulls the docs from other repos. I don't want to have to tweak the central CSS because of a logo in one of the repos.

If you have any idea to handle the above more gracefully so I don't have to duplicate my SVG files that would be even better.

[slorber]

Then the solution I'd recommend is to use an SVG component wrapper + CSS modules:

import React from 'react';

import LogoSvg from "./logo.svg";
import styles from "./styles.module.css";

function MyThemedLogo(): JSX.Element {
  return (
    <LogoSvg className={styles.logo}/>
  );
}

You don't even need an external svg file, you can just convert your logo to React immediately:

https://react-svgr.com/playground/

If you don't like CSS modules you can also use a global CSS rules, declared locally: import './styles.css'

[felipecrs]

Alright, will try that. Thanks a ton!

[tobi1220]

Disable our feature globally

@slorber Could you give me a hint on how to do this? The referenced comment didn't really help, how can I modify the SVGR config with the configureWebpack hook?

[slorber]

@tobi1220 We don't offer an official API to modify the SVGR plugin but you can hook into configureWebpack, log the config object you receive and decide yourself how you want to modify it. I don't recommend disabling SVGR completely because we use it in the theme internally. It is likely possible to disable it partially by using exclusions.

[monica-m-ps]

Sorry to not share my result. I tried @slorber's method and it worked. So I have also used another method because I needed this for a table. And my use case is
|Captured| ![yes](/images/dojo-icons-small/CheckCircleTwoStars.svg#gh-light-mode-only)![yes](/images/dojo-icons-small/CheckCircleTwoStarsDarkMode.svg#gh-dark-mode-only) | ![no](/images/dojo-icons-small/XCircle.svg)

You can see results here: https://docs.dojo.tech/payments/manage-payments/cancellation-payments/reversal

Sorry I'm not too technical but know the basics that a technical writer must know and I'm still learning.

Thanks!