How to use light mode and dark mode in Android Studio and Kotlin

A step by step guide on setting up and using dark and light mode in Kotlin and Android Studio.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 06/12/2023 at 15:56
Last Updated on 06/12/2023 at 18:22
Four flowers that represent Kotlin, Android, Jetpack Compose and Android Studio side by side. Beneath them sits the text “Light Mode & Dark Mode.”

A step by step guide on setting up and using dark and light mode in Kotlin and Android Studio.

SubscribeDownload Open Source Kotlin Starter Project

Step One: Alter the Theme

A screenshot of Android Studio showing the Theme.kt file. Highlighted is the area where you set the colors for the light mode and dark mode.

In the Theme.kt file, change the colors associated with Light and Dark mode.

How to create a Styleguide in Android Studio and KotlinStyleguide: What it is & How to create one

Step Two: Update Color Scheme Code

A screenshot of Android Studio showing the Theme.kt file. Highlighted is the updated theme code.

In the Theme.kt file, change the color scheme code to match the one below.

Step Three: Use the Colors

A screenshot of Android Studio showing the MainActivity.kt file. Highlighted are two uses of the MaterialTheme. Sample code on how to use them is found below.

To apply the colors use code similar to MaterialTheme.colorScheme.background or MaterialTheme.colorScheme.primary.

Step Four: Test

Two screenshots from an Android side by side. One in light mode the other in dark mode, confirming that the changes went through.

Run the app on a device to confirm the theme works.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe