ehsannarmani · sproctor · Feb 17, 2026 · Feb 26, 2026 · Feb 26, 2026 · Feb 26, 2026
diff --git a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/MainActivity.kt b/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/MainActivity.kt
@@ -5,19 +5,15 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import ir.ehsannarmani.compose_charts.ui.App
-import ir.ehsannarmani.compose_charts.ui.theme.ComposeChartsTheme
 
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
-
         enableEdgeToEdge()
         setContent {
-            ComposeChartsTheme(false) {
-                App()
-            }
+            App()
         }
     }
 }

diff --git a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt b/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt
diff --git a/app/src/commonMain/composeResources/drawable/dark_mode.xml b/app/src/commonMain/composeResources/drawable/dark_mode.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M480,840Q330,840 225,735Q120,630 120,480Q120,330 225,225Q330,120 480,120Q494,120 507.5,121Q521,122 534,124Q493,153 468.5,199.5Q444,246 444,300Q444,390 507,453Q570,516 660,516Q715,516 761,491.5Q807,467 836,426Q838,439 839,452.5Q840,466 840,480Q840,630 735,735Q630,840 480,840ZM480,760Q568,760 638,711.5Q708,663 740,585Q720,590 700,593Q680,596 660,596Q537,596 450.5,509.5Q364,423 364,300Q364,280 367,260Q370,240 375,220Q297,252 248.5,322Q200,392 200,480Q200,596 282,678Q364,760 480,760ZM470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Q470,490 470,490Z"/>
+</vector>
diff --git a/app/src/commonMain/composeResources/drawable/light_mode.xml b/app/src/commonMain/composeResources/drawable/light_mode.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M565,565Q600,530 600,480Q600,430 565,395Q530,360 480,360Q430,360 395,395Q360,430 360,480Q360,530 395,565Q430,600 480,600Q530,600 565,565ZM338.5,621.5Q280,563 280,480Q280,397 338.5,338.5Q397,280 480,280Q563,280 621.5,338.5Q680,397 680,480Q680,563 621.5,621.5Q563,680 480,680Q397,680 338.5,621.5ZM200,520L40,520L40,440L200,440L200,520ZM920,520L760,520L760,440L920,440L920,520ZM440,200L440,40L520,40L520,200L440,200ZM440,920L440,760L520,760L520,920L440,920ZM256,310L155,213L212,154L308,254L256,310ZM748,806L651,705L704,650L805,747L748,806ZM650,256L747,155L806,212L706,308L650,256ZM154,748L255,651L310,704L213,805L154,748ZM480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Z"/>
+</vector>
diff --git a/...nnarmani/compose_charts/ui/PhoneSample.kt → ...annarmani/compose_charts/ui/AllSamples.kt b/...nnarmani/compose_charts/ui/PhoneSample.kt → ...annarmani/compose_charts/ui/AllSamples.kt
@@ -3,14 +3,14 @@ package ir.ehsannarmani.compose_charts.ui
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.drawscope.DrawStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -19,14 +19,14 @@ import ir.ehsannarmani.compose_charts.models.AnimationMode
 import ir.ehsannarmani.compose_charts.models.DotProperties
 import ir.ehsannarmani.compose_charts.models.Line
 import ir.ehsannarmani.compose_charts.models.PopupProperties
-import ir.ehsannarmani.compose_charts.models.StrokeStyle
 
 @Composable
