Reopening: Feature/theming

[probablyangg]

Issues that need to be fixed:

• the dark theme borders are white, just want to mute them a bit
• the theme doesn't stick when switching between pages
• the theme doesn't stick when reloading

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
convo-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 9:56pm

[Ricy137]

@probablyangg Thank you for checking this. I've just made new commits for the fixups.

• For borders are too white, I adjusted from #dcdcdc to #b0b0b0 here

• For not-stick/flash problem, since the original useLayoutEffect would be too late to modify the initial DOM state without causing a visual flash, I used <script> instead. This would ensure the theme is correctly set before rendering and the perfomance concern caused by the simple <script> is ignorable

[probablyangg]

@Ricy137 thank you for the changes!
Recorded a loom here: https://www.loom.com/share/f8bdf9cb28a740d0aa3c36de6ae4f9c1?sid=99965b58-59a4-40c3-8086-97380f382979

[Ricy137]

@Ricy137 thank you for the changes! Recorded a loom here: https://www.loom.com/share/f8bdf9cb28a740d0aa3c36de6ae4f9c1?sid=99965b58-59a4-40c3-8086-97380f382979

Sorry. The issue was due to wrong priority of system preference theme. It should have been only referencing system preference when user didn't manually set a theme preference on the web instead of using system preference over user manual preference.

Fixed. Effects recording : https://www.loom.com/share/56ad25b952b04d309151e0b20f9f43f2

[probablyangg]

Works great, ty @Ricy137!
One last thing, could you please fix the colors here:

[Ricy137]

Updated, how do u think of the following style?

Initially, I want to use the same background color( bg-accent ) with other buttons in the page, however, the button in rich text is so small that the contrast between active&inactive status would be too weak so I applied the style above.