Update with dark / light mode

alorma · Jan 5, 2025 · e942871 · e942871
1 parent 882903a
commit e942871
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 6 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -52,6 +52,9 @@ kotlin {
       implementation(projects.uiTiles)
       implementation(projects.uiTilesExtended)
 
+      implementation(projects.storageMemory)
+      implementation(projects.storageDisk)
+
       implementation(libs.kotlinx.immutable)
     }
 

diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt
@@ -1,3 +1,4 @@
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -22,6 +23,7 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.alorma.compose.settings.storage.disk.rememberBooleanSettingState
 import kotlinx.coroutines.launch
 import theme.ComposeSettingsTheme
 
@@ -34,14 +36,24 @@ fun App(
 ) {
   val windowSizeClass = calculateWindowSizeClass()
 
-  ComposeSettingsTheme {
+  val darkModeState = rememberBooleanSettingState(
+    key = "darkMode",
+    defaultValue = isSystemInDarkTheme(),
+  )
+
+  ComposeSettingsTheme(
+    darkModeState = darkModeState,
+  ) {
     Scaffold(
       modifier = Modifier.fillMaxSize().then(modifier),
       topBar = { SampleTopBar() },
     ) {
       when (windowSizeClass.widthSizeClass) {
         WindowWidthSizeClass.Compact, WindowWidthSizeClass.Medium -> {
-          SettingsScreen(modifier = Modifier.padding(it))
+          SettingsScreen(
+            modifier = Modifier.padding(it),
+            darkModeState = darkModeState,
+          )
         }
 
         else -> {
@@ -52,7 +64,7 @@ fun App(
             modifier = Modifier.padding(it),
             drawerState = drawerState,
             drawerContent = {
-              DismissibleDrawerSheet { SettingsScreen() }
+              DismissibleDrawerSheet { SettingsScreen(darkModeState = darkModeState) }
             },
             content = {
               Surface {

diff --git a/composeApp/src/commonMain/kotlin/SettingsScreen.kt b/composeApp/src/commonMain/kotlin/SettingsScreen.kt
@@ -19,6 +19,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.alorma.compose.settings.storage.disk.BooleanSettingValueState
 import com.alorma.compose.settings.ui.SettingsCheckbox
 import com.alorma.compose.settings.ui.SettingsMenuLink
 import com.alorma.compose.settings.ui.SettingsRadioButton
@@ -34,7 +35,10 @@ import internal.iconSampleOrNull
 import kotlinx.collections.immutable.toImmutableList
 
 @Composable
-fun SettingsScreen(modifier: Modifier = Modifier) {
+fun SettingsScreen(
+  modifier: Modifier = Modifier,
+  darkModeState: BooleanSettingValueState,
+) {
   Scaffold(
     modifier = modifier,
   ) { padding ->
@@ -51,6 +55,22 @@ fun SettingsScreen(modifier: Modifier = Modifier) {
         title = { Text(text = "Show icon") },
         onCheckedChange = { iconState.value = it },
       )
+
+      val darkModes = listOf(true, false)
+
+      SettingsSegmented(
+        title = { Text("Theme mode") },
+        items = darkModes,
+        selectedItem = darkModeState.value,
+        onItemSelected = { darkMode -> darkModeState.value = darkMode },
+        itemTitleMap = { item ->
+          when (item) {
+            true -> "Dark"
+            false -> "Light"
+          }
+        },
+      )
+
       SettingsSwitchSampleSection(iconState.value)
       SettingsCheckboxSampleSection(iconState.value)
       SettingsTriStateCheckboxSampleSection(iconState.value)

diff --git a/composeApp/src/commonMain/kotlin/theme/Theme.kt b/composeApp/src/commonMain/kotlin/theme/Theme.kt
@@ -5,6 +5,9 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import com.alorma.compose.settings.storage.base.SettingValueState
+import com.alorma.compose.settings.storage.disk.rememberBooleanSettingState
+import com.alorma.compose.settings.storage.memory.rememberMemoryBooleanSettingState
 
 val DarkColorScheme = darkColorScheme(
   primary = Purple40,
@@ -20,12 +23,12 @@ val LightColorScheme = lightColorScheme(
 
 @Composable
 fun ComposeSettingsTheme(
-  isSystemDark: Boolean = isSystemInDarkTheme(),
+  darkModeState: SettingValueState<Boolean> = rememberMemoryBooleanSettingState(),
   content: @Composable () -> Unit
 ) {
 
   MaterialTheme(
-    colorScheme = if (isSystemDark) {
+    colorScheme = if (darkModeState.value) {
       DarkColorScheme
     } else {
       LightColorScheme