feat: add light theme

Author: thunderbiscuit

app/src/main/java/org/bitcoindevkit/devkitwallet/domain/UserPreferencesRepository.kt

@@ -33,6 +33,16 @@ class UserPreferencesRepository(
         }
     }
 
+    suspend fun fetchDarkTheme(): Boolean {
+        return userPreferencesStore.data.first().darkTheme
+    }
+
+    suspend fun setDarkTheme(isDark: Boolean) {
+        userPreferencesStore.updateData { currentPreferences ->
+            currentPreferences.toBuilder().setDarkTheme(isDark).build()
+        }
+    }
+
     suspend fun setFullScanCompleted(walletId: String) {
         userPreferencesStore.updateData { currentPreferences ->
             val updatedWalletsList =

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/DevkitWalletActivity.kt

@@ -6,13 +6,15 @@
 package org.bitcoindevkit.devkitwallet.presentation
 
 import android.content.Context
+import android.graphics.drawable.ColorDrawable
 import android.os.Bundle
 import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
+import androidx.core.graphics.drawable.toDrawable
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.datastore.core.DataStore
 import androidx.datastore.dataStore
@@ -30,6 +32,7 @@ import org.bitcoindevkit.devkitwallet.domain.UserPreferencesRepository
 import org.bitcoindevkit.devkitwallet.domain.Wallet
 import org.bitcoindevkit.devkitwallet.presentation.navigation.AppNavigation
 import org.bitcoindevkit.devkitwallet.presentation.theme.DevkitTheme
+import org.bitcoindevkit.devkitwallet.presentation.theme.themeSurfaceColor
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.intro.OnboardingScreen
 
 private const val TAG = "DevkitWalletActivity"
@@ -52,6 +55,7 @@ class DevkitWalletActivity : ComponentActivity() {
         var activeWallet: Wallet? by mutableStateOf(null)
         var activeWallets: List<SingleWallet> by mutableStateOf(emptyList())
         var onboardingDone: Boolean by mutableStateOf(false)
+        var useDarkTheme: Boolean by mutableStateOf(true)
         var preferencesLoaded: Boolean by mutableStateOf(false)
 
         val onBuildWalletButtonClicked: (WalletCreateType) -> Unit = { walletCreateType ->
@@ -87,6 +91,15 @@ class DevkitWalletActivity : ComponentActivity() {
             }
         }
 
+        val onToggleTheme: () -> Unit = {
+            useDarkTheme = !useDarkTheme
+            // Keep the window background in sync with the Compose theme. Navigation transitions
+            // include a fade-out, which causes the window background to show through briefly.
+            // Updating it here (synchronously, before Compose recomposes) prevents a color flash.
+            window.setBackgroundDrawable(themeSurfaceColor(useDarkTheme).toDrawable())
+            lifecycleScope.launch { userPreferencesRepository.setDarkTheme(useDarkTheme) }
+        }
+
         lifecycleScope.launch {
             activeWallets =
                 async {
@@ -98,6 +111,14 @@ class DevkitWalletActivity : ComponentActivity() {
                     userPreferencesRepository.fetchIntroDone()
                 }.await()
 
+            useDarkTheme =
+                async {
+                    userPreferencesRepository.fetchDarkTheme()
+                }.await()
+
+            // Set the window background before allowing the UI to render for the first time,
+            // so the correct surface color is already in place when Compose draws its first frame.
+            window.setBackgroundDrawable(ColorDrawable(themeSurfaceColor(useDarkTheme)))
             preferencesLoaded = true
         }
 
@@ -113,11 +134,13 @@ class DevkitWalletActivity : ComponentActivity() {
                 DwLogger.log(INFO, "First time opening the app, triggering onboarding screen")
                 OnboardingScreen(onFinishOnboarding)
             } else {
-                DevkitTheme {
+                DevkitTheme(darkTheme = useDarkTheme) {
                     AppNavigation(
                         activeWallet = activeWallet,
                         activeWallets = activeWallets,
                         onBuildWalletButtonClicked = onBuildWalletButtonClicked,
+                        useDarkTheme = useDarkTheme,
+                        onToggleTheme = onToggleTheme,
                     )
                 }
             }

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/navigation/AppNavigation.kt

@@ -33,6 +33,7 @@ import org.bitcoindevkit.devkitwallet.presentation.ui.screens.settings.Blockchai
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.settings.LogsScreen
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.settings.RecoveryDataScreen
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.settings.SettingsScreen
+import org.bitcoindevkit.devkitwallet.presentation.ui.screens.settings.ThemeScreen
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.wallet.RBFScreen
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.wallet.ReceiveScreen
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.wallet.SendScreen
@@ -94,6 +95,8 @@ fun AppNavigation(
     activeWallet: Wallet?,
     activeWallets: List<SingleWallet>,
     onBuildWalletButtonClicked: (WalletCreateType) -> Unit,
+    useDarkTheme: Boolean,
+    onToggleTheme: () -> Unit,
 ) {
     val navController: NavHostController = rememberNavController()
 
@@ -187,5 +190,13 @@ fun AppNavigation(
         }
 
         composable<LogsScreen> { LogsScreen(navController = navController) }
+
+        composable<ThemeScreen> {
+            ThemeScreen(
+                useDarkTheme = useDarkTheme,
+                onToggleTheme = onToggleTheme,
+                navController = navController,
+            )
+        }
     }
 }

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/navigation/Destinations.kt

@@ -36,6 +36,9 @@ object BlockchainClientScreen
 @Serializable
 object LogsScreen
 
+@Serializable
+object ThemeScreen
+
 // Wallet navigation destinations
 @Serializable
 object HomeScreen

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/theme/DevkitWalletColors.kt

@@ -7,6 +7,10 @@ package org.bitcoindevkit.devkitwallet.presentation.theme
 
 import androidx.compose.ui.graphics.Color
 
-// Accent colors not covered by the MaterialTheme colorScheme
+// NightGlow (dark theme) accent colors
 val NightGlowHistoryAccent: Color = Color(0xFFE3D082)
 val NightGlowSubtle: Color = Color(0xFF79747E)
+
+// DayGlow (light theme) accent colors
+val DayGlowHistoryAccent: Color = Color(0xFF816C2A)
+val DayGlowSubtle: Color = Color(0xFF79747E)

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/theme/Theme.kt

@@ -7,10 +7,11 @@ package org.bitcoindevkit.devkitwallet.presentation.theme
 
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-private val DevkitDarkColorScheme = darkColorScheme(
+private val NightGlowColorScheme = darkColorScheme(
     surface = Color(0xFF1C1B1F),
     onSurface = Color(0xFFE6E1E5),
     surfaceVariant = Color(0xFF49454F),
@@ -27,10 +28,32 @@ private val DevkitDarkColorScheme = darkColorScheme(
     onTertiary = Color(0xFF1C1B1F),
 )
 
+private val DayGlowColorScheme = lightColorScheme(
+    surface = Color(0xFFFFF8F4),
+    onSurface = Color(0xFF1C1B1F),
+    surfaceVariant = Color(0xFFEDE5DF),
+    onSurfaceVariant = Color(0xFF49454F),
+    background = Color(0xFFFFF8F4),
+    onBackground = Color(0xFF1C1B1F),
+    outline = Color(0xFF79747E),
+    outlineVariant = Color(0xFFCAC4D0),
+    primary = Color(0xFF7D5260),
+    onPrimary = Color(0xFFFFFFFF),
+    secondary = Color(0xFF625B71),
+    onSecondary = Color(0xFFFFFFFF),
+    tertiary = Color(0xFF2E6A3C),
+    onTertiary = Color(0xFFFFFFFF),
+)
+
+// Returns the surface color for the given theme as an ARGB int for use outside of Compose (e.g.
+// setting the window background from the Activity). Keeps the values co-located with the color
+// schemes above so there is a single source of truth for each theme's surface color.
+fun themeSurfaceColor(darkTheme: Boolean): Int = if (darkTheme) 0xFF1C1B1F.toInt() else 0xFFFFF8F4.toInt()
+
 @Composable
-fun DevkitTheme(content: @Composable () -> Unit) {
+fun DevkitTheme(darkTheme: Boolean = true, content: @Composable () -> Unit) {
     MaterialTheme(
-        colorScheme = DevkitDarkColorScheme,
+        colorScheme = if (darkTheme) NightGlowColorScheme else DayGlowColorScheme,
         typography = devkitTypography,
         content = content,
     )

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/ui/components/TransactionCards.kt

@@ -28,7 +28,7 @@ import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
 import org.bitcoindevkit.devkitwallet.data.TxDetails
 import org.bitcoindevkit.devkitwallet.domain.utils.timestampToString
-import org.bitcoindevkit.devkitwallet.presentation.theme.NightGlowHistoryAccent
+import org.bitcoindevkit.devkitwallet.presentation.theme.DayGlowHistoryAccent
 import org.bitcoindevkit.devkitwallet.presentation.theme.inter
 import org.bitcoindevkit.devkitwallet.presentation.ui.screens.wallet.viewTransaction
 
@@ -84,7 +84,7 @@ fun PendingTransactionCard(details: TxDetails, navController: NavController) {
                 shape = RoundedCornerShape(16.dp),
             ).border(
                 width = 1.5.dp,
-                color = NightGlowHistoryAccent.copy(alpha = 0.5f),
+                color = DayGlowHistoryAccent.copy(alpha = 0.5f),
                 shape = RoundedCornerShape(16.dp),
             ).clickable {
                 viewTransaction(
@@ -108,7 +108,7 @@ fun PendingTransactionCard(details: TxDetails, navController: NavController) {
                     .padding(top = 16.dp, end = 16.dp)
                     .size(24.dp)
                     .clip(shape = CircleShape)
-                    .background(NightGlowHistoryAccent.copy(alpha = 0.6f))
+                    .background(DayGlowHistoryAccent.copy(alpha = 0.6f))
                     .align(Alignment.Top),
         )
     }

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/ui/screens/intro/CreateNewWallet.kt

@@ -145,8 +145,8 @@ internal fun CreateNewWalletScreen(
                     .height(56.dp),
                 shape = RoundedCornerShape(20.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = colorScheme.primary,
-                    contentColor = colorScheme.onPrimary,
+                    containerColor = colorScheme.tertiary,
+                    contentColor = colorScheme.onTertiary,
                 ),
             ) {
                 Text(
@@ -199,14 +199,14 @@ internal fun ThemedRadioOption(label: String, isSelected: Boolean, onSelect: ()
         modifier = Modifier
             .fillMaxWidth()
             .selectable(selected = isSelected, onClick = onSelect)
-            .padding(horizontal = 16.dp, vertical = 14.dp),
+            .padding(horizontal = 16.dp, vertical = 12.dp),
     ) {
         Box(
             modifier = Modifier
                 .size(22.dp)
                 .border(
                     width = 2.dp,
-                    color = if (isSelected) colorScheme.primary else colorScheme.outlineVariant,
+                    color = if (isSelected) colorScheme.tertiary else colorScheme.outlineVariant,
                     shape = CircleShape,
                 ),
             contentAlignment = Alignment.Center,
@@ -215,7 +215,7 @@ internal fun ThemedRadioOption(label: String, isSelected: Boolean, onSelect: ()
                 Box(
                     modifier = Modifier
                         .size(10.dp)
-                        .background(colorScheme.primary, CircleShape),
+                        .background(colorScheme.tertiary, CircleShape),
                 )
             }
         }

app/src/main/java/org/bitcoindevkit/devkitwallet/presentation/ui/screens/settings/SettingsScreen.kt

@@ -39,7 +39,8 @@ import com.composables.icons.lucide.Palette
 import com.composables.icons.lucide.ScrollText
 import org.bitcoindevkit.devkitwallet.presentation.navigation.AboutScreen
 import org.bitcoindevkit.devkitwallet.presentation.navigation.LogsScreen
-import org.bitcoindevkit.devkitwallet.presentation.theme.NightGlowHistoryAccent
+import org.bitcoindevkit.devkitwallet.presentation.navigation.ThemeScreen
+import org.bitcoindevkit.devkitwallet.presentation.theme.DayGlowHistoryAccent
 import org.bitcoindevkit.devkitwallet.presentation.theme.inter
 import org.bitcoindevkit.devkitwallet.presentation.ui.components.SecondaryScreensAppBar
 
@@ -84,7 +85,7 @@ internal fun SettingsScreen(navController: NavController) {
                 )
                 SettingsItem(
                     icon = Lucide.ScrollText,
-                    iconTint = NightGlowHistoryAccent,
+                    iconTint = DayGlowHistoryAccent,
                     title = "Logs",
                     description = "View application logs",
                     onClick = { navController.navigate(LogsScreen) },
@@ -98,7 +99,7 @@ internal fun SettingsScreen(navController: NavController) {
                     iconTint = colorScheme.tertiary,
                     title = "Theme",
                     description = "Appearance and display",
-                    onClick = { },
+                    onClick = { navController.navigate(ThemeScreen) },
                 )
             }
         }