Repository navigation
Stemstr Light Theme #11
Description
Job
Enhance our Stemstr system components to include a light theme
Goal
A visually lighter and more airy feel to the app that can live in light themed iOS, Android and Desktop environments and feel natural. Having higher contrast between elements will be important b/c light theme is used in daylight situations and sun-glare will be prevalent.
So, having the theme push on the aspect of contrast and airiness beyond where we are with the dark theme will be critically important.
Considerations
Component consistency
Ensuring that our components are connected up across our Figma flows and can easily switch between light and dark theme using a tool like Themer. We should be able to flip a switch and have every element in our app reflect the current theme, whether light or dark.
Accessibility
This light theme should pass common accessibility tests for contrast between text, foreground and background elements.
Eng buildability
Make it easy for our eng team to implement a themed system with minimal effort. Having a clear color system will help not only with light theme, but also any future theming that we may want to do.
Activity
michaelhall923 commentedon Apr 13, 2023
This might be helpful. The color theming documentation for the UI framework I'm using: https://v5.mantine.dev/theming/colors/
rockymedure commentedon Apr 13, 2023
Awesome 👏
robagreda commentedon Apr 14, 2023
@rockymedure I am thinking to take each component already in place, and create a variant that is light mode that you can turn on/off from the Figma properties panel. How that sounds?
rockymedure commentedon Apr 14, 2023
@robagreda I think it would make more sense to not do theming at the component level, but within the colors of the app. Theming is more of an app-wide toggle. With your original proposal we'd be having to turn every single component into light theme or dark theme. We wouldn't need that flexibility b/c there wouldn't be a case where we'd have a light themed nav with a dark themed note, yea know what i mean?
michaelhall923 commentedon Apr 14, 2023
@rockymedure So have a dark mode palette that maps 1:1 with a light mode palette? That makes the most sense from an engineering perspective.
rockymedure commentedon Apr 14, 2023
Exactly
michaelhall923 commentedon Apr 14, 2023
Then creating a new theme is just a matter of coming up with a new palette