aspen-cloud / triplit

A full-stack, syncing database that runs on both server and client. Pluggable storage (indexeddb, sqlite, durable objects), syncs over websockets, and works with your favorite framework (React, Solid, Vue, Svelte).
https://triplit.dev
GNU Affero General Public License v3.0
2.33k stars 70 forks source link

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

Open davemaier opened 2 weeks ago

davemaier commented 2 weeks ago

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.