-fun PhoneSample() {
-    LazyColumn(
-        modifier = Modifier
-            .statusBarsPadding(), verticalArrangement = Arrangement.spacedBy(28.dp),
-        contentPadding = PaddingValues(22.dp)
+fun TabletSample() {
+    LazyVerticalGrid(
+        columns = GridCells.Adaptive(250.dp),
+        verticalArrangement = Arrangement.spacedBy(28.dp),
+        horizontalArrangement = Arrangement.spacedBy(28.dp),
+        contentPadding = PaddingValues(28.dp)
     ) {
         item {
             ChartParent(Modifier) {
@@ -52,23 +52,26 @@ fun PhoneSample() {
                     },
                     dotsProperties = DotProperties(
                         enabled = true,
-                        color = SolidColor(Color.White)
+                        color = SolidColor(MaterialTheme.colorScheme.onSurface)
                     ),
                     modifier = Modifier.padding(22.dp),
                     animationMode = AnimationMode.None,
                     minValue = 0.0,
                     maxValue = 7.0,
-                    popupProperties = PopupProperties(
-                        textStyle = TextStyle.Default.copy(
-                            color = Color.White,
-                            fontSize = 12.sp
+                    labelProperties = labelProperties,
+                    labelHelperProperties = labelHelperProperties,
+                    indicatorProperties = indicatorProperties,
+                    popupProperties =
+                        PopupProperties(
+                            textStyle = TextStyle.Default.copy(
+                                color = Color.White,
+                                fontSize = 12.sp
+                            ),
+                            confirmDraw = {
+                                false
+                            }
                         ),
-                        confirmDraw = {
-                            false
-                        }
-                    ),
-
-                )
+                    )
             }
         }
         // Pie
@@ -93,7 +96,7 @@ fun PhoneSample() {
             ColumnSample3()
         }
 
-        // Row
+        //Row
         item {
             RowSample()
         }
@@ -132,5 +135,11 @@ fun PhoneSample() {
         item {
             LineSample9()
         }
+
     }
-}
+}
+
+
+
+
+
diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/App.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/App.kt
@@ -1,33 +1,49 @@
 package ir.ehsannarmani.compose_charts.ui
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.dp
+import composecharts.app.generated.resources.Res
+import composecharts.app.generated.resources.dark_mode
+import composecharts.app.generated.resources.light_mode
+import ir.ehsannarmani.compose_charts.ui.theme.ComposeChartsTheme
+import org.jetbrains.compose.resources.painterResource
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun App(){
-    val density = LocalDensity.current
-    var composableWidth by remember { mutableStateOf(0.dp) }
-
-    Box(modifier = Modifier
-        .fillMaxSize()
-        .background(Color(0xff101010)).onGloballyPositioned { coordinates ->
-            composableWidth = with(density){ coordinates.size.width.toDp() }
-        }){
-        if (composableWidth >= 600.dp) {
-            TabletSample()
-        }else{
-            PhoneSample()
+fun App() {
+    val systemInDarkTheme = isSystemInDarkTheme()
+    var useDarkTheme: Boolean by remember(systemInDarkTheme) { mutableStateOf(systemInDarkTheme) }
+    ComposeChartsTheme(darkTheme = useDarkTheme) {
+        Scaffold(
+            topBar = {
+                TopAppBar(
+                    title = {
+                        Text("Compose Charts")
+                    },
+                    actions = {
+                        IconButton(
+                            onClick = {
+                                useDarkTheme = !useDarkTheme
+                            }
+                        ) {
+                            Icon(
+                                painter = painterResource(
+                                    if (useDarkTheme) Res.drawable.light_mode else Res.drawable.dark_mode
+                                ),
+                                contentDescription = if (useDarkTheme) "Switch to light mode" else "Switch to dark mode"
+                            )
+                        }
+                    }
+                )
+            }
+        ) { innerPadding ->
+            Box(modifier = Modifier.padding(innerPadding)) {
+                TabletSample()
+            }
         }
     }
-}
+}
diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ChartParent.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ChartParent.kt
@@ -1,28 +1,18 @@
 package ir.ehsannarmani.compose_charts.ui
 
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 
 @Composable
 fun ChartParent(modifier: Modifier, content: @Composable () -> Unit) {
     Card(
         modifier = modifier
             .height(270.dp)
-            .fillMaxWidth()
-            .border(2.dp, Color.Transparent, RoundedCornerShape(12.dp)),
-        elevation = CardDefaults.elevatedCardElevation(2.dp),
-        colors = CardDefaults.cardColors(
-            containerColor = Color(0xff2D2D2D)
-        )
-
+            .fillMaxWidth(),
     ) {
         content()
     }

diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt
@@ -136,11 +136,7 @@ fun ColumnSample(modifier: Modifier=Modifier) {
                     spacing = 3.dp,
                     thickness = 20.dp
                 ),
-                indicatorProperties = HorizontalIndicatorProperties(
-                    textStyle = TextStyle(fontSize = 12.sp, fontFamily = ubuntu, color = Color.White),
-                    count = IndicatorCount.CountBased(count = 4),
-                    position = IndicatorPosition.Horizontal.Start,
-                ),
+                indicatorProperties = indicatorProperties,
                 gridProperties = columnGridProperties,
                 labelProperties = labelProperties,
                 animationSpec = spring(

diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt
@@ -3,9 +3,9 @@ package ir.ehsannarmani.compose_charts.ui
 import androidx.compose.animation.core.EaseInOutCubic
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -137,15 +137,7 @@ fun LineSample(modifier: Modifier=Modifier) {
                 }),
                 gridProperties = gridProperties,
                 dividerProperties = dividerProperties,
-                indicatorProperties = HorizontalIndicatorProperties(
-                    textStyle = TextStyle(
-                        fontSize = 11.sp,
-                        fontFamily = ubuntu, color = Color.White,
-                    ),
-                    contentBuilder = {
-                        it.format(1) + " M"
-                    },
-                ),
+                indicatorProperties = indicatorProperties,
                 labelHelperProperties = labelHelperProperties,
                 curvedEdges = false
             )
@@ -202,7 +194,7 @@ fun LineSample2(modifier: Modifier=Modifier) {
                 popupProperties = PopupProperties(
                     textStyle = TextStyle(
                         fontSize = 11.sp,
-                        color = Color.White,
+                        color = LocalContentColor.current,
                         fontFamily = ubuntu
                     ),
                     contentBuilder = { popup->
@@ -218,7 +210,8 @@ fun LineSample2(modifier: Modifier=Modifier) {
                 indicatorProperties = HorizontalIndicatorProperties(
                     textStyle = TextStyle(
                         fontSize = 11.sp,
-                        fontFamily = ubuntu, color = Color.White
+                        fontFamily = ubuntu,
+                        color = LocalContentColor.current
                     ),
                     contentBuilder = {
                         it.format(1) + " °C"
@@ -233,7 +226,7 @@ fun LineSample2(modifier: Modifier=Modifier) {
     }
 }
 @Composable
-fun LineSample3(modifier: Modifier=Modifier) {
+fun LineSample3() {
     val data = remember {
         listOf(
             Line(