feat: Integrate reactive Dark Mode detection for all desktop OS and adaptive top bar on Windows

kdroidFilter · kdroidFilter · commit 3cc1482171bb · 2025-03-10T20:19:00.000+02:00
- Replace the use of isSystemInDarkTheme with isSystemInDarkMode to handle real-time theme changes across all desktop operating systems. - Add Windows top bar configuration using setWindowsAdaptiveTitleBar(). - Currently, the top bar only follows the system theme and does not sync with the user's explicit preferences. more information at https://github.com/kdroidFilter/Platform-Tools?tab=readme-ov-file#-dark-mode-detection-module
diff --git a/application/composeApp/build.gradle.kts b/application/composeApp/build.gradle.kts
@@ -62,6 +62,8 @@ kotlin {
                 implementation(libs.room.runtime)
 
                 implementation(libs.compose.navigation)
+                implementation(libs.platformtools.darkmodedetector)
+
             }
         }
 
diff --git a/application/composeApp/src/jvmMain/kotlin/io/writeopia/desktop/MainDesktop.kt b/application/composeApp/src/jvmMain/kotlin/io/writeopia/desktop/MainDesktop.kt
@@ -6,6 +6,7 @@ import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -18,8 +19,11 @@ import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.rememberWindowState
+import io.github.kdroidfilter.platformtools.darkmodedetector.isSystemInDarkMode
+import io.github.kdroidfilter.platformtools.darkmodedetector.windows.setWindowsAdaptiveTitleBar
 import io.writeopia.common.utils.keyboard.KeyboardCommands
 import io.writeopia.common.utils.ui.GlobalToastBox
+import io.writeopia.model.isDarkTheme
 import io.writeopia.notemenu.di.UiConfigurationInjector
 import io.writeopia.notes.desktop.components.DesktopApp
 import io.writeopia.resources.CommonImages
@@ -152,7 +156,6 @@ private fun ApplicationScope.App(onCloseRequest: () -> Unit = ::exitApplication)
             windowState.placement = WindowPlacement.Floating
         }
     }
-
     Window(
         onCloseRequest = onCloseRequest,
         title = "",
@@ -162,6 +165,11 @@ private fun ApplicationScope.App(onCloseRequest: () -> Unit = ::exitApplication)
         },
         icon = CommonImages.logo()
     ) {
+        //Synchronize the topbar on Windows OS with the System Theme
+        window.setWindowsAdaptiveTitleBar(
+            dark = isSystemInDarkMode() //TODO Syncrhonize with the selected Theme by the user
+        )
+
         Box(Modifier.fillMaxSize()) {
             LaunchedEffect(window.rootPane) {
                 with(window.rootPane) {
diff --git a/application/core/theme/build.gradle.kts b/application/core/theme/build.gradle.kts
@@ -37,6 +37,7 @@ kotlin {
 
                 implementation(compose.material3)
                 implementation(libs.lifecycle.viewmodel.compose)
+                implementation(libs.platformtools.darkmodedetector)
             }
         }
 
diff --git a/application/core/theme/src/commonMain/kotlin/io/writeopia/model/ColorThemeOption.kt b/application/core/theme/src/commonMain/kotlin/io/writeopia/model/ColorThemeOption.kt
@@ -1,7 +1,7 @@
 package io.writeopia.model
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.runtime.Composable
+import io.github.kdroidfilter.platformtools.darkmodedetector.isSystemInDarkMode
 
 enum class ColorThemeOption(val theme: String) {
     LIGHT("light"),
@@ -20,6 +20,6 @@ fun ColorThemeOption?.isDarkTheme(): Boolean =
     when (this) {
         ColorThemeOption.LIGHT -> false
         ColorThemeOption.DARK -> true
-        ColorThemeOption.SYSTEM -> isSystemInDarkTheme()
-        else -> isSystemInDarkTheme()
+        ColorThemeOption.SYSTEM -> isSystemInDarkMode()
+        else -> isSystemInDarkMode()
     }
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -16,6 +16,7 @@ ktlint = "12.1.2"
 ktx = "1.15.0"
 appCompat = "1.7.0"
 material = "1.12.0"
+platformtoolsDarkmodedetector = "0.2.7"
 postgresSocketFactory = "1.15.1"
 room = "2.7.0-beta01"
 compose = "2.8.7"
@@ -85,6 +86,7 @@ ktor-server-websocket = { module = "io.ktor:ktor-server-websockets-jvm" }
 ktor-server-netty = { module = "io.ktor:ktor-server-netty-jvm" }
 ktor-server-tests = { module = "io.ktor:ktor-server-test-host", version.ref = "ktor" }
 #material3-desktop = { module = "org.jetbrains.compose.material3:material3-desktop", version.ref = "material3" }
+platformtools-darkmodedetector = { module = "io.github.kdroidfilter:platformtools.darkmodedetector", version.ref = "platformtoolsDarkmodedetector" }
 sql-postgres-socket-factory = { module = "com.google.cloud.sql:postgres-socket-factory", version.ref = "postgresSocketFactory" }
 room-runtime = { group = "androidx.room", name = "room-runtime", version.ref = "room" }
 room-ktx = { group = "androidx.room", name = "room-ktx", version.ref = "room" }

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,8 @@ kotlin {`
`62`	`62`	`implementation(libs.room.runtime)`
`63`	`63`
`64`	`64`	`implementation(libs.compose.navigation)`
	`65`	`+ implementation(libs.platformtools.darkmodedetector)`
	`66`	`+`
`65`	`67`	`}`
`66`	`68`	`}`
`67`	`69`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ kotlin {`
`37`	`37`
`38`	`38`	`implementation(compose.material3)`
`39`	`39`	`implementation(libs.lifecycle.viewmodel.compose)`
	`40`	`+ implementation(libs.platformtools.darkmodedetector)`
`40`	`41`	`}`
`41`	`42`	`}`
`42`	`43`