Themes

In Android development, themes are a powerful way to define the overall look and feel of your application. A theme is a collection of attributes that can be applied to an entire app, an activity, or a view hierarchy – allowing you to maintain a consistent design throughout your application.

Themes are typically defined in XML files located in the res/values directory of your Android project. They can include attributes such as colors, fonts, styles, and dimensions.

The Droid framework includes AppCompat and Material Design 3 themes that you can easily apply to your app or activities.

Applying Themes

You can set a theme for your entire application in the app manifest:

import Droid

@main
public final class App: DroidApp {
    @AppBuilder public override var body: Content {
        Manifest
            .theme(.material3DayNightNoActionBar)
    }
}

You can also set a theme for individual activities by overriding the theme property in your activity class:

final class MainActivity: AppCompatActivity {
    override class var theme: Style? { .material3DayNightNoActionBar }
    /// ...
}

Custom Theme

If you use a custom theme, it is probably named AppTheme, so it can be used via the predefined constant

.theme(.appTheme)

Otherwise, simply use your own style reference as a string, such as:

.theme("@style/MyOwnTheme")

AppCompat

Base AppCompat theme - provides Material Design support back to API 7

.theme(.appCompat)

noActionBar

A version of the AppCompat theme without an action bar

.theme(.appCompatNoActionBar)

dialog

A dialog theme based on AppCompat

.theme(.appCompatDialog)

alert

A dialog alert theme based on AppCompat

.theme(.appCompatDialogAlert)

minWidth

A dialog theme with minimum width based on AppCompat

.theme(.appCompatDialogMinWidth)

whenLarge

A dialog theme optimized for large screens based on AppCompat

.theme(.appCompatDialogWhenLarge)

DayNight

Enables automatic switching between light and dark themes based on system settings

.theme(.appCompatDayNight)

darkActionBar

Similar to appCompatDayNight, but includes a dark action bar for better contrast

.theme(.appCompatDayNightDarkActionBar)

noActionBar

A theme without an action bar that adapts to light and dark modes

.theme(.appCompatDayNightNoActionBar)

Recommended for modern apps to support both light and dark themes!

dialog

A dialog theme that adapts to light and dark modes

.theme(.appCompatDayNightDialog)

alert

A dialog alert theme that adapts to light and dark modes

.theme(.appCompatDayNightDialogAlert)

minWidth

A dialog theme with minimum width that adapts to light and dark modes

.theme(.appCompatDayNightDialogMinWidth)

whenLarge

A dialog theme that adapts to light and dark modes, optimized for large screens

.theme(.appCompatDayNightDialogWhenLarge)

Light

A light version of the AppCompat theme

.theme(.appCompatLight)

darkActionBar

A light theme with a dark action bar for better contrast

.theme(.appCompatLightDarkActionBar)

noActionBar

A light theme without an action bar

.theme(.appCompatLightNoActionBar)

dialog

A light dialog theme based on AppCompat

.theme(.appCompatLightDialog)

alert

A light dialog alert theme based on AppCompat

.theme(.appCompatLightDialogAlert)

minWidth

A light dialog theme with minimum width based on AppCompat

.theme(.appCompatLightDialogMinWidth)

whenLarge

A light dialog theme optimized for large screens based on AppCompat

.theme(.appCompatLightDialogWhenLarge)

Material3

DayNight

Material Design 3 with automatic day/night switching

.theme(.material3DayNight)

noActionBar

DayNight Material 3 without action bar

.theme(.material3DayNightNoActionBar)

bottomSheetDialog

DayNight bottom sheet dialog with Material 3

.theme(.material3DayNightBottomSheetDialog)

sideSheetDialog

DayNight side sheet dialog with Material 3

.theme(.material3DayNightSideSheetDialog)

dialog

Standard DayNight dialog with Material 3 design

.theme(.material3DayNightDialog)

alert

DayNight alert dialog with Material 3

.theme(.material3DayNightDialogAlert)

minWidth

Compact DayNight dialog with Material 3

.theme(.material3DayNightDialogMinWidth)

whenLarge

Large DayNight dialog for big screens with Material 3

.theme(.material3DayNightDialogWhenLarge)

Dark

Pure dark theme using Material Design 3 (Material You)

.theme(.material3Dark)

noActionBar

Dark Material 3 theme without action bar

.theme(.material3DarkNoActionBar)

bottomSheetDialog

Dark bottom sheet dialog with Material 3 styling

.theme(.material3DarkBottomSheetDialog)

sideSheetDialog

Dark side sheet dialog (emerging from side) with Material 3

.theme(.material3DarkSideSheetDialog)

dialog

Standard dark dialog with Material 3 design

.theme(.material3DarkDialog)

alert

Dark alert dialog with Material 3 styling

.theme(.material3DarkDialogAlert)

minWidth

Compact dark dialog with Material 3

.theme(.material3DarkDialogMinWidth)

whenLarge

Large dark dialog for big screens with Material 3

.theme(.material3DarkDialogWhenLarge)

Light

Pure light theme using Material Design 3 (Material You)

.theme(.material3Light)

noActionBar

Light Material 3 theme without action bar

.theme(.material3LightNoActionBar)

bottomSheetDialog

Light bottom sheet dialog with Material 3

.theme(.material3LightBottomSheetDialog)

sideSheetDialog

Light side sheet dialog with Material 3

.theme(.material3LightSideSheetDialog)

dialog

Standard light dialog with Material 3 design

.theme(.material3LightDialog)

alert

Light alert dialog with Material 3 styling

.theme(.material3LightDialogAlert)

minWidth

Compact light dialog with Material 3

.theme(.material3LightDialogMinWidth)

whenLarge

Large light dialog for big screens with Material 3

.theme(.material3LightDialogWhenLarge)

Dynamic - DayNight

DayNight theme with dynamic color theming

.theme(.material3DynamicColorsDayNight)

noActionBar

DayNight dynamic color theme without action bar

.theme(.material3DynamicColorsDayNightNoActionBar)

Dynamic - Dark

Dark theme with dynamic color theming (Material You)

.theme(.material3DynamicColorsDark)

noActionBar

Dark dynamic color theme without action bar

.theme(.material3DynamicColorsDarkNoActionBar)

Dynamic - Light

Light theme with dynamic color theming

.theme(.material3DynamicColorsLight)

noActionBar

Light dynamic color theme without action bar

.theme(.material3DynamicColorsLightNoActionBar)

Material3Expressive

DayNight

Expressive design language with automatic day/night switching

.theme(.material3ExpressiveDayNight)

noActionBar

Expressive DayNight theme without action bar

.theme(.material3ExpressiveDayNightNoActionBar)

dialog

Expressive DayNight dialog with dynamic design elements

whenLarge

Expressive DayNight dialog optimized for large screens

.theme(.material3ExpressiveDayNightDialogWhenLarge)

Dark

Expressive design language - dark variant with more dynamic shapes and motion

.theme(.material3ExpressiveDark)

noActionBar

Expressive dark theme without action bar

.theme(.material3ExpressiveDarkNoActionBar)

dialog

Expressive dark dialog with dynamic design elements

.theme(.material3ExpressiveDarkDialog)

alert

Expressive dark alert dialog

.theme(.material3ExpressiveDarkDialogAlert)

minWidth

Expressive dark dialog with minimum width

.theme(.material3ExpressiveDarkDialogMinWidth)

whenLarge

Expressive dark dialog optimized for large screens

.theme(.material3ExpressiveDarkDialogWhenLarge)

Light

Expressive design language - light variant

.theme(.material3ExpressiveLight)

noActionBar

Expressive light theme without action bar

.theme(.material3ExpressiveLightNoActionBar)

dialog

Expressive light dialog with dynamic design elements

.theme(.material3ExpressiveLightDialog)

alert

Expressive light alert dialog

.theme(.material3ExpressiveLightDialogAlert)

minWidth

Expressive light dialog with minimum width

.theme(.material3ExpressiveLightDialogMinWidth)

whenLarge

Expressive light dialog optimized for large screens

.theme(.material3ExpressiveLightDialogWhenLarge)

Dynamic - DayNight

Expressive DayNight theme with dynamic color adaptation

.theme(.material3ExpressiveDynamicColorsDayNight)

noActionBar

Expressive DayNight dynamic color theme without action bar

.theme(.material3ExpressiveDynamicColorsDayNightNoActionBar)

Dynamic - Dark

Expressive dark theme with dynamic color adaptation

.theme(.material3ExpressiveDynamicColorsDark)

noActionBar

Expressive dark dynamic color theme without action bar

.theme(.material3ExpressiveDynamicColorsDarkNoActionBar)

Dynamic - Light

Expressive light theme with dynamic color adaptation

.theme(.material3ExpressiveDynamicColorsLight)

noActionBar

Expressive light dynamic color theme without action bar

.theme(.material3ExpressiveDynamicColorsLightNoActionBar)