Change color scheme preview

app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemesSettingsScreen.kt

@@ -1,13 +1,15 @@
 package de.mm20.launcher2.ui.settings.colorscheme
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Edit
 import androidx.compose.material.icons.rounded.MoreVert
@@ -24,19 +26,22 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
+import de.mm20.launcher2.themes.Theme
 import de.mm20.launcher2.ui.R
 import de.mm20.launcher2.ui.component.preferences.Preference
 import de.mm20.launcher2.ui.component.preferences.PreferenceCategory
 import de.mm20.launcher2.ui.component.preferences.PreferenceScreen
+import de.mm20.launcher2.ui.locals.LocalDarkTheme
 import de.mm20.launcher2.ui.locals.LocalNavController
-import de.mm20.launcher2.ui.theme.colorscheme.systemCorePalette
+import de.mm20.launcher2.ui.theme.colorscheme.darkColorSchemeOf
+import de.mm20.launcher2.ui.theme.colorscheme.lightColorSchemeOf
 
 @Composable
 fun ThemesSettingsScreen() {
@@ -46,8 +51,6 @@ fun ThemesSettingsScreen() {
     val selectedTheme by viewModel.selectedTheme.collectAsStateWithLifecycle(null)
     val themes by viewModel.themes.collectAsStateWithLifecycle(emptyList())
 
-    val systemPalette = systemCorePalette()
-
     PreferenceScreen(title = stringResource(R.string.preference_screen_colors)) {
         item {
             PreferenceCategory {
@@ -57,24 +60,31 @@ fun ThemesSettingsScreen() {
                         icon = if (theme.id == selectedTheme) Icons.Rounded.RadioButtonChecked else Icons.Rounded.RadioButtonUnchecked,
                         title = theme.name,
                         controls = {
-                            IconButton(onClick = { showMenu = true }) {
+                            Row(
-                                Icon(Icons.Rounded.MoreVert, null)
+                                verticalAlignment = Alignment.CenterVertically,
-                            }
-                            DropdownMenu(
-                                expanded = showMenu,
-                                onDismissRequest = { showMenu = false }
                             ) {
-                                if (!theme.builtIn) {
+                                ColorSchemePreview(theme)
-                                    DropdownMenuItem(
+                                IconButton(
-                                        leadingIcon = {
+                                    modifier = Modifier.padding(start = 12.dp),
-                                            Icon(Icons.Rounded.Edit, null)
+                                    onClick = { showMenu = true }) {
-                                        },
+                                    Icon(Icons.Rounded.MoreVert, null)
-                                        text = { Text("Edit") },
+                                }
-                                        onClick = {
+                                DropdownMenu(
-                                            navController?.navigate("settings/appearance/themes/${theme.id}")
+                                    expanded = showMenu,
-                                            showMenu = false
+                                    onDismissRequest = { showMenu = false }
-                                        }
+                                ) {
-                                    )
+                                    if (!theme.builtIn) {
+                                        DropdownMenuItem(
+                                            leadingIcon = {
+                                                Icon(Icons.Rounded.Edit, null)
+                                            },
+                                            text = { Text("Edit") },
+                                            onClick = {
+                                                navController?.navigate("settings/appearance/themes/${theme.id}")
+                                                showMenu = false
+                                            }
+                                        )
+                                    }
                                 }
                             }
                         },
@@ -82,58 +92,64 @@ fun ThemesSettingsScreen() {
                             viewModel.selectTheme(theme)
                         }
                     )
-                    Row(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(bottom = 8.dp)
-                            .height(8.dp)
-                            .clip(
-                                MaterialTheme.shapes.small.copy(
-                                    topStart = CornerSize(0f),
-                                    topEnd = CornerSize(0f)
-                                )
-                            )
-                    ) {
-                        Box(
-                            modifier = Modifier
-                                .background(Color(theme.corePalette.primary ?: systemPalette.primary))
-                                .weight(1f)
-                                .fillMaxHeight()
-                        )
-                        Box(
-                            modifier = Modifier
-                                .background(Color(theme.corePalette.secondary ?: systemPalette.secondary))
-                                .weight(1f)
-                                .fillMaxHeight()
-                        )
-                        Box(
-                            modifier = Modifier
-                                .background(Color(theme.corePalette.tertiary ?: systemPalette.tertiary))
-                                .weight(1f)
-                                .fillMaxHeight()
-                        )
-                        Box(
-                            modifier = Modifier
-                                .background(Color(theme.corePalette.neutral ?: systemPalette.neutral))
-                                .weight(1f)
-                                .fillMaxHeight()
-                        )
-                        Box(
-                            modifier = Modifier
-                                .background(
-                                    Color(theme.corePalette.neutralVariant ?: systemPalette.neutralVariant))
-                                .weight(1f)
-                                .fillMaxHeight()
-                        )
-                        Box(
-                            modifier = Modifier
-                                .background(Color(theme.corePalette.error ?: systemPalette.error))
-                                .weight(1f)
-                                .fillMaxHeight()
-                        )
-                    }
                 }
             }
         }
     }
+}
+
+@Composable
+fun ColorSchemePreview(theme: Theme) {
+    val dark = LocalDarkTheme.current
+    val scheme = if (dark) darkColorSchemeOf(theme) else lightColorSchemeOf(theme)
+    Box(
+        modifier = Modifier
+            .height(28.dp)
+            .width(72.dp)
+            .clip(MaterialTheme.shapes.small)
+            .border(1.dp, scheme.outlineVariant, MaterialTheme.shapes.small)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxSize(),
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .weight(1f)
+                    .background(scheme.surface)
+            )
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .weight(1f)
+                    .background(scheme.surfaceVariant)
+            )
+        }
+
+        Row(
+            modifier = Modifier.fillMaxSize(),
+        ) {
+            Box(
+                modifier = Modifier
+                    .padding(6.dp)
+                    .clip(MaterialTheme.shapes.extraSmall)
+                    .size(16.dp)
+                    .background(scheme.primary)
+            )
+            Box(
+                modifier = Modifier
+                    .padding(vertical = 6.dp)
+                    .clip(MaterialTheme.shapes.extraSmall)
+                    .size(16.dp)
+                    .background(scheme.secondary)
+            )
+            Box(
+                modifier = Modifier
+                    .padding(6.dp)
+                    .clip(MaterialTheme.shapes.extraSmall)
+                    .size(16.dp)
+                    .background(scheme.tertiary)
+            )
+        }
+    }
 }