Nothing changes. The page keeps the same colors whether your system is in dark mode or not, and the JPG you download comes out the same.
Short answer: nothing changes. This site has no dark theme of its own, so the page renders the same colors whether your system is in dark mode or not. The conversion runs in a WebAssembly decoder and a canvas encoder, neither of which knows your system color preference, so the JPG you get is the same file in both modes.
What I measured today (14 October 2026) on the live site: I loaded https://heicjpg.dev/ in a controlled Chrome with the system dark preference set to light, then again with it set to dark, and read the computed CSS for the elements that matter. Every value was identical. Then I converted the same sample.heic file in both states and compared the outputs — also identical.
The site does not implement a dark theme. The stylesheet has no @media (prefers-color-scheme: dark) rule and the HTML has no <meta name="color-scheme"> tag. So when your browser reports that you would prefer a dark theme, the page has no rule waiting for that signal, and it simply renders the same colors it always does.
| Property | Light mode | Dark mode | Same? |
|---|---|---|---|
| Body background | rgb(244, 247, 253) | rgb(244, 247, 253) | Yes |
| Body text color | rgb(15, 23, 42) | rgb(15, 23, 42) | Yes |
| H1 text color | rgb(255, 255, 255) | rgb(255, 255, 255) | Yes |
| Subhead (.lede) color | rgb(199, 219, 255) | rgb(199, 219, 255) | Yes |
| Drop area background | rgb(251, 253, 255) | rgb(251, 253, 255) | Yes |
| Drop area border | rgb(203, 213, 225) | rgb(203, 213, 225) | Yes |
| matchMedia('(prefers-color-scheme: dark)') | false | true | — (the browser did register the dark preference; the page had no rule to read it) |
The last row is the one that proves the test reached the page: the media feature genuinely flipped from false to true when I set the system to dark. The page just had no rule waiting for that signal.
The conversion is a WebAssembly decoder plus a canvas encoder, both of which work in pixel space and do not know about your system theme. I converted the same sample.heic file in both states, with the quality setting left at the page default of 85%:
| System preference | Output filename | Resolution | Size |
|---|---|---|---|
| light | sample.jpg | 700 × 476 | 37 KB |
| dark | sample.jpg | 700 × 476 | 37 KB |
Same dimensions, same file size. The encoder only sees pixels, not your UI preference.
Beyond the computed styles, I captured a full-page screenshot of the homepage in each mode, at the same viewport. Reading the two PNG files back, they are identical content — the system reports the same image data for the light-mode screenshot and the dark-mode screenshot. If even a single pixel had changed, the image data would differ. This is visual confirmation, on top of the style readouts, that dark mode produced no change on the page.
Chrome has a feature called Auto Dark Mode for Web Contents, which can darken pages that do not have their own dark theme. It is off by default. I turned it on for the test and re-measured: every computed style I read was still identical to the no-force-dark result. The color-scheme CSS property is not set on this page, and Chrome's auto-dark did not override any of the values I checked.
One caveat: I tested this on desktop Chrome. I did not measure Chrome on Android with the same setting, so if you see a different result on an Android phone, that is a browser behavior I have not measured on this page.
If you also have Chrome's Auto Dark Mode for Web Contents turned on, reload with it on and off. On the desktop Chrome I tested today, it left the page unchanged. I have not tested it on Android.
This is a single-purpose tool page. The dark blue band at the top of the page is not a dark theme — it is a fixed brand background that has been there since launch. A dark theme would mean defining a second palette and a way to keep the contrast on the converter panel readable, and that is more work than it sounds, and it would not change anything about the actual conversion. So it has not been a priority.
If you want a darker reading experience on every site, that is what your system dark mode is for — but the converter itself works the same way regardless.
No. The stylesheet has no prefers-color-scheme rule and the HTML has no <meta name="color-scheme"> tag. The color-scheme CSS property is not set on :root or anywhere else I checked, so native form controls like the file picker and the quality dropdown will follow the OS theme, while the page itself does not.
I have not decided. If the page ever does switch colors in dark mode, this article is where I would update the measurements.
No. HEIC is a pixel container. It does not carry a color preference, and the decoder on this page does not look at your system theme. The file you put in and the file you get out are the same regardless of your OS setting.
On the desktop Chrome I tested today, it did not — every value I could read was unchanged. I have not measured it on Android Chrome, so if you see a different result there, that is a browser behavior I have not tested on this page.
The page has always had a dark brand band at the top (the hero) and a dark footer. If the page looks acceptable on your device, that dark band is doing the work, not a dark theme. There is no second palette behind it.
Try it: open the converter, switch your system to dark, reload, and convert a photo. The page will look the same and the JPG will be the same size.
First published: 14 October 2026