I'm working on a dark/light mode toggle for my website. It's included in my header.html file on every page. On my home page, where I haven't added the toggle yet, the icon displays perfectly. However, on other pages where the toggle is implemented, the icon gets cropped, while the light mode icon remains intact. I've spent around 30 hours trying to solve this issue without any success. I've shared a video demonstrating the problem here: https://i.imgur.com/2KTDtM2.mp4, and you can also check out my code on jsFiddle: https://jsfiddle.net/59e6zw23/.
3 Answers
One thing you should try is checking the JavaScript code that handles the theme switching. Make sure both your sun and moon SVGs are being defined properly. If they're not coded correctly in your JavaScript, that could lead to some instability in how the icons display during the toggle. Each icon should have its respective attributes to prevent any scaling issues.
Also worth looking at is how your CSS is set up for the icons. Sometimes, CSS rules can cause SVGs to behave unexpectedly when toggling. Make sure there isn’t any conflicting styling that could be altering their size on different pages. It might be a good idea to inspect the elements using your browser’s developer tools while toggling to see if anything changes unexpectedly.
Great advice! I’ll test that out next and see if CSS is affecting it in any way.
It sounds like you're running into some issues with your implementation. Without seeing the source code, it’s hard to diagnose, but it sounds like your dark mode toggle might not be set up correctly across pages. Maybe check your SVG? Specifically, ensure that the SVG has a viewBox attribute included; if it’s missing, that could definitely mess with the scaling, leading to the cropping you're seeing.
Thanks for the tip! I think your suggestion about the viewBox might help. I’ll look into that and see if the issue fixes itself.
That’s a good point. I think I might have overlooked that part. I’ll double-check the setTheme function to ensure everything's in order.