Disable dark mode in demo app

Update Web demo with progress indicator and title
tahaak67 · Mar 30, 2024 · e78f92b · e78f92b
1 parent 70be9fd
commit e78f92b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt
@@ -35,6 +35,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -70,7 +71,8 @@ import kotlin.math.roundToInt
 @OptIn(ExperimentalResourceApi::class, ExperimentalMaterial3Api::class)
 @Preview
 @Composable
-fun App(openUrl: (String) -> Boolean) {
+fun App(openUrl: (String) -> Boolean, onWebLoadFinish: ()-> Unit = {} ) {
+    LaunchedEffect(key1 = Unit, block = { onWebLoadFinish() })
     var messageText by remember { mutableStateOf("A sample showcase message 🙃") }
     var selectedTarget by remember { mutableStateOf("Toolbar title") }
     var selectTargetMenuExpaned by remember { mutableStateOf(false) }
@@ -105,7 +107,7 @@ fun App(openUrl: (String) -> Boolean) {
     var headSize by remember { mutableStateOf(25f) }
     var lineThinckness by remember { mutableStateOf(5) }
     val scrollState = rememberScrollState()
-    MyTheme {
+    MyTheme(useDarkTheme = false) {
         ShowcaseLayout(
             isShowcasing = isShowcasing,
             onFinish = { isShowcasing = false },

diff --git a/composeApp/src/wasmJsMain/kotlin/OpenUrl.kt → composeApp/src/wasmJsMain/kotlin/Util.kt b/composeApp/src/wasmJsMain/kotlin/OpenUrl.kt → composeApp/src/wasmJsMain/kotlin/Util.kt
@@ -9,4 +9,6 @@ class UrlLauncherWeb() : UrlLauncher {
             false
         }
     }
-}
+}
+
+external fun onLoadFinished()
diff --git a/composeApp/src/wasmJsMain/kotlin/main.kt b/composeApp/src/wasmJsMain/kotlin/main.kt
@@ -3,5 +3,5 @@ import androidx.compose.ui.window.CanvasBasedWindow
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    CanvasBasedWindow(canvasElementId = "ComposeTarget") { App(openUrl = UrlLauncherWeb()::openUrl) }
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") { App(openUrl = UrlLauncherWeb()::openUrl , onWebLoadFinish = ::onLoadFinished) }
 }
diff --git a/composeApp/src/wasmJsMain/resources/index.html b/composeApp/src/wasmJsMain/resources/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Compose App</title>
+    <title>Showcase Layout Compose Demo</title>
     <style>
         #loading-indicator {
             display: flex;
@@ -44,12 +44,11 @@
     <div class="spinner"></div>
 </div>
 <canvas id="ComposeTarget"></canvas>
-<script src="openurl.js"></script>
+<script src="util.js"></script>
 <script>
-    window.onload = function() {
-        // Hide the loading indicator when the page is fully loaded
+    document.addEventListener("app-loaded", function() {
         document.getElementById("loading-indicator").style.display = "none";
-    };
+    });
 </script>
 </body>
 </html>
diff --git a/...seApp/src/wasmJsMain/resources/openurl.js → composeApp/src/wasmJsMain/resources/util.js b/...seApp/src/wasmJsMain/resources/openurl.js → composeApp/src/wasmJsMain/resources/util.js
@@ -1,3 +1,7 @@
 function openUrlWeb(url) {
     window.open(url, '_blank'); // Open URL in a new tab
 }
+
+function onLoadFinished() {
+    document.dispatchEvent(new Event("app-loaded"));
+}