How to reproduce

1. Duplicate this template to your Notion workspace
2. Switch your system to dark mode
3. Set your Notion to Light mode
4. Test the behavior on your side

Expected behavior

This icon displayed in red

Actual behavior

This icon displayed in blue

Platforms

Both web and Electron apps have this issue. I didn’t test this issue on the mobile app.

Solution

Add the CSS color-scheme: only light to HTML body or :root when Light mode to let page assets know current color theme. Also needs to add color-scheme: only dark when Dark mode.

References

• https://cdn.simpleicons.org
• https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
• https://www.electronjs.org/docs/latest/tutorial/dark-mode

Additional comments

You can use prefer-color-scheme CSS style inside of your Notion built-in icons as well. It’s better than your current solution for dark mode.