aspen-cloud/triplit

React template css `color-scheme` in `root` leads to confusion in safari

Opened this issue · 0 comments

Hi! I've tried the react template and was a bit confused about the checkboxes at the beginning. When playing around with multiple windows/browsers in safari, I got the feeling that data doesn't get synced properly.

It turned out that data was synced properly but visual presentation of the checkboxes is problematic in safari.

In index.css, the color-scheme attribute is set to light dark for the :root element. The checkbox inherits this. I think if system theme is now set to dark, the checkmark in the checkbox doesn't get displayed anymore as soon as the browser window is not focused. If I set color-scheme to light for the checkbox, everything works properly.