From 39496daeaaecfee1908c8fa8f156f93ea289cf73 Mon Sep 17 00:00:00 2001 From: Ruby Lichtenstein Date: Sat, 23 Sep 2023 15:58:43 +0300 Subject: [PATCH] theme --- .../ui/breeds/BreedsScreen.kt | 46 +++++----- .../ui/favorites/FavoritesScreen.kt | 12 +-- .../rubylichtenstein/ui/images/ImagesGrid.kt | 4 +- .../ui/images/ImagesScreen.kt | 11 +-- .../com/rubylichtenstein/ui/theme/Color.kt | 68 +++++++++++++++ .../com/rubylichtenstein/ui/theme/Theme.kt | 85 +++++++++++++++++++ 6 files changed, 181 insertions(+), 45 deletions(-) create mode 100644 ui/src/main/java/com/rubylichtenstein/ui/theme/Color.kt diff --git a/ui/src/main/java/com/rubylichtenstein/ui/breeds/BreedsScreen.kt b/ui/src/main/java/com/rubylichtenstein/ui/breeds/BreedsScreen.kt index 7429f93..bbc9d80 100644 --- a/ui/src/main/java/com/rubylichtenstein/ui/breeds/BreedsScreen.kt +++ b/ui/src/main/java/com/rubylichtenstein/ui/breeds/BreedsScreen.kt @@ -4,13 +4,12 @@ package com.rubylichtenstein.ui.breeds import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items +import androidx.compose.material3.Card +import androidx.compose.material3.CenterAlignedTopAppBar import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.LargeTopAppBar import androidx.compose.material3.ListItem import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold @@ -57,18 +56,14 @@ fun BreedsScreen( Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), - topBar = { - LargeTopAppBar( - colors = TopAppBarDefaults.topAppBarColors( - containerColor = MaterialTheme.colorScheme.primaryContainer, - titleContentColor = MaterialTheme.colorScheme.primary, - ), + CenterAlignedTopAppBar( title = { Text( - "Dog Breeds", + "Dogiz", maxLines = 1, - overflow = TextOverflow.Ellipsis + overflow = TextOverflow.Ellipsis, + style = MaterialTheme.typography.headlineMedium, ) }, scrollBehavior = scrollBehavior @@ -91,27 +86,24 @@ fun BreedList(breeds: List, onItemClick: (BreedEntity) -> Unit) { LazyColumn { items(breeds) { breed -> BreedListItem(breed = breed, onClick = { onItemClick(breed) }) - HorizontalDivider( - thickness = 2.dp, - color = MaterialTheme.colorScheme.primaryContainer - ) } } } @Composable fun BreedListItem(breed: BreedEntity, onClick: () -> Unit) { - ListItem( + Card( modifier = Modifier - .clickable(onClick = onClick) - .padding(top = 4.dp, bottom = 4.dp) - .fillMaxWidth(), - headlineContent = { - Text( - text = breed.name.capitalizeWords(), - style = MaterialTheme.typography.titleLarge, - color = MaterialTheme.colorScheme.onBackground - ) - }, - ) + .padding(horizontal = 16.dp, vertical = 4.dp) + ) { + ListItem( + headlineContent = { + Text( + text = breed.name.capitalizeWords(), + ) + }, + Modifier.clickable(onClick = onClick), + tonalElevation = 4.dp, + ) + } } \ No newline at end of file diff --git a/ui/src/main/java/com/rubylichtenstein/ui/favorites/FavoritesScreen.kt b/ui/src/main/java/com/rubylichtenstein/ui/favorites/FavoritesScreen.kt index 9b443c8..8cc6f46 100644 --- a/ui/src/main/java/com/rubylichtenstein/ui/favorites/FavoritesScreen.kt +++ b/ui/src/main/java/com/rubylichtenstein/ui/favorites/FavoritesScreen.kt @@ -4,7 +4,7 @@ import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.ArrowBack +import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.filled.Check import androidx.compose.material3.* import androidx.compose.runtime.* @@ -36,10 +36,6 @@ fun FavoritesScreen( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( - colors = TopAppBarDefaults.topAppBarColors( - containerColor = MaterialTheme.colorScheme.primaryContainer, - titleContentColor = MaterialTheme.colorScheme.primary, - ), title = { Text( "Favorites", @@ -50,9 +46,8 @@ fun FavoritesScreen( navigationIcon = { IconButton(onClick = { navController.popBackStack() }) { Icon( - imageVector = Icons.Filled.ArrowBack, + imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back", - tint = MaterialTheme.colorScheme.primary ) } }, @@ -88,7 +83,8 @@ fun FavoritesScreen( } } } - } } + } + } } @Composable diff --git a/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesGrid.kt b/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesGrid.kt index 4c7ddda..3467efc 100644 --- a/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesGrid.kt +++ b/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesGrid.kt @@ -36,7 +36,7 @@ fun DogImagesGrid( ) { LazyVerticalGrid( columns = GridCells.Fixed(2), - contentPadding = PaddingValues(horizontal = 16.dp, vertical = 24.dp), + contentPadding = PaddingValues(horizontal = 16.dp, vertical = 4.dp), verticalArrangement = Arrangement.spacedBy(16.dp), horizontalArrangement = Arrangement.spacedBy(16.dp) ) { @@ -77,7 +77,7 @@ fun DogImageItem( ) { Text( text = breedImage.breedName, - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.bodyLarge, maxLines = 1, overflow = TextOverflow.Ellipsis, modifier = Modifier diff --git a/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesScreen.kt b/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesScreen.kt index 0f8823d..e29ef59 100644 --- a/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesScreen.kt +++ b/ui/src/main/java/com/rubylichtenstein/ui/images/ImagesScreen.kt @@ -5,12 +5,11 @@ package com.rubylichtenstein.ui.images import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.ArrowBack +import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.LargeTopAppBar -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBarDefaults @@ -29,6 +28,7 @@ import com.rubylichtenstein.domain.common.capitalizeWords import com.rubylichtenstein.ui.common.AsyncStateHandler import com.rubylichtenstein.ui.favorites.FavoritesViewModel +@OptIn(ExperimentalMaterial3Api::class) @Composable fun ImagesScreen( navController: NavController, @@ -50,10 +50,6 @@ fun ImagesScreen( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( - colors = TopAppBarDefaults.topAppBarColors( - containerColor = MaterialTheme.colorScheme.primaryContainer, - titleContentColor = MaterialTheme.colorScheme.primary, - ), title = { Text( buildDisplayName(breed, subBreed).capitalizeWords(), @@ -64,9 +60,8 @@ fun ImagesScreen( navigationIcon = { IconButton(onClick = { navController.popBackStack() }) { Icon( - imageVector = Icons.Filled.ArrowBack, + imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "ArrowBack", - tint = MaterialTheme.colorScheme.primary ) } }, diff --git a/ui/src/main/java/com/rubylichtenstein/ui/theme/Color.kt b/ui/src/main/java/com/rubylichtenstein/ui/theme/Color.kt new file mode 100644 index 0000000..fbfa5a9 --- /dev/null +++ b/ui/src/main/java/com/rubylichtenstein/ui/theme/Color.kt @@ -0,0 +1,68 @@ +package com.rubylichtenstein.ui.theme + +import androidx.compose.ui.graphics.Color + +val md_theme_light_primary = Color(0xFF825500) +val md_theme_light_onPrimary = Color(0xFFFFFFFF) +val md_theme_light_primaryContainer = Color(0xFFFFDDB3) +val md_theme_light_onPrimaryContainer = Color(0xFF291800) +val md_theme_light_secondary = Color(0xFF6F5B40) +val md_theme_light_onSecondary = Color(0xFFFFFFFF) +val md_theme_light_secondaryContainer = Color(0xFFFBDEBC) +val md_theme_light_onSecondaryContainer = Color(0xFF271904) +val md_theme_light_tertiary = Color(0xFF51643F) +val md_theme_light_onTertiary = Color(0xFFFFFFFF) +val md_theme_light_tertiaryContainer = Color(0xFFD4EABB) +val md_theme_light_onTertiaryContainer = Color(0xFF102004) +val md_theme_light_error = Color(0xFFBA1A1A) +val md_theme_light_errorContainer = Color(0xFFFFDAD6) +val md_theme_light_onError = Color(0xFFFFFFFF) +val md_theme_light_onErrorContainer = Color(0xFF410002) +val md_theme_light_background = Color(0xFFFFFBFF) +val md_theme_light_onBackground = Color(0xFF1F1B16) +val md_theme_light_surface = Color(0xFFFFFBFF) +val md_theme_light_onSurface = Color(0xFF1F1B16) +val md_theme_light_surfaceVariant = Color(0xFFF0E0CF) +val md_theme_light_onSurfaceVariant = Color(0xFF4F4539) +val md_theme_light_outline = Color(0xFF817567) +val md_theme_light_inverseOnSurface = Color(0xFFF9EFE7) +val md_theme_light_inverseSurface = Color(0xFF34302A) +val md_theme_light_inversePrimary = Color(0xFFFFB951) +val md_theme_light_shadow = Color(0xFF000000) +val md_theme_light_surfaceTint = Color(0xFF825500) +val md_theme_light_outlineVariant = Color(0xFFD3C4B4) +val md_theme_light_scrim = Color(0xFF000000) + +val md_theme_dark_primary = Color(0xFFFFB951) +val md_theme_dark_onPrimary = Color(0xFF452B00) +val md_theme_dark_primaryContainer = Color(0xFF633F00) +val md_theme_dark_onPrimaryContainer = Color(0xFFFFDDB3) +val md_theme_dark_secondary = Color(0xFFDDC2A1) +val md_theme_dark_onSecondary = Color(0xFF3E2D16) +val md_theme_dark_secondaryContainer = Color(0xFF56442A) +val md_theme_dark_onSecondaryContainer = Color(0xFFFBDEBC) +val md_theme_dark_tertiary = Color(0xFFB8CEA1) +val md_theme_dark_onTertiary = Color(0xFF243515) +val md_theme_dark_tertiaryContainer = Color(0xFF3A4C2A) +val md_theme_dark_onTertiaryContainer = Color(0xFFD4EABB) +val md_theme_dark_error = Color(0xFFFFB4AB) +val md_theme_dark_errorContainer = Color(0xFF93000A) +val md_theme_dark_onError = Color(0xFF690005) +val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) +val md_theme_dark_background = Color(0xFF1F1B16) +val md_theme_dark_onBackground = Color(0xFFEAE1D9) +val md_theme_dark_surface = Color(0xFF1F1B16) +val md_theme_dark_onSurface = Color(0xFFEAE1D9) +val md_theme_dark_surfaceVariant = Color(0xFF4F4539) +val md_theme_dark_onSurfaceVariant = Color(0xFFD3C4B4) +val md_theme_dark_outline = Color(0xFF9C8F80) +val md_theme_dark_inverseOnSurface = Color(0xFF1F1B16) +val md_theme_dark_inverseSurface = Color(0xFFEAE1D9) +val md_theme_dark_inversePrimary = Color(0xFF825500) +val md_theme_dark_shadow = Color(0xFF000000) +val md_theme_dark_surfaceTint = Color(0xFFFFB951) +val md_theme_dark_outlineVariant = Color(0xFF4F4539) +val md_theme_dark_scrim = Color(0xFF000000) + + +val seed = Color(0xFF825500) \ No newline at end of file diff --git a/ui/src/main/java/com/rubylichtenstein/ui/theme/Theme.kt b/ui/src/main/java/com/rubylichtenstein/ui/theme/Theme.kt index 48bed4f..fb4fe48 100644 --- a/ui/src/main/java/com/rubylichtenstein/ui/theme/Theme.kt +++ b/ui/src/main/java/com/rubylichtenstein/ui/theme/Theme.kt @@ -1,13 +1,98 @@ package com.rubylichtenstein.ui.theme +import android.os.Build +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.dynamicDarkColorScheme +import androidx.compose.material3.dynamicLightColorScheme +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.ui.platform.LocalContext + + +private val LightColors = lightColorScheme( + primary = md_theme_light_primary, + onPrimary = md_theme_light_onPrimary, + primaryContainer = md_theme_light_primaryContainer, + onPrimaryContainer = md_theme_light_onPrimaryContainer, + secondary = md_theme_light_secondary, + onSecondary = md_theme_light_onSecondary, + secondaryContainer = md_theme_light_secondaryContainer, + onSecondaryContainer = md_theme_light_onSecondaryContainer, + tertiary = md_theme_light_tertiary, + onTertiary = md_theme_light_onTertiary, + tertiaryContainer = md_theme_light_tertiaryContainer, + onTertiaryContainer = md_theme_light_onTertiaryContainer, + error = md_theme_light_error, + errorContainer = md_theme_light_errorContainer, + onError = md_theme_light_onError, + onErrorContainer = md_theme_light_onErrorContainer, + background = md_theme_light_background, + onBackground = md_theme_light_onBackground, + surface = md_theme_light_surface, + onSurface = md_theme_light_onSurface, + surfaceVariant = md_theme_light_surfaceVariant, + onSurfaceVariant = md_theme_light_onSurfaceVariant, + outline = md_theme_light_outline, + inverseOnSurface = md_theme_light_inverseOnSurface, + inverseSurface = md_theme_light_inverseSurface, + inversePrimary = md_theme_light_inversePrimary, + surfaceTint = md_theme_light_surfaceTint, + outlineVariant = md_theme_light_outlineVariant, + scrim = md_theme_light_scrim, +) + +private val DarkColors = darkColorScheme( + primary = md_theme_dark_primary, + onPrimary = md_theme_dark_onPrimary, + primaryContainer = md_theme_dark_primaryContainer, + onPrimaryContainer = md_theme_dark_onPrimaryContainer, + secondary = md_theme_dark_secondary, + onSecondary = md_theme_dark_onSecondary, + secondaryContainer = md_theme_dark_secondaryContainer, + onSecondaryContainer = md_theme_dark_onSecondaryContainer, + tertiary = md_theme_dark_tertiary, + onTertiary = md_theme_dark_onTertiary, + tertiaryContainer = md_theme_dark_tertiaryContainer, + onTertiaryContainer = md_theme_dark_onTertiaryContainer, + error = md_theme_dark_error, + errorContainer = md_theme_dark_errorContainer, + onError = md_theme_dark_onError, + onErrorContainer = md_theme_dark_onErrorContainer, + background = md_theme_dark_background, + onBackground = md_theme_dark_onBackground, + surface = md_theme_dark_surface, + onSurface = md_theme_dark_onSurface, + surfaceVariant = md_theme_dark_surfaceVariant, + onSurfaceVariant = md_theme_dark_onSurfaceVariant, + outline = md_theme_dark_outline, + inverseOnSurface = md_theme_dark_inverseOnSurface, + inverseSurface = md_theme_dark_inverseSurface, + inversePrimary = md_theme_dark_inversePrimary, + surfaceTint = md_theme_dark_surfaceTint, + outlineVariant = md_theme_dark_outlineVariant, + scrim = md_theme_dark_scrim, +) @Composable fun DogBreedsTheme( + useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { + val context = LocalContext.current + val colors = when { + (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) -> { + if (useDarkTheme) dynamicDarkColorScheme(context) + else dynamicLightColorScheme(context) + } + + useDarkTheme -> DarkColors + else -> LightColors + } + MaterialTheme( + colorScheme = colors, content = content ) } \ No newline at end of file