useTheme should know which colorscheme is currently applied

[mattcosta7]

When an unknown colorscheme is applied, the ThemeProvider falls back to a base theme, which is nice for ensuring a user sees something reasonable, but may not be the expected theme.

This behavior is a little hard to test for, since there's no property returned from useTheme describing which colorScheme is currently applied in the context.

<ThemeProvider {...{colorMode: night, nightScheme: dark_colorblind}}>...</ThemeProvider>

for instance, gives a useTheme return of

const theme = useTheme()
=> {
   colorMode: "night"
   colorScheme: "dark_colorblind"
   dayScheme: "light"
   nightScheme: "dark_colorblind"
   resolvedColorMode: "night"
   theme: {}
}

but when I pass an invalid colorScheme like

<ThemeProvider {...{colorMode: night, nightScheme: dark_protanopia}}>...</ThemeProvider>

const theme = useTheme()
=> {
   colorMode: "night"
   colorScheme: "dark_protanopia"
   dayScheme: "light"
   nightScheme: "dark_protanopia"
   resolvedColorMode: "night"
   theme: {}
}

This does console.error, however since themes can be provided at runtime it might be helpful to be able to determine which theme is currently applied in a given context.

Based on the above, the current way to do that seems like

theme.theme && theme.colorScheme && theme.colorScheme in theme.theme.colorSchemes ? theme.colorScheme : _some other color scheme - the default one _

A resolvedColorScheme property returned from useTheme, that returns which color scheme is actually active in a context might be a nice way to internalize that check and provide a nice way to validate that the correct them is applied from a consumer.

const themeProps = {colorMode: night, nightScheme: dark_protanopia}
<ThemeProvider {...themeProps}>
   <Component />
</ThemeProvider>

const Component = () => {
   const theme = useTheme()
   return <div id="testme" data-test-colorscheme={theme.resolvedColorScheme} />
}

assertEquals(window.testme.dataset.testColorscheme, theme.resolvedColorScheme)

[colebemis]

Added to our inbox. Thank you!

[colebemis]

@mattcosta7 What's the urgency of this? Is it blocking any Memex work?

[mattcosta7]

Nope - not blocking anything @colebemis, the hack we have in place to test this is ok for the time being

[mattcosta7]

@colebemis - opened a pr for it #1679