Fix dark mode and device orientation

iosApp/iosApp/AvoidDispose.swift

@@ -18,7 +18,6 @@ class AvoidDispose: UIViewController {
  init(_ controller: UIViewController) {
  self.controller = controller
  super.init(nibName: nil, bundle: nil)
- view.backgroundColor = .red
  }
 
  required init?(coder: NSCoder) {
@@ -29,17 +28,10 @@ class AvoidDispose: UIViewController {
  super.viewWillAppear(animated)
  addChild(controller)
  view.addSubview(controller.view)
- controller.view.frame = view.safeAreaLayoutGuide.layoutFrame
- controller.view.backgroundColor = .blue
- //kotlin compose refresh
- //controller.view.touchesCancelled([UITouch()], with: UIEvent())
- view.isHidden = true
- print("\(view.bounds) \(view.safeAreaInsets)")
  }
 
  override func viewDidAppear(_ animated: Bool) {
  super.viewDidAppear(animated)
- view.isHidden = false
  }
 
  override func viewDidDisappear(_ animated: Bool) {
@@ -48,14 +40,31 @@ class AvoidDispose: UIViewController {
  controller.view.removeFromSuperview()
  }
 
+ override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
+ super.viewWillTransition(to: size, with: coordinator)
+ skiaRefresh()
+ }
+
+ override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+ super.traitCollectionDidChange(previousTraitCollection)
+ skiaRefresh()
+ }
+
  override func viewSafeAreaInsetsDidChange() {
  super.viewSafeAreaInsetsDidChange()
- RootViewControllersKt.setSafeArea(start: view.safeAreaInsets.left, top: view.safeAreaInsets.top, end: view.safeAreaInsets.right, bottom: view.safeAreaInsets.bottom)
- //kotlin compose refresh
- controller.view.touchesCancelled([UITouch()], with: UIEvent())
+ skiaRefresh()
  }
 
  override var preferredStatusBarStyle: UIStatusBarStyle {
  return .lightContent
  }
+
+ private func skiaRefresh() {
+ controller.view.frame = view.bounds
+ controller.viewWillAppear(false)
+ RootViewControllersKt.setDarkMode()
+ RootViewControllersKt.setSafeArea(start: view.safeAreaInsets.left, top: view.safeAreaInsets.top, end: view.safeAreaInsets.right, bottom: view.safeAreaInsets.bottom)
+ //kotlin compose refresh
+ controller.view.touchesCancelled([UITouch()], with: UIEvent())
+ }
 }

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/App.kt

@@ -2,15 +2,14 @@ package com.rouge41.kmm.compose.test
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.LayoutDirection
 import com.rouge41.kmm.compose.test.demos.*
 import com.rouge41.kmm.compose.test.demos.Counter
 import com.rouge41.kmm.compose.test.demos.HelloPlatform
@@ -31,7 +30,11 @@ internal fun App() {
  topBar = {
  Box(modifier = Modifier.background(MaterialTheme.colors.primary)) {
  TopAppBar(
- modifier = Modifier.padding(top = SafeArea.current.value.calculateTopPadding()),
+ modifier = Modifier.padding(
+ start = SafeArea.current.value.calculateStartPadding(LayoutDirection.Ltr),
+ top = SafeArea.current.value.calculateTopPadding(),
+ end = SafeArea.current.value.calculateEndPadding(LayoutDirection.Ltr)
+ ),
  title = { Text(currentRoute ?: "") },
  navigationIcon = {
  Icon(
@@ -47,8 +50,14 @@ internal fun App() {
  )
  }
  },
+ drawerBackgroundColor = MaterialTheme.colors.background,
  drawerContent = {
- LazyColumn(modifier = Modifier.padding(top = SafeArea.current.value.calculateTopPadding())) {
+ LazyColumn(
+ modifier = Modifier.padding(
+ start = SafeArea.current.value.calculateStartPadding(LayoutDirection.Ltr),
+ top = SafeArea.current.value.calculateTopPadding()
+ )
+ ) {
  items(Demo.values().size) {
  val item = Demo.values()[it]
  ListItem(
@@ -70,7 +79,13 @@ internal fun App() {
  if (screen == Demo.BottomNavigation) {
  BottomNavigationDemo()
  } else {
- Box(modifier = Modifier.padding(bottom = SafeArea.current.value.calculateBottomPadding())) {
+ Box(
+ modifier = Modifier.padding(
+ start = SafeArea.current.value.calculateStartPadding(LayoutDirection.Ltr),
+ end = SafeArea.current.value.calculateEndPadding(LayoutDirection.Ltr),
+ bottom = SafeArea.current.value.calculateBottomPadding()
+ )
+ ) {
  when (screen) {
  Demo.LazyColumn -> LazyColumnDemo()
  Demo.HelloPlatform -> HelloPlatform()

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/Content.kt

@@ -1,16 +1,29 @@
 package com.rouge41.kmm.compose.test
 
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.mutableStateOf
+import io.ktor.client.*
+import io.ktor.client.call.*
+import io.ktor.client.request.*
+import io.ktor.utils.io.core.*
 
+internal val darkmodeState = mutableStateOf(false)
 internal val safeAreaState = mutableStateOf(PaddingValues())
 internal val SafeArea = compositionLocalOf { safeAreaState }
+internal val DarkMode = compositionLocalOf { darkmodeState }
 
 @Composable
 internal fun Content() {
  Theme {
  App()
  }
+ // isSystemInDarkTheme is not working correctly on iOS
+ val darkMode = isSystemInDarkTheme()
+ LaunchedEffect(key1 = Unit, block = {
+ darkmodeState.value = darkMode
+ })
 }

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/Theme.kt

@@ -1,17 +1,16 @@
 package com.rouge41.kmm.compose.test
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
 @Composable
-internal fun Theme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+internal fun Theme(content: @Composable () -> Unit) {
  val orange = Color(0xFFFF8C00)
- val colors = if (darkTheme) {
- darkColors(primary = orange)
+ val colors = if (DarkMode.current.value) {
+ darkColors(primary = orange, surface = orange, onPrimary = Color.White)
  } else {
  lightColors(primary = orange)
  }

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/demos/BottomNavigationDemo.kt

@@ -1,16 +1,15 @@
 package com.rouge41.kmm.compose.test.demos
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import com.rouge41.kmm.compose.test.SafeArea
 import moe.tlaster.precompose.navigation.NavHost
@@ -49,7 +48,17 @@ internal fun BottomNavigationDemo() {
  }
  }
  ) {
- NavHost(navigator = navigator, initialRoute = Tab.values().first().toString(), modifier = Modifier.padding(bottom = 55.dp + SafeArea.current.value.calculateBottomPadding())) {
+ NavHost(
+ navigator = navigator,
+ initialRoute = Tab.values().first().toString(),
+ modifier = Modifier.padding(
+ start = SafeArea.current.value.calculateStartPadding(
+ LayoutDirection.Ltr
+ ),
+ end = SafeArea.current.value.calculateEndPadding(LayoutDirection.Ltr),
+ bottom = 55.dp + SafeArea.current.value.calculateBottomPadding()
+ )
+ ) {
  Tab.values().forEach { screen ->
  scene(screen.toString()) {
  when (screen) {

test/src/iosMain/kotlin/com/rouge41/kmm/compose/RootViewControllers.kt

@@ -3,8 +3,11 @@ package com.rouge41.kmm.compose
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.ui.unit.dp
 import com.rouge41.kmm.compose.test.Content
+import com.rouge41.kmm.compose.test.darkmodeState
 import com.rouge41.kmm.compose.test.safeAreaState
 import moe.tlaster.precompose.PreComposeApplication
+import org.jetbrains.skiko.SystemTheme
+import org.jetbrains.skiko.currentSystemTheme
 import platform.CoreGraphics.CGFloat
 
 fun RootViewController() = PreComposeApplication(title = "") {
@@ -13,4 +16,8 @@ fun RootViewController() = PreComposeApplication(title = "") {
 
 fun setSafeArea(start: CGFloat, top: CGFloat, end: CGFloat, bottom: CGFloat) {
  safeAreaState.value = PaddingValues(start.dp, top.dp, end.dp, bottom.dp)
-}
+}
+
+fun setDarkMode() {
+ darkmodeState.value = currentSystemTheme == SystemTheme.DARK
+}