search

tarasglek / chatcraft.org

Developer-oriented ChatGPT clone
https://chatcraft.org/
MIT License
157 stars 39 forks source link

Automatically detect system theme #694

Open uday-rana opened 1 month ago

uday-rana commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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.