Skip to content

Commit 25728d0

Browse files
demolafdemolaf
committed
feat: update theming API to support null theme inheritance and introduce adaptive theme
1 parent 09b7395 commit 25728d0

9 files changed

Lines changed: 590 additions & 25 deletions

File tree

‎app/src/main/java/com/firebaseui/android/demo/HighLevelApiDemoActivity.kt‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import android.util.Log
55
import androidx.activity.ComponentActivity
66
import androidx.activity.compose.setContent
77
import androidx.activity.enableEdgeToEdge
8+
import androidx.compose.animation.slideInHorizontally
9+
import androidx.compose.animation.slideOutHorizontally
810
import androidx.compose.foundation.layout.Arrangement
911
import androidx.compose.foundation.layout.Column
1012
import androidx.compose.foundation.layout.Spacer
@@ -14,19 +16,18 @@ import androidx.compose.material3.Button
1416
import androidx.compose.material3.CircularProgressIndicator
1517
import androidx.compose.material3.MaterialTheme
1618
import androidx.compose.material3.ShapeDefaults
17-
import androidx.compose.material3.Shapes
1819
import androidx.compose.material3.Surface
1920
import androidx.compose.material3.Text
2021
import androidx.compose.runtime.Composable
2122
import androidx.compose.ui.Alignment
2223
import androidx.compose.ui.Modifier
2324
import androidx.compose.ui.graphics.Color
24-
import androidx.compose.ui.graphics.Shape
2525
import androidx.compose.ui.text.style.TextAlign
2626
import androidx.compose.ui.unit.dp
2727
import com.firebase.ui.auth.AuthException
2828
import com.firebase.ui.auth.AuthState
2929
import com.firebase.ui.auth.FirebaseAuthUI
30+
import com.firebase.ui.auth.configuration.AuthUITransitions
3031
import com.firebase.ui.auth.configuration.PasswordRule
3132
import com.firebase.ui.auth.configuration.authUIConfiguration
3233
import com.firebase.ui.auth.configuration.auth_provider.AuthProvider
@@ -56,6 +57,12 @@ class HighLevelApiDemoActivity : ComponentActivity() {
5657
tosUrl = "https://policies.google.com/terms"
5758
privacyPolicyUrl = "https://policies.google.com/privacy"
5859
isAnonymousUpgradeEnabled = false
60+
transitions = AuthUITransitions(
61+
enterTransition = { slideInHorizontally { it } },
62+
exitTransition = { slideOutHorizontally { -it } },
63+
popEnterTransition = { slideInHorizontally { -it } },
64+
popExitTransition = { slideOutHorizontally { it } }
65+
)
5966
providers {
6067
provider(AuthProvider.Anonymous)
6168
provider(

‎auth/README.md‎

Lines changed: 122 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ Equivalent FirebaseUI libraries are available for [iOS](https://github.com/fireb
5454
- [Custom UI with Slots](#custom-ui-with-slots)
5555
8. [Theming & Customization](#theming--customization)
5656
- [Using Default Themes](#using-default-themes)
57+
- [Using Adaptive Theme](#using-adaptive-theme-recommended)
5758
- [Customizing Default Theme](#customizing-default-theme)
59+
- [Theme Behavior & Patterns](#theme-behavior--patterns)
5860
- [Inheriting from Material Theme](#inheriting-from-material-theme)
5961
- [Creating a Completely Custom Theme](#creating-a-completely-custom-theme)
6062
- [Provider Button Styling](#provider-button-styling)
@@ -984,7 +986,7 @@ fun ManualMfaChallenge(resolver: MultiFactorResolver) {
984986

985987
FirebaseUI Auth provides flexible theming options to match your app's design:
986988

987-
- **`AuthUITheme.Default`** / **`AuthUITheme.DefaultDark`** - Pre-configured Material Design 3 themes
989+
- **`AuthUITheme.Default`** / **`AuthUITheme.DefaultDark`** / **`AuthUITheme.Adaptive`** - Pre-configured Material Design 3 themes
988990
- **`.copy()`** - Customize specific properties of the default themes (data class)
989991
- **`fromMaterialTheme()`** - Inherit from your app's existing Material Theme
990992
- **Custom theme** - Full control over colors, typography, shapes, and provider button styles
@@ -996,25 +998,139 @@ FirebaseUI provides pre-configured themes for light and dark modes:
996998
```kotlin
997999
val configuration = authUIConfiguration {
9981000
providers = listOf(AuthProvider.Email(), AuthProvider.Google())
999-
theme = AuthUITheme.Default // or AuthUITheme.DefaultDark
1001+
theme = AuthUITheme.Default // Light theme
1002+
// or
1003+
theme = AuthUITheme.DefaultDark // Dark theme
10001004
}
10011005
```
10021006

1007+
### Using Adaptive Theme (Recommended)
1008+
1009+
`AuthUITheme.Adaptive` automatically switches between light and dark themes based on the system setting:
1010+
1011+
```kotlin
1012+
val configuration = authUIConfiguration {
1013+
providers = listOf(AuthProvider.Email(), AuthProvider.Google())
1014+
theme = AuthUITheme.Adaptive // Adapts to system dark mode
1015+
}
1016+
```
1017+
1018+
This is the recommended approach for most apps as it provides a seamless experience that respects the user's system preferences.
1019+
1020+
**Note:** `Adaptive` is a `@Composable` property that evaluates to `Default` (light) or `DefaultDark` (dark) based on `isSystemInDarkTheme()` at composition time.
1021+
10031022
### Customizing Default Theme
10041023

10051024
Use `.copy()` to customize specific properties of the default theme:
10061025

10071026
```kotlin
1008-
val customTheme = AuthUITheme.Default.copy(
1009-
providerButtonShape = MaterialTheme.shapes.extraLarge // Pill-shaped buttons
1027+
@Composable
1028+
fun AuthScreen() {
1029+
val customTheme = AuthUITheme.Adaptive.copy(
1030+
providerButtonShape = MaterialTheme.shapes.extraLarge // Pill-shaped buttons
1031+
)
1032+
1033+
val configuration = authUIConfiguration {
1034+
context = applicationContext
1035+
providers = listOf(AuthProvider.Google(), AuthProvider.Email())
1036+
theme = customTheme
1037+
}
1038+
1039+
FirebaseAuthScreen(
1040+
configuration = configuration,
1041+
onSignInSuccess = { /* ... */ },
1042+
onSignInFailure = { /* ... */ },
1043+
onSignInCancelled = { /* ... */ }
1044+
)
1045+
}
1046+
```
1047+
1048+
### Theme Behavior & Patterns
1049+
1050+
FirebaseUI Auth supports two theming patterns with clear precedence rules:
1051+
1052+
#### Pattern 1: Theme in Configuration Only (Recommended)
1053+
1054+
The simplest approach is to set the theme only in `authUIConfiguration`:
1055+
1056+
```kotlin
1057+
val configuration = authUIConfiguration {
1058+
context = applicationContext
1059+
providers = listOf(AuthProvider.Email())
1060+
theme = AuthUITheme.Adaptive // Set theme here
1061+
}
1062+
1063+
FirebaseAuthScreen(
1064+
configuration = configuration,
1065+
onSignInSuccess = { /* ... */ }
10101066
)
1067+
```
1068+
1069+
**When to use:** This is the recommended pattern for most use cases. It's simple and explicit.
1070+
1071+
#### Pattern 2: Theme in Wrapper (Optional)
10111072

1073+
You can also wrap `FirebaseAuthScreen` with `AuthUITheme`:
1074+
1075+
```kotlin
10121076
val configuration = authUIConfiguration {
1013-
providers = listOf(AuthProvider.Google(), AuthProvider.Email())
1014-
theme = customTheme
1077+
context = applicationContext
1078+
providers = listOf(AuthProvider.Email())
1079+
theme = AuthUITheme.Adaptive // Theme in configuration
1080+
}
1081+
1082+
AuthUITheme(theme = AuthUITheme.Adaptive) { // Optional wrapper
1083+
Surface(color = MaterialTheme.colorScheme.background) {
1084+
FirebaseAuthScreen(
1085+
configuration = configuration,
1086+
onSignInSuccess = { /* ... */ }
1087+
)
1088+
}
10151089
}
10161090
```
10171091

1092+
**When to use:** Use this pattern when you have UI elements **outside** of `FirebaseAuthScreen` that need to share the same theme.
1093+
1094+
#### Theme Precedence Rules
1095+
1096+
Understanding which theme applies is important:
1097+
1098+
1. **Configuration theme takes precedence:**
1099+
```kotlin
1100+
val configuration = authUIConfiguration {
1101+
theme = AuthUITheme.Default // LIGHT theme
1102+
}
1103+
1104+
AuthUITheme(theme = AuthUITheme.DefaultDark) { // DARK wrapper
1105+
FirebaseAuthScreen(configuration, ...)
1106+
}
1107+
// Result: FirebaseAuthScreen uses LIGHT theme (from configuration)
1108+
```
1109+
1110+
2. **Wrapper as fallback:**
1111+
```kotlin
1112+
val configuration = authUIConfiguration {
1113+
// theme not specified (null)
1114+
}
1115+
1116+
AuthUITheme(theme = AuthUITheme.DefaultDark) { // DARK wrapper
1117+
FirebaseAuthScreen(configuration, ...)
1118+
}
1119+
// Result: FirebaseAuthScreen inherits DARK theme from wrapper
1120+
```
1121+
1122+
3. **Ultimate fallback:**
1123+
```kotlin
1124+
val configuration = authUIConfiguration {
1125+
// theme not specified (null)
1126+
}
1127+
1128+
FirebaseAuthScreen(configuration, ...) // No wrapper
1129+
// Result: Uses AuthUITheme.Default (light theme)
1130+
```
1131+
1132+
**Best Practice:** For clarity and consistency, always set `theme` in `authUIConfiguration`. Use the wrapper only if you have additional UI outside `FirebaseAuthScreen`.
1133+
10181134
### Inheriting from Material Theme
10191135

10201136
Use `fromMaterialTheme()` to automatically inherit your app's Material Design theme:

‎auth/build.gradle.kts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ dependencies {
104104
implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0")
105105
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
106106
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3")
107-
implementation("androidx.navigation:navigation-compose:2.8.3")
107+
api("androidx.navigation:navigation-compose:2.8.3")
108108
implementation("com.google.zxing:core:3.5.3")
109109
annotationProcessor(Config.Libs.Androidx.lifecycleCompiler)
110110

‎auth/src/main/java/com/firebase/ui/auth/FirebaseAuthActivity.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ class FirebaseAuthActivity : ComponentActivity() {
130130

131131
// Set up Compose UI
132132
setContent {
133-
AuthUITheme(theme = configuration.theme) {
133+
AuthUITheme {
134134
FirebaseAuthScreen(
135135
authUI = authUI,
136136
configuration = configuration,

‎auth/src/main/java/com/firebase/ui/auth/configuration/AuthUIConfiguration.kt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ annotation class AuthUIConfigurationDsl
3636
class AuthUIConfigurationBuilder {
3737
var context: Context? = null
3838
private val providers = mutableListOf<AuthProvider>()
39-
var theme: AuthUITheme = AuthUITheme.Default
39+
var theme: AuthUITheme? = null
4040
var locale: Locale? = null
4141
var stringProvider: AuthUIStringProvider? = null
4242
var isCredentialManagerEnabled: Boolean = true
@@ -134,9 +134,10 @@ class AuthUIConfiguration(
134134
val providers: List<AuthProvider> = emptyList(),
135135

136136
/**
137-
* The theming configuration for the UI. Default to [AuthUITheme.Default].
137+
* The theming configuration for the UI. If null, inherits from the outer AuthUITheme wrapper
138+
* or defaults to [AuthUITheme.Default] if no wrapper is present.
138139
*/
139-
val theme: AuthUITheme = AuthUITheme.Default,
140+
val theme: AuthUITheme? = null,
140141

141142
/**
142143
* The locale for internationalization.

‎auth/src/main/java/com/firebase/ui/auth/configuration/theme/AuthUITheme.kt‎

Lines changed: 58 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ val LocalAuthUITheme = staticCompositionLocalOf { AuthUITheme.Default }
4040
/**
4141
* Theming configuration for the entire Auth UI.
4242
*/
43-
data class AuthUITheme(
43+
class AuthUITheme(
4444
/**
4545
* The color scheme to use.
4646
*/
@@ -83,6 +83,59 @@ data class AuthUITheme(
8383
val providerButtonShape: Shape? = null,
8484
) {
8585

86+
/**
87+
* Creates a copy of this AuthUITheme, optionally overriding specific properties.
88+
*
89+
* @param colorScheme The color scheme to use. Defaults to this theme's color scheme.
90+
* @param typography The typography to use. Defaults to this theme's typography.
91+
* @param shapes The shapes to use. Defaults to this theme's shapes.
92+
* @param providerStyles Custom styling for individual providers. Defaults to this theme's provider styles.
93+
* @param providerButtonShape Default shape for provider buttons. Defaults to this theme's provider button shape.
94+
* @return A new AuthUITheme instance with the specified properties.
95+
*/
96+
fun copy(
97+
colorScheme: ColorScheme = this.colorScheme,
98+
typography: Typography = this.typography,
99+
shapes: Shapes = this.shapes,
100+
providerStyles: Map<String, ProviderStyle> = this.providerStyles,
101+
providerButtonShape: Shape? = this.providerButtonShape,
102+
): AuthUITheme {
103+
return AuthUITheme(
104+
colorScheme = colorScheme,
105+
typography = typography,
106+
shapes = shapes,
107+
providerStyles = providerStyles,
108+
providerButtonShape = providerButtonShape
109+
)
110+
}
111+
112+
override fun equals(other: Any?): Boolean {
113+
if (this === other) return true
114+
if (other !is AuthUITheme) return false
115+
116+
if (colorScheme != other.colorScheme) return false
117+
if (typography != other.typography) return false
118+
if (shapes != other.shapes) return false
119+
if (providerStyles != other.providerStyles) return false
120+
if (providerButtonShape != other.providerButtonShape) return false
121+
122+
return true
123+
}
124+
125+
override fun hashCode(): Int {
126+
var result = colorScheme.hashCode()
127+
result = 31 * result + typography.hashCode()
128+
result = 31 * result + shapes.hashCode()
129+
result = 31 * result + providerStyles.hashCode()
130+
result = 31 * result + (providerButtonShape?.hashCode() ?: 0)
131+
return result
132+
}
133+
134+
override fun toString(): String {
135+
return "AuthUITheme(colorScheme=$colorScheme, typography=$typography, shapes=$shapes, " +
136+
"providerStyles=$providerStyles, providerButtonShape=$providerButtonShape)"
137+
}
138+
86139
/**
87140
* A class nested within AuthUITheme that defines the visual appearance of a specific
88141
* provider button, allowing for per-provider branding and customization.
@@ -152,6 +205,9 @@ data class AuthUITheme(
152205
providerStyles = ProviderStyleDefaults.default
153206
)
154207

208+
val Adaptive: AuthUITheme
209+
@Composable get() = if (isSystemInDarkTheme()) DefaultDark else Default
210+
155211
/**
156212
* Creates a theme inheriting the app's current Material Theme settings.
157213
*
@@ -185,8 +241,7 @@ data class AuthUITheme(
185241

186242
@Composable
187243
fun AuthUITheme(
188-
theme: AuthUITheme = if (isSystemInDarkTheme())
189-
AuthUITheme.DefaultDark else AuthUITheme.Default,
244+
theme: AuthUITheme = AuthUITheme.Adaptive,
190245
content: @Composable () -> Unit,
191246
) {
192247
CompositionLocalProvider(

‎auth/src/main/java/com/firebase/ui/auth/ui/screens/FirebaseAuthScreen.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ fun FirebaseAuthScreen(
222222
CompositionLocalProvider(
223223
LocalAuthUIStringProvider provides configuration.stringProvider,
224224
LocalTopLevelDialogController provides dialogController,
225-
LocalAuthUITheme provides configuration.theme
225+
LocalAuthUITheme provides (configuration.theme ?: LocalAuthUITheme.current)
226226
) {
227227
Surface(
228228
modifier = Modifier

‎auth/src/test/java/com/firebase/ui/auth/configuration/AuthUIConfigurationTest.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ class AuthUIConfigurationTest {
7575

7676
assertThat(config.context).isEqualTo(applicationContext)
7777
assertThat(config.providers).hasSize(1)
78-
assertThat(config.theme).isEqualTo(AuthUITheme.Default)
78+
assertThat(config.theme).isNull()
7979
assertThat(config.stringProvider).isInstanceOf(DefaultAuthUIStringProvider::class.java)
8080
assertThat(config.locale).isNull()
8181
assertThat(config.isCredentialManagerEnabled).isTrue()

0 commit comments

Comments
 (0)