There were many options that I tried, I think one with the
currentColor option but the one that worked seamlessly was this little snippet, you place it right after the SVG tag and it just works.
I also use Next-Themes that fully supports dark mode, including system preference with prefers-color-scheme and also immediately syncs this between tabs.
In a gist, the
prefers-color-scheme is a CSS media feature used to detect the user's preferred color scheme or theme set in their operating system or device settings. Also, you can read more about it in MDN.