SVGs in Navigation does not work

[franziska-caroline]

Hello 😊
I am working on the darkmode of our app and have a problem with the navigation bar and the used SVGs.
At the moment I have only tested the functionality on the Homeicon.

If I use a ternary operator for the source of the SVG, for some reason the icon for the darkmode is still used in the lightmode.
src={ theme === "light" ? router.pathname === "/" ? "/assets/HomeActive.svg" : "/assets/HomeInactive.svg" : router.pathname === "/" ? "/assets/HomeDarkmode.svg" : "/assets/HomeActive.svg" }
When I switch to dark mode, everything works as it should.
Because we use a nested ternary operator, we also tried an if else function from the JSX and it didn't work at all.

const imageSrc = () => { if (theme === "light") { if (router.pathname === "/") { return "/assets/HomeActive.svg"; } else { return "/assets/HomeInactive.svg"; } } else { if (router.pathname === "/") { return "/assets/HomeDarkmode.svg"; } else { return "/assets/HomeActive.svg"; } } };

Here is our code and we are working in the feature-darkmode branch: Link to our code

Thank you! 😊

[mbosselmann]

We discussed the solution together:
The problem why the dark mode was also used in light mode was the missing theme prop that was not handed over to the Layout component from the _app.js and was therefore always undefined for the Navigation component that receives this prop via the Layout component. :)