This Day In History Jetpack Compose App - Apply Theme

Objective:

Now that all the fundamentals are in place, we can finally apply light/dark themes and style correctly the following screens:

Navigation Drawer.
Settings.
Languages.
About.

Once done, we should see them as follows:

Navigation Drawer, Light Mode:		Navigation Drawer, Dark Mode:

Theme Screen, Light Mode:		Theme Screen, Dark Mode:

Code

Utility Functions

Add gradientColors function to the AppNavigationDrawerWithContent.kt file.


package com.coroutines.thisdayinhistory.drawer

@Composable
private fun gradientColors(themeViewModelState: AppConfigurationState) =
    if (themeViewModelState.appTheme == ThisDayInHistoryThemeEnum.Dark)
        listOf(
            MaterialTheme.colorScheme.background,
            MaterialTheme.colorScheme.background,
            MaterialTheme.colorScheme.background,
            MaterialTheme.colorScheme.background
        )
    else
        listOf(
            MaterialTheme.colorScheme.background,
            MaterialTheme.colorScheme.background,
            MaterialTheme.colorScheme.background,
            MaterialTheme.colorScheme.background,
            MetallicSilver
        )

AppNavigationDrawerWithContent Composable

Update the AppNavigationDrawerWithContent composable to use the gradientColors function.


@OptIn( ExperimentalMaterial3Api::class)
@Composable
fun AppNavigationDrawerWithContent(
    navController: NavController,
    settingsViewModel: ISettingsViewModel,
    content: @Composable () -> Unit
) {
    val settingsViewModelState by settingsViewModel.appConfigurationState.collectAsStateWithLifecycle()
    val items = navDrawerItems()
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val selectedItem = remember { mutableStateOf(items[0]) }
    val backgroundColors = gradientColors(themeViewModelState = settingsViewModelState)
    var isItemImageExpanded by remember { mutableStateOf(false) }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Column (
                    Modifier
                        .fillMaxSize()
                        .background(
                            brush = Brush.verticalGradient(
                                colors = backgroundColors
                            )
                        ))
                {
                    CatLogo(settings = settingsViewModelState )
                    Spacer(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(5.dp)
                    )
                    val navBackStackEntry by navController.currentBackStackEntryAsState()
                    val currentRoute = navBackStackEntry?.destination?.route
                    items.forEach { item ->
                        BuildNavigationDrawerItem(
                            item,
                            currentRoute,
                            scope,
                            drawerState,
                            selectedItem,
                            navController
                        )
                    }
                    Spacer(modifier = Modifier.weight(1f))
                    Text(
                        text = "By coroutines.com",
                        color = Color.Yellow,
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .padding(12.dp)
                            .padding(bottom = 20.dp)
                            .align(Alignment.CenterHorizontally)
                    )
                }
            }
        }
    ) {
        val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
        Scaffold(
            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection ),
            topBar = {
               //todo
            },
            bottomBar = {
               //todo
            }
        ) { paddingValues ->
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(top = paddingValues.calculateTopPadding())
            ) {
                content()
            }
        }
    }
}


composable(
    MainNavOption.ThemeScreen.name
) {
  ThemeScreen(viewModel  = settingsViewModel)
}