Automatically update theme when system theme changes

[uday-rana]

It'd be nice to automatically set light or dark mode on initial load based on system theme. One way to do this might be using the CSS media feature prefers-color-scheme.

[humphd]

We use Chakra UI, and its theming config works like this:

https://v2.chakra-ui.com/docs/styled-system/theme#config

Here is how the code is implemented

https://github.com/tarasglek/chatcraft.org/blob/main/src/theme.ts

[kliu57]

It'd be nice to automatically set light or dark mode on initial load based on system theme. One way to do this might be using the CSS media feature prefers-color-scheme.

FYI
I did some testing on this and it seems when it comes to Chrome on desktop, Chatcraft will go with the Windows theme instead of the Chrome browser theme. As for mobile Chrome, Chatcraft will go with the browser's theme (you may need to refresh cache). For firefox, Chatcraft goes with the browser's theme (you may need to refresh cache).

Seems to me the functionality is already implemented.

[uday-rana]

You're right - I assumed it doesn't because the theme doesn't update when the system theme changes, even after reloading, which is really the issue I was trying to get at.

From what I understand, turning this on would just require changing useSystemColorMode from false to true in src/theme.ts.