👀 Views: 0 💬 Answers: 1 📅 Created: 2025-08-21

next.js css dark-mode image javascript

I'm building a feature where I've been working on this all day and I'm collaborating on a project where Quick question that's been bugging me - I'm using the Next.js Image component to render images on my blog, and I've encountered an scenario where the images are not displaying correctly when the page is in dark mode. I have a global CSS variable for the background color that changes based on the theme, but for some reason, the Image component doesn't seem to respect the styles applied to it when the dark mode is activated. Here’s a snippet of my CSS: ```css :root { --bg-color: white; --text-color: black; } [data-theme='dark'] { --bg-color: black; --text-color: white; } ``` I’m setting the background color dynamically with JavaScript based on user preference, like this: ```javascript const toggleTheme = () => { const currentTheme = document.documentElement.getAttribute('data-theme'); document.documentElement.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark'); }; ``` In my component, I'm using the Image component like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div style={{ backgroundColor: 'var(--bg-color)' }}> <Image src="/images/my-image.png" alt="My Image" layout="responsive" width={500} height={300} /> </div> ); }; ``` However, when I toggle to dark mode, the image appears too bright and washed out, almost like it’s not honoring the dark mode styles. I've tried adding a filter to the Image component, but it still doesn't look right: ```css img { filter: brightness(0.8); } ``` This doesn't seem to be applying correctly either. I've also checked the console for any errors, but nothing seems out of the ordinary. Any ideas on how to fix this or what I might be missing to ensure the images display properly in dark mode? I'm currently using Next.js version 12.2.5. This is part of a larger API I'm building. For context: I'm using Javascript on macOS. Am I missing something obvious? This is my first time working with Javascript 3.10. Could someone point me to the right documentation? Is this even possible? Is this even possible?