Stemstr Light Theme

[rockymedure]

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.

[michaelhall923]

This might be helpful. The color theming documentation for the UI framework I'm using: https://v5.mantine.dev/theming/colors/

[rockymedure]

Awesome 👏

[robagreda]

@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]

@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]

@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]

Exactly

[michaelhall923]

Then creating a new theme is just a matter of coming up with a new palette