slowlydev
feat: introduce light mode
Closes issue: https://github.com/slowlydev/f1-dash/issues/159
Introducing light mode that users can toggle between.
The PR touches quite a lot of files, but all of them are purely front-end related.
I moved some of the frequently used colors (zinc-800, 700, 600) and their inverse colors to tailwind.config.ts as a single source of truth.
Screenshots:
The above screenshots are from running yarn dev.
@humblefool01 is attempting to deploy a commit to the f1-dash Team on Vercel.
A member of the Team first needs to authorize it.
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| f1-dash | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Mar 28, 2025 9:23am |
I tried a plain white color, but felt it was too bright. So I decided to invert the existing colors using this online tool and used the inverted colors in the respective places. This is probably the reason for the light yellowish shade to some colors.
This is actually my first time working with tailwind, so I agree that the approach in this PR may not be the most ideal one. Will look into the variant syntax and try to implement it.
Ah okay it makes sense that the inverting causes this yellowish shade. I would suggest using tailwinds zinc-50 up to 200 or 300 on first glance it seams that might be a good alternative to plain white.
No worries, I appreciate the effort, I have been putting this Issue off myself as its quite a lot of work to make it look good :)
I will probably join in and help to adjust some smaller things after the initial implementation with tailwinds dark variant
