Get the current color scheme in JavaScript

[raw galleon]

How to inline style a component based on the current color scheme? #theme #color

[keen oriole]

document.documentElement.getAttribute('data-mantine-color-scheme')

[abstract folio]

There was a useMantineTheme hook, I am looking for it, this one doesn't work here...

I want to change the log variant (png file) dynamically based on dark or light, how to do that?

[keen oriole]

Why it does not work?

[abstract folio]

I am not sure, take a look at the code...

import lightLogo from "/Logo.png";
import darkLogo from "/Logo-dark.png"; // stored in public folder at root level
----------------------------
 useEffect(() => {
    const theme = document.documentElement.getAttribute('data-mantine-color-scheme');
    setLogoSrc(theme === 'dark' ? darkLogo : lightLogo);
  }, []);

  const [logoSrc, setLogoSrc] = useState(lightLogo);
 <Image
     radius="md"
     src={logoSrc}
/>

[abstract folio]

I think it's related somehow to the import statement where the logos are in the public folder, or is this the way we do it in react?

Although even putting it in the same folder doesn't make it work