fix: prevent browser-forced dark mode on Android with color-scheme: only light

[Copilot]

Some Android devices (Chrome) automatically apply a dark mode overlay to the app when the OS is in dark mode, even though no dark mode was intentionally coded. This fix opts the page out of that browser-forced dark mode entirely.

Changes

src/index.css

• Added color-scheme: only light to :root — tells the browser's rendering engine never to apply a forced dark transformation to the page.

index.html

• Added <meta name="color-scheme" content="light"> — ensures the browser applies this before CSS loads, preventing any brief flash of dark styling on Android.

Original prompt

Can you add a toggle in the settings to switch between light, dark mode, or phone settings which I think it does currently. Then store this setting locally somehow.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[CSfromCS]

@copilot I dont really want to implement a dark mode as anything extra. I just notice on some devices it goes into a dark version and I dont remember coding that. Was wondering if thats automatically made in some android devices? If so is there a way to disable that?

[Copilot]

@copilot I dont really want to implement a dark mode as anything extra. I just notice on some devices it goes into a dark version and I dont remember coding that. Was wondering if thats automatically ...

Yes, that's exactly what's happening — Chrome on Android (and some other browsers) automatically apply a "forced dark mode" overlay when the OS is in dark mode, even on pages that weren't designed for it. You hadn't coded it; the browser was doing it on its own.

Reverted the theme toggle entirely and instead added two small things to lock the app to light mode (commit dfeebb7):

1. color-scheme: only light on :root in src/index.css — tells the browser's rendering engine not to apply any dark mode transformation to the page
2. <meta name="color-scheme" content="light"> in index.html — ensures the browser knows this before CSS even loads, preventing any flash of dark styling on Android

The app will now always render in its warm light palette regardless of the device's OS dark mode setting.