Theming in Jetpack Compose: Creating a Doctor App UI with Light & Dark Mode

In this article, we will explore how to implement theming in Jetpack Compose while developing a Doctor app UI. The focus will be on creating a responsive design that supports both light and dark modes. This guide is based on practical coding examples, allowing you to adapt these techniques to your own projects. Introduction to Theming in Jetpack Compose Theming in Jetpack Compose allows developers to create visually appealing applications that adapt to user preferences, such as light or dark mode. Using Jetpack Compose's theming capabilities, you can define colors, typography, and shapes that ensure a consistent user interface throughout your application. Setting Up the Project To begin with, ensure that you have a Jetpack Compose project set up in Android Studio. If you are new to Jetpack Compose, you can easily create a new project by selecting the "Empty Compose Activity" template. Once your project is set up, you can start implementing theming. Defining Color Schemes In Jetpack Compose, color schemes play a crucial role in theming. You can define light and dark color palettes within your project. Below is an example of how to set up your color resources: kotlin import androidx.compose.ui.graphics.Color val LightColorPalette = lightColors( primary = Color(0xFF6200EE), primaryVariant = Color(0xFF3700B3), secondary = Color(0xFF03DAC6) ) val DarkColorPalette = darkColors( primary = Color(0xFFBB86FC), primaryVariant = Color(0xFF3700B3), secondary = Color(0xFF03DAC6) ) In this code snippet, lightColors and darkColors functions are used to create two distinct palettes. You can customize the colors as per your design requirements. Creating a Custom Theme Next, you can create a custom theme that allows you to switch between light and dark modes dynamically. Here's an example of how to set up a custom theme in your application: kotlin import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.tooling.preview.Preview @Composable fun MyApp(content: @Composable () - Unit) { val colors = if (isSystemInDarkTheme()) { DarkColorPalette } else { LightColorPalette } MaterialTheme(colors = colors) { Surface { content() } } } In this code, the isSystemInDarkTheme() function checks the current system theme, allowing you to apply the appropriate color palette. Implementing Light and Dark Modes To enable light and dark modes, ensure that your app handles theme changes correctly. Jetpack Compose automatically detects system theme changes, so your app will respond appropriately without additional configuration. You can test this feature by toggling the device theme in the settings. Building the Doctor App UI With theming set up, it’s time to build the Doctor app UI. The following is a simple example of a card layout that displays doctor information: kotlin @Composable fun DoctorCard(name: String, specialty: String) { Card( modifier = Modifier.padding(8.dp), elevation = 4.dp ) { Column(modifier = Modifier.padding(16.dp)) { Text(text = name, style = MaterialTheme.typography.h6) Text(text = specialty, style = MaterialTheme.typography.body2) } } } This DoctorCard composable function creates a card with the doctor's name and specialty. The typography styles automatically adapt to the defined theme. Previewing Your Theme It’s essential to preview how your theme looks in both light and dark modes. Jetpack Compose provides a straightforward way to create previews. Here’s how you can do it: kotlin @Preview(showBackground = true, name = "Light Theme") @Composable fun PreviewDoctorCardLight() { MyApp { DoctorCard(name = "Dr. John Doe", specialty = "Cardiology") } } @Preview(showBackground = true, name = "Dark Theme") @Composable fun PreviewDoctorCardDark() { MyApp { DoctorCard(name = "Dr. John Doe", specialty = "Cardiology") } } In these preview functions, you can see how the DoctorCard looks in both themes, ensuring your design is visually appealing in all scenarios. Conclusion Theming in Jetpack Compose allows developers to create a responsive and user-friendly interface that adapts to user preferences. By defining color schemes, creating a custom theme, and implementing UI components like cards, you can build a Doctor app that looks great in both light and dark modes. For a hands-on visual guide, you can watch the full tutorial on YouTube: Watch the full tutorial on YouTube(https://www.youtube.com/watch?v=1RsSYRSCkbE). By following these steps, you will enhance your understanding of theming in Jetpack Compose, paving the way for building beautiful applications.