Merge pull request #6 from terrakok/dima.avdeev/colors

Add colors switch

composeApp/build.gradle.kts

@@ -47,6 +47,7 @@ kotlin {
                 implementation(compose.materialIconsExtended)
                 @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                 implementation(compose.components.resources)
+                implementation(libs.materialKolor)
             }
         }
 

composeApp/src/commonMain/kotlin/com/github/terrakok/App.kt

@@ -5,9 +5,9 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DarkMode
-import androidx.compose.material.icons.filled.Dock
 import androidx.compose.material.icons.filled.DocumentScanner
 import androidx.compose.material.icons.filled.FormatPaint
+import androidx.compose.material.icons.filled.Image
 import androidx.compose.material.icons.filled.LightMode
 import androidx.compose.material.icons.filled.Opacity
 import androidx.compose.material.icons.filled.TextSnippet
@@ -101,7 +101,16 @@ internal fun App() = AppTheme {
                 ) {
                     Icon(
                         if (isDark) Icons.Default.LightMode else Icons.Default.DarkMode,
-                        contentDescription = null
+                        contentDescription = "Toggle brightness"
+                    )
+                }
+                ChooseSeedColorButton()
+                IconButton(
+                    onClick = {}
+                ) {
+                    Icon(
+                        Icons.Default.Image,
+                        contentDescription = "Choose accent image"
                     )
                 }
             }

composeApp/src/commonMain/kotlin/com/github/terrakok/ChooseSeedColor.kt

@@ -0,0 +1,83 @@
+package com.github.terrakok
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Palette
+import androidx.compose.material.icons.outlined.Palette
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+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.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import com.github.terrakok.theme.LocalSeedColor
+import com.github.terrakok.theme.SeedColor
+
+@Composable
+fun ChooseSeedColorButton() {
+    var isSeedChooserOpen by remember { mutableStateOf(false) }
+    IconButton(
+        onClick = { isSeedChooserOpen = !isSeedChooserOpen }
+    ) {
+        Icon(
+            Icons.Default.Palette,
+            contentDescription = "Select a seed color"
+        )
+    }
+    if (isSeedChooserOpen) {
+        val shape = RoundedCornerShape(16.dp)
+        Popup(onDismissRequest = { isSeedChooserOpen = false }) {
+            Column(
+                Modifier
+                    .shadow(16.dp, shape)
+                    .clip(shape)
+                    .background(MaterialTheme.colorScheme.surfaceVariant)
+                    .padding(vertical = 8.dp)
+                    .width(IntrinsicSize.Max)
+            ) {
+                val seedColorState = LocalSeedColor.current
+                val seedColor = seedColorState.value
+                SeedColor.values().forEach { color ->
+                    Row(
+                        Modifier
+                            .fillMaxWidth()
+                            .clickable(enabled = seedColor != color) {
+                                seedColorState.value = color
+                                isSeedChooserOpen = false
+                            }
+                            .then(if (seedColor == color) Modifier.alpha(0.6f) else Modifier)
+                            .padding(16.dp)
+                    ) {
+                        Icon(
+                            imageVector = if (seedColor == color) {
+                                Icons.Filled.Palette
+                            } else {
+                                Icons.Outlined.Palette
+                            },
+                            contentDescription = "Select a seed color",
+                            tint = color.value
+                        )
+                        Text(color.colorName, Modifier.padding(horizontal = 16.dp))
+                    }
+                }
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/com/github/terrakok/theme/Color.kt

@@ -67,5 +67,24 @@ val md_theme_dark_surfaceTint = Color(0xFFD0BCFF)
 val md_theme_dark_outlineVariant = Color(0xFF49454F)
 val md_theme_dark_scrim = Color(0xFF000000)
 
+val md_color_m3_baseline = Color(0xFF6750A4)
+val md_color_indigo = Color(0xFF_3F51B5)
+val md_color_blue = Color(0xFF_21963F)
+val md_color_teal = Color(0xFF_009688)
+val md_color_green = Color(0xFF_4CAF50)
+val md_color_yellow = Color(0xFF_FFEB3B)
+val md_color_orange = Color(0xFF_FF9800)
+val md_color_deep_orange = Color(0xFF_FF5722)
+val md_color_pink = Color(0xFF_E91E63)
 
-val seed = Color(0xFF6750A4)
+enum class SeedColor(val colorName: String, val value: Color) {
+    BASELINE("M3 Baseline", md_color_m3_baseline),
+    INDIGO("Indigo", md_color_indigo),
+    BLUE("Blue", md_color_blue),
+    TEAL("Teal", md_color_teal),
+    GREEN("Green", md_color_green),
+    YELLOW("Yellow", md_color_yellow),
+    ORANGE("Orange", md_color_orange),
+    DEEP_ORANGE("Deep orange", md_color_deep_orange),
+    PINK("Pink", md_color_pink),
+}

composeApp/src/commonMain/kotlin/com/github/terrakok/theme/Theme.kt

@@ -2,6 +2,7 @@ package com.github.terrakok.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Shapes
 import androidx.compose.material3.Surface
@@ -14,11 +15,13 @@ import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.materialkolor.dynamicColorScheme
 
 val LightColorScheme = lightColorScheme(
     primary = md_theme_light_primary,
@@ -101,20 +104,26 @@ private val AppTypography = Typography(
 )
 
 internal val LocalThemeIsDark = compositionLocalOf { mutableStateOf(true) }
+internal val LocalSeedColor = compositionLocalOf { mutableStateOf(SeedColor.BASELINE) }
 
 @Composable
 internal fun AppTheme(
     content: @Composable() () -> Unit
 ) {
     val systemIsDark = isSystemInDarkTheme()
     val isDarkState = remember { mutableStateOf(systemIsDark) }
+    val seedColorState = remember { mutableStateOf(SeedColor.BASELINE) }
     CompositionLocalProvider(
-        LocalThemeIsDark provides isDarkState
+        LocalThemeIsDark provides isDarkState,
+        LocalSeedColor provides seedColorState,
     ) {
         val isDark by isDarkState
         SystemAppearance(!isDark)
         MaterialTheme(
-            colorScheme = if (isDark) DarkColorScheme else LightColorScheme,
+            colorScheme = dynamicColorScheme(
+                seedColor = seedColorState.value.value,
+                isDark = isDark
+            ),
             typography = AppTypography,
             shapes = AppShapes,
             content = {

gradle/libs.versions.toml

@@ -6,12 +6,14 @@ compose = "1.5.10"
 androidx-appcompat = "1.6.1"
 androidx-activityCompose = "1.8.0"
 compose-uitooling = "1.5.4"
+materialKolor = "1.2.8"
 
 [libraries]
 
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
 androidx-activityCompose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
 compose-uitooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose-uitooling" }
+materialKolor = { module = "com.materialkolor:material-kolor", version.ref = "materialKolor" }
 
 [plugins]