fix: Toggle not visible in light mode

[harshit078]

Note

• This PR solves the issue Select in Data model > Object > date field details in dark mode isn't clearly visible #7321
• Added a minor fix in color background of toggle

[greptile-apps]

PR Summary

This pull request addresses the visibility issue of the Toggle component in light mode by modifying its background color when in the "off" state.

• Changed background color in StyledContainer from theme.background.quaternary to theme.background.invertedSecondary for improved contrast
• Modification affects the Toggle component used across the application, including in data model field options
• Fix aims to resolve issue Select in Data model > Object > date field details in dark mode isn't clearly visible #7321, enhancing visibility in both dark and light modes
• No changes to component functionality or structure, focusing solely on visual improvement

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[Bonapara]

Thanks for raising this PR @harshit078!

You're right, the visibility is poor in Dark mode, but we should address it differently. Keep the toggle background set to "Transparent/Medium," but change the button color to gray/10. (Gray/10 is a primitive color, meaning it will remain #FCFCFC in both light and dark modes)

Illustration:

[FelixMalfait]

Thank you!

[github-actions]

Thanks @harshit078 for your contribution!
This marks your 21st PR on the repo. You're top 2% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter