[FIXED] Compose in dark mode

Author: hossain-khan

example/src/main/java/dev/hossain/ynaash/example/ui/demoprismjs/PrismJsComposeDemoActivity.kt

@@ -1,15 +1,33 @@
 package dev.hossain.ynaash.example.ui.demoprismjs
 
+import android.os.Build
 import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.*
+import androidx.compose.material3.Card
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import dev.hossain.ynaash.compose.SyntaxHighlighter
@@ -30,7 +48,7 @@ class PrismJsComposeDemoActivity : AppCompatActivity() {
         supportActionBar?.title = "PrismJS Compose Demo"
 
         setContent {
-            MaterialTheme {
+            AppTheme {
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
@@ -42,6 +60,32 @@ class PrismJsComposeDemoActivity : AppCompatActivity() {
     }
 }
 
+@Composable
+fun AppTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit
+) {
+    val context = LocalContext.current
+
+    val colorScheme = when {
+        // Dynamic color is available on Android 12+
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && darkTheme -> {
+            dynamicDarkColorScheme(context)
+        }
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && !darkTheme -> {
+            dynamicLightColorScheme(context)
+        }
+        // Use default dark/light colorScheme for older Android versions
+        darkTheme -> darkColorScheme()
+        else -> lightColorScheme()
+    }
+
+    MaterialTheme(
+        colorScheme = colorScheme,
+        content = content
+    )
+}
+
 @Composable
 fun PrismJsComposeDemoScreen() {
     Column(
@@ -113,10 +157,18 @@ fun PrismJsComposeDemoScreen() {
     }
 }
 
-@Preview(showBackground = true)
+@Preview(showBackground = true, name = "Light Mode")
+@Composable
+fun PrismJsComposeDemoScreenPreviewLight() {
+    AppTheme {
+        PrismJsComposeDemoScreen()
+    }
+}
+
+@Preview(showBackground = true, name = "Dark Mode", uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
 @Composable
-fun PrismJsComposeDemoScreenPreview() {
-    MaterialTheme {
+fun PrismJsComposeDemoScreenPreviewDark() {
+    AppTheme {
         PrismJsComposeDemoScreen()
     }
 }