Custom theming #77
Custom theming #77
Conversation
because that is what we are implementing here
Inspired by Hema implementation
| MaterialTheme( | ||
| colorScheme = colorScheme, | ||
| typography = Typography, | ||
| CompositionLocalProvider( | ||
| LocalAppTypography provides typography, | ||
| LocalAppColorTokens provides if (darkTheme) AppColorTokensDark else AppColorTokensLight, | ||
| LocalAppShapes provides shapes, | ||
| content = content | ||
| ) |
There was a problem hiding this comment.
i would expand this a little bit to also provide some crucial elements used thought the app (namely ripples & indicators):
CompositionLocalProvider(
LocalAppColorTokens provides if (darkTheme) AppColorTokensDark else AppColorTokensLight,
LocalAppTypography provides typography,
LocalAppShapes provides shapes,
/** configures the ripple for material components */
LocalRippleConfiguration provides AppRippleConfiguration,
/** needed for non-material components to have a material ripple. eg [Modifier.clickable] */
LocalIndication provides AppRipple,
/** merges the platform style with our type, @see [ProvideTextStyle] for more context */
LocalTextStyle provides LocalTextStyle.current.merge(typography.body),
content = content
)
There was a problem hiding this comment.
potentially also a default LocalContentColor so that at least the base text/content color is defined. it could avoid a lot of issues where a dev forgets to manually specify the color on any component.
| SideEffect { | ||
| val window = (view.context as Activity).window | ||
| window.statusBarColor = colorScheme.primary.toArgb() | ||
| window.statusBarColor = colors.accent.toArgb() | ||
| WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme |
There was a problem hiding this comment.
any reason we are using this instead of enableEdgeToEdge()?
https://developer.android.com/develop/ui/views/layout/edge-to-edge#enable-edge-to-edge-display
|
|
||
| @Immutable | ||
| data class AppShapes( | ||
| val small: Shape = RoundedCornerShape(Dimens.Containers.cornerRadius), |
There was a problem hiding this comment.
should we also define a cornerRadiusSmall?
There was a problem hiding this comment.
should we move the shapes & type to its own files similar to colors?
| object Containers { | ||
| val cornerRadius = 8.dp | ||
| val cornerRadiusLarge = 16.dp | ||
| } |
There was a problem hiding this comment.
if we only want this for the shapes, should we move it there instead of leaving it public here? it might be nice to force the usage of the AppTheme.shapes instead of creating new shapes using the corner here
|
|
||
| import androidx.compose.ui.graphics.Color | ||
|
|
||
| interface AppColorTokens { |
There was a problem hiding this comment.
i would name this AppColorScheme (TemplateColorScheme?) to avoid using token in the word. token is too vague for what this is (for me).
| colors = ButtonDefaults.buttonColors( | ||
| containerColor = AppTheme.colors.accent, | ||
| contentColor = AppTheme.colors.buttonText | ||
| ) |
There was a problem hiding this comment.
should we define every button color? not doing it could mean that the usage of this button is expanded without defining the colours for it and thus ending with a weirdly themed state
| WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme | ||
| } | ||
| } | ||
|
|
||
| MaterialTheme( |
There was a problem hiding this comment.
Please revert: We still need the MaterialTheme wrapper for system Composables like AlertDialog
Why is this important?
Notes