Windows mica

build.gradle.kts

@@ -12,5 +12,6 @@ allprojects {
         google()
         mavenCentral()
         maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+        maven("https://s01.oss.sonatype.org/content/repositories/snapshots/")
     }
 }

example/android/src/main/kotlin/com/konyaco/fluent/example/MainActivity.kt

@@ -8,7 +8,9 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            App()
+            ExampleTheme {
+                App()
+            }
         }
     }
 }

example/common/src/commonMain/kotlin/com/konyaco/fluent/example/App.kt

@@ -2,27 +2,22 @@ package com.konyaco.fluent.example
 
 import androidx.compose.animation.*
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
-import com.konyaco.fluent.FluentTheme
 import com.konyaco.fluent.animation.FluentDuration
 import com.konyaco.fluent.animation.FluentEasing
-import com.konyaco.fluent.background.Mica
 import com.konyaco.fluent.component.Icon
 import com.konyaco.fluent.component.SideNav
 import com.konyaco.fluent.component.SideNavItem
 import com.konyaco.fluent.component.Text
-import com.konyaco.fluent.darkColors
 import com.konyaco.fluent.example.screen.HomeScreen
 import com.konyaco.fluent.example.screen.TodoScreen
 import com.konyaco.fluent.icons.Icons
 import com.konyaco.fluent.icons.regular.*
-import com.konyaco.fluent.lightColors
 
 private data class NavItem(
     val label: String,
@@ -52,63 +47,44 @@ private val navs = listOf(
 )
 
 
-internal val LocalStore = compositionLocalOf<Store> { error("Not provided") }
-class Store(
-    systemDarkMode: Boolean
-) {
-    var darkMode by mutableStateOf(systemDarkMode)
-}
-
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun App() {
-    val systemDarkMode = isSystemInDarkTheme()
-
-    val store = remember { Store(systemDarkMode) }
-
-    LaunchedEffect(systemDarkMode) {
-        store.darkMode = systemDarkMode
-    }
-
-    CompositionLocalProvider(LocalStore provides store) {
-        FluentTheme(colors = if (store.darkMode) darkColors() else lightColors()) {
-            Mica(Modifier.fillMaxSize()) {
-                Row(Modifier.fillMaxSize()) {
-                    var expanded by remember { mutableStateOf(true) }
-                    var selected by remember { mutableStateOf(0) }
 
-                    SideNav(Modifier.fillMaxHeight(), expanded, { expanded = it },
-                        footer = {
-                            SideNavItem(false, onClick = {
-                                // TODO
-                            }, icon = { Icon(Icons.Default.Settings, "Settings") }) {
-                                Text("Settings")
-                            }
-                        }
-                    ) {
-                        navs.forEachIndexed { index, navItem ->
-                            SideNavItem(
-                                selected == index,
-                                onClick = { selected = index },
-                                icon = { Icon(navItem.icon, null) },
-                                content = { Text(navItem.label) }
-                            )
-                        }
-                    }
+    Row(Modifier.fillMaxSize()) {
+        var expanded by remember { mutableStateOf(true) }
+        var selected by remember { mutableStateOf(0) }
 
-                    AnimatedContent(selected, Modifier.fillMaxHeight().weight(1f), transitionSpec = {
-                        fadeIn(tween(FluentDuration.ShortDuration, easing = FluentEasing.FastInvokeEasing)) +
-                                slideInVertically(
-                                    tween(
-                                        FluentDuration.ShortDuration,
-                                        easing = FluentEasing.FastInvokeEasing
-                                    ), { it / 6 }) with
-                                fadeOut(tween(FluentDuration.QuickDuration, easing = FluentEasing.FastInvokeEasing))
-                    }) {
-                        navs[it].content()
-                    }
+        SideNav(Modifier.fillMaxHeight(), expanded, { expanded = it },
+            footer = {
+                SideNavItem(false, onClick = {
+                    // TODO
+                }, icon = { Icon(Icons.Default.Settings, "Settings") }) {
+                    Text("Settings")
                 }
             }
+        ) {
+            navs.forEachIndexed { index, navItem ->
+                SideNavItem(
+                    selected == index,
+                    onClick = { selected = index },
+                    icon = { Icon(navItem.icon, null) },
+                    content = { Text(navItem.label) }
+                )
+            }
+        }
+
+        AnimatedContent(selected, Modifier.fillMaxHeight().weight(1f), transitionSpec = {
+            fadeIn(tween(FluentDuration.ShortDuration, easing = FluentEasing.FastInvokeEasing)) +
+                    slideInVertically(
+                        tween(
+                            FluentDuration.ShortDuration,
+                            easing = FluentEasing.FastInvokeEasing
+                        )
+                    ) { it / 6 } with
+                    fadeOut(tween(FluentDuration.QuickDuration, easing = FluentEasing.FastInvokeEasing))
+        }) {
+            navs[it].content()
         }
     }
 }

example/common/src/commonMain/kotlin/com/konyaco/fluent/example/ExampleTheme.kt

@@ -0,0 +1,49 @@
+package com.konyaco.fluent.example
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import com.konyaco.fluent.FluentTheme
+import com.konyaco.fluent.LocalContentColor
+import com.konyaco.fluent.background.Mica
+import com.konyaco.fluent.darkColors
+import com.konyaco.fluent.lightColors
+
+val LocalStore = compositionLocalOf<Store> { error("Not provided") }
+
+class Store(
+    systemDarkMode: Boolean
+) {
+    var darkMode by mutableStateOf(systemDarkMode)
+}
+
+@Composable
+fun ExampleTheme(
+    displayMicaLayer: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    val systemDarkMode = isSystemInDarkTheme()
+
+    val store = remember { Store(systemDarkMode) }
+
+    LaunchedEffect(systemDarkMode) {
+        store.darkMode = systemDarkMode
+    }
+    CompositionLocalProvider(
+        LocalStore provides store
+    ) {
+        FluentTheme(colors = if (store.darkMode) darkColors() else lightColors()) {
+            if (displayMicaLayer) {
+                Mica(modifier = Modifier.fillMaxSize()) {
+                    content()
+                }
+            } else {
+                CompositionLocalProvider(
+                    LocalContentColor provides FluentTheme.colors.text.text.primary,
+                    content = content
+                )
+            }
+        }
+    }
+}

example/desktop/build.gradle.kts

@@ -11,6 +11,7 @@ kotlin {
         val jvmMain by getting {
             dependencies {
                 implementation(project(":example:common"))
+                implementation("com.mayakapps.compose:window-styler:0.3.2")
             }
         }
         val jvmTest by getting

example/desktop/src/jvmMain/kotlin/com/konyaco/fluent/example/Main.kt

@@ -5,13 +5,22 @@ import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.rememberWindowState
+import com.mayakapps.compose.windowstyler.WindowBackdrop
+import com.mayakapps.compose.windowstyler.WindowStyle
+import org.jetbrains.skiko.hostOs
 
 fun main() = application {
     Window(
         onCloseRequest = ::exitApplication,
         state = rememberWindowState(position = WindowPosition(Alignment.Center)),
         title = "Compose Fluent"
     ) {
-        App()
+        ExampleTheme(displayMicaLayer = !hostOs.isWindows) {
+            WindowStyle(
+                isDarkTheme = LocalStore.current.darkMode,
+                backdropType = WindowBackdrop.Mica
+            )
+            App()
+        }
     }
 }