From 94c606718d2e3c709254af7e71146e0d477e2d94 Mon Sep 17 00:00:00 2001 From: Aleksandras Kostarevas Date: Mon, 4 Sep 2023 16:54:19 +0300 Subject: [PATCH] Make new ThemeScreen for selecting theme --- java/res/values/strings-uix.xml | 3 +- .../org/futo/inputmethod/latin/LatinIME.kt | 9 +- .../futo/inputmethod/latin/uix/Settings.kt | 5 +- .../latin/uix/settings/SettingsNavigator.kt | 2 + .../latin/uix/settings/pages/Home.kt | 2 +- .../latin/uix/settings/pages/ThemeScreen.kt | 28 +++++ .../futo/inputmethod/latin/uix/theme/Theme.kt | 20 ++-- .../latin/uix/theme/ThemeOptions.kt | 7 +- .../uix/theme/presets/AMOLEDDarkPurple.kt | 9 ++ .../uix/theme/presets/ClassicMaterialDark.kt | 33 +----- .../uix/theme/presets/ClassicMaterialLight.kt | 104 ++++++++++++++++++ .../uix/theme/presets/VoiceInputTheme.kt | 9 ++ .../latin/uix/theme/selector/ThemePicker.kt | 58 +++++++++- 13 files changed, 242 insertions(+), 47 deletions(-) create mode 100644 java/src/org/futo/inputmethod/latin/uix/settings/pages/ThemeScreen.kt create mode 100644 java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialLight.kt diff --git a/java/res/values/strings-uix.xml b/java/res/values/strings-uix.xml index 9bf7e0b3b..edf41cff3 100644 --- a/java/res/values/strings-uix.xml +++ b/java/res/values/strings-uix.xml @@ -5,7 +5,8 @@ AMOLED Dark Purple AOSP Material Dark - Voice Input Theme + AOSP Material Light + FUTO VI Theme Dynamic System Dynamic Light diff --git a/java/src/org/futo/inputmethod/latin/LatinIME.kt b/java/src/org/futo/inputmethod/latin/LatinIME.kt index 596383c11..6dfd0703d 100644 --- a/java/src/org/futo/inputmethod/latin/LatinIME.kt +++ b/java/src/org/futo/inputmethod/latin/LatinIME.kt @@ -179,6 +179,13 @@ class LatinIME : InputMethodService(), LifecycleOwner, ViewModelStoreOwner, Save if(currColors.differsFrom(nextColors)) { updateDrawableProvider(nextColors) + recreateKeyboard() + } + } + + deferGetSetting(THEME_KEY) { key -> + if(key != activeThemeOption?.key) { + ThemeOptions[key]?.let { updateTheme(it) } } } } @@ -305,7 +312,7 @@ class LatinIME : InputMethodService(), LifecycleOwner, ViewModelStoreOwner, Save } private fun returnBackToMainKeyboardViewFromAction() { - assert(currWindowActionWindow != null) + if(currWindowActionWindow == null) return currWindowActionWindow!!.close() diff --git a/java/src/org/futo/inputmethod/latin/uix/Settings.kt b/java/src/org/futo/inputmethod/latin/uix/Settings.kt index 8011eb50e..aeea79baa 100644 --- a/java/src/org/futo/inputmethod/latin/uix/Settings.kt +++ b/java/src/org/futo/inputmethod/latin/uix/Settings.kt @@ -59,7 +59,10 @@ fun LifecycleOwner.deferGetSetting(key: Preferences.Key, default: T, onOb return lifecycleScope.launch { withContext(Dispatchers.Default) { val value = context.getSetting(key, default) - onObtained(value) + + withContext(Dispatchers.Main) { + onObtained(value) + } } } } diff --git a/java/src/org/futo/inputmethod/latin/uix/settings/SettingsNavigator.kt b/java/src/org/futo/inputmethod/latin/uix/settings/SettingsNavigator.kt index d1c5da1d7..982d7b188 100644 --- a/java/src/org/futo/inputmethod/latin/uix/settings/SettingsNavigator.kt +++ b/java/src/org/futo/inputmethod/latin/uix/settings/SettingsNavigator.kt @@ -7,6 +7,7 @@ import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import org.futo.inputmethod.latin.uix.settings.pages.HomeScreen import org.futo.inputmethod.latin.uix.settings.pages.PredictiveTextScreen +import org.futo.inputmethod.latin.uix.settings.pages.ThemeScreen import org.futo.inputmethod.latin.uix.settings.pages.TypingScreen import org.futo.inputmethod.latin.uix.settings.pages.VoiceInputScreen @@ -22,5 +23,6 @@ fun SettingsNavigator( composable("predictiveText") { PredictiveTextScreen(navController) } composable("typing") { TypingScreen(navController) } composable("voiceInput") { VoiceInputScreen(navController) } + composable("themes") { ThemeScreen(navController) } } } \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/settings/pages/Home.kt b/java/src/org/futo/inputmethod/latin/uix/settings/pages/Home.kt index 51d21d8a7..e99c4c7a7 100644 --- a/java/src/org/futo/inputmethod/latin/uix/settings/pages/Home.kt +++ b/java/src/org/futo/inputmethod/latin/uix/settings/pages/Home.kt @@ -55,7 +55,7 @@ fun HomeScreen(navController: NavHostController = rememberNavController()) { NavigationItem( title = "Theme", style = NavigationItemStyle.HomeTertiary, - navigate = { /* TODO */ }, + navigate = { navController.navigate("themes") }, icon = painterResource(id = R.drawable.eye) ) diff --git a/java/src/org/futo/inputmethod/latin/uix/settings/pages/ThemeScreen.kt b/java/src/org/futo/inputmethod/latin/uix/settings/pages/ThemeScreen.kt new file mode 100644 index 000000000..0e2514377 --- /dev/null +++ b/java/src/org/futo/inputmethod/latin/uix/settings/pages/ThemeScreen.kt @@ -0,0 +1,28 @@ +package org.futo.inputmethod.latin.uix.settings.pages + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +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.navigation.NavHostController +import androidx.navigation.compose.rememberNavController +import org.futo.inputmethod.latin.uix.THEME_KEY +import org.futo.inputmethod.latin.uix.settings.ScreenTitle +import org.futo.inputmethod.latin.uix.settings.useDataStore +import org.futo.inputmethod.latin.uix.theme.selector.ThemePicker + +@Preview +@Composable +fun ThemeScreen(navController: NavHostController = rememberNavController()) { + val (theme, setTheme) = useDataStore(THEME_KEY.key, THEME_KEY.default) + + val context = LocalContext.current + Column(modifier = Modifier.fillMaxSize()) { + ScreenTitle("Theme", showBack = true, navController) + ThemePicker { + setTheme(it.key) + } + } +} \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/Theme.kt b/java/src/org/futo/inputmethod/latin/uix/theme/Theme.kt index 0ca5e0982..d2f61f420 100644 --- a/java/src/org/futo/inputmethod/latin/uix/theme/Theme.kt +++ b/java/src/org/futo/inputmethod/latin/uix/theme/Theme.kt @@ -1,6 +1,7 @@ package org.futo.inputmethod.latin.uix.theme import android.app.Activity +import android.content.Context import android.os.Build import android.view.WindowManager import androidx.compose.material3.ColorScheme @@ -11,6 +12,7 @@ import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.SideEffect +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalView @@ -47,18 +49,22 @@ val DarkColorScheme = darkColorScheme( onSurfaceVariant = Slate300 ) +fun applyWindowColors(context: Context, backgroundColor: Color) { + val window = (context as Activity).window + val color = backgroundColor.copy(alpha = 0.75f).toArgb() + + window.statusBarColor = color + window.navigationBarColor = color + + window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND) +} + @Composable fun StatusBarColorSetter() { val backgroundColor = MaterialTheme.colorScheme.background val context = LocalContext.current LaunchedEffect(backgroundColor) { - val window = (context as Activity).window - val color = backgroundColor.copy(alpha = 0.75f).toArgb() - - window.statusBarColor = color - window.navigationBarColor = color - - window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND) + applyWindowColors(context, backgroundColor) } } diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/ThemeOptions.kt b/java/src/org/futo/inputmethod/latin/uix/theme/ThemeOptions.kt index 29f472304..7807b9b53 100644 --- a/java/src/org/futo/inputmethod/latin/uix/theme/ThemeOptions.kt +++ b/java/src/org/futo/inputmethod/latin/uix/theme/ThemeOptions.kt @@ -5,6 +5,7 @@ import androidx.annotation.StringRes import androidx.compose.material3.ColorScheme import org.futo.inputmethod.latin.uix.theme.presets.AMOLEDDarkPurple import org.futo.inputmethod.latin.uix.theme.presets.ClassicMaterialDark +import org.futo.inputmethod.latin.uix.theme.presets.ClassicMaterialLight import org.futo.inputmethod.latin.uix.theme.presets.DynamicDarkTheme import org.futo.inputmethod.latin.uix.theme.presets.DynamicLightTheme import org.futo.inputmethod.latin.uix.theme.presets.DynamicSystemTheme @@ -24,16 +25,18 @@ val ThemeOptions = hashMapOf( DynamicLightTheme.key to DynamicLightTheme, ClassicMaterialDark.key to ClassicMaterialDark, + ClassicMaterialLight.key to ClassicMaterialLight, VoiceInputTheme.key to VoiceInputTheme, AMOLEDDarkPurple.key to AMOLEDDarkPurple, ) val ThemeOptionKeys = arrayOf( - DynamicSystemTheme.key, + VoiceInputTheme.key, DynamicDarkTheme.key, DynamicLightTheme.key, + DynamicSystemTheme.key, ClassicMaterialDark.key, - VoiceInputTheme.key, + ClassicMaterialLight.key, AMOLEDDarkPurple.key, ) \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/presets/AMOLEDDarkPurple.kt b/java/src/org/futo/inputmethod/latin/uix/theme/presets/AMOLEDDarkPurple.kt index e25366345..30a7cf10f 100644 --- a/java/src/org/futo/inputmethod/latin/uix/theme/presets/AMOLEDDarkPurple.kt +++ b/java/src/org/futo/inputmethod/latin/uix/theme/presets/AMOLEDDarkPurple.kt @@ -1,9 +1,12 @@ package org.futo.inputmethod.latin.uix.theme.presets import androidx.compose.material3.darkColorScheme +import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview import org.futo.inputmethod.latin.R import org.futo.inputmethod.latin.uix.theme.ThemeOption +import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview private val md_theme_dark_primary = Color(0xFFD0BCFF) private val md_theme_dark_onPrimary = Color(0xFF381E72) @@ -75,4 +78,10 @@ val AMOLEDDarkPurple = ThemeOption( available = { true } ) { colorScheme +} + +@Composable +@Preview +private fun PreviewTheme() { + ThemePreview(AMOLEDDarkPurple) } \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialDark.kt b/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialDark.kt index 1d58b07e6..0a9306974 100644 --- a/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialDark.kt +++ b/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialDark.kt @@ -20,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.futo.inputmethod.latin.R import org.futo.inputmethod.latin.uix.theme.ThemeOption +import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview private val md_theme_dark_primary = Color(0xFF80cbc4) @@ -28,11 +29,11 @@ private val md_theme_dark_primaryContainer = Color(0xFF34434B) private val md_theme_dark_onPrimaryContainer = Color(0xFFF0FFFE) private val md_theme_dark_secondary = Color(0xFF80cbc4) private val md_theme_dark_onSecondary = Color(0xFFFFFFFF) -private val md_theme_dark_secondaryContainer = Color(0xFF34434B) +private val md_theme_dark_secondaryContainer = Color(0xFF416152) private val md_theme_dark_onSecondaryContainer = Color(0xFFFFFFFF) private val md_theme_dark_tertiary = Color(0xFF3582A2) private val md_theme_dark_onTertiary = Color(0xFFFFFFFF) -private val md_theme_dark_tertiaryContainer = Color(0xFF004D64) +private val md_theme_dark_tertiaryContainer = Color(0xFF17516D) private val md_theme_dark_onTertiaryContainer = Color(0xFFBDE9FF) private val md_theme_dark_error = Color(0xFFFFB4AB) private val md_theme_dark_errorContainer = Color(0xFF93000A) @@ -97,31 +98,5 @@ val ClassicMaterialDark = ThemeOption( @Composable @Preview private fun PreviewTheme() { - MaterialTheme(colorScheme) { - Column(modifier = Modifier.fillMaxSize()) { - Spacer(modifier = Modifier.weight(1.5f)) - Surface(color = MaterialTheme.colorScheme.background, modifier = Modifier - .fillMaxWidth() - .height(48.dp)) { - - } - Surface(color = MaterialTheme.colorScheme.surface, modifier = Modifier - .fillMaxWidth() - .weight(1.0f)) { - Box(modifier = Modifier.padding(16.dp)) { - Surface( - color = MaterialTheme.colorScheme.primary, modifier = Modifier - .align( - Alignment.BottomEnd - ) - .height(32.dp) - .width(48.dp), - shape = RoundedCornerShape(8.dp) - ) { - - } - } - } - } - } + ThemePreview(ClassicMaterialDark) } \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialLight.kt b/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialLight.kt new file mode 100644 index 000000000..2ff6bf798 --- /dev/null +++ b/java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialLight.kt @@ -0,0 +1,104 @@ +package org.futo.inputmethod.latin.uix.theme.presets + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +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.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.futo.inputmethod.latin.R +import org.futo.inputmethod.latin.uix.theme.ThemeOption +import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview + + + +val md_theme_light_primary = Color(0xFF4db6ac) +val md_theme_light_onPrimary = Color(0xFFFFFFFF) +val md_theme_light_primaryContainer = Color(0xFFCCE8E4) +val md_theme_light_onPrimaryContainer = Color(0xFF00201D) +val md_theme_light_secondary = Color(0xFF4A6360) +val md_theme_light_onSecondary = Color(0xFFFFFFFF) +val md_theme_light_secondaryContainer = Color(0xFFD8E8CC) +val md_theme_light_onSecondaryContainer = Color(0xFF051F1D) +val md_theme_light_tertiary = Color(0xFF47617A) +val md_theme_light_onTertiary = Color(0xFFFFFFFF) +val md_theme_light_tertiaryContainer = Color(0xFFCEEBFF) +val md_theme_light_onTertiaryContainer = Color(0xFF001D33) +val md_theme_light_error = Color(0xFFBA1A1A) +val md_theme_light_errorContainer = Color(0xFFFFDAD6) +val md_theme_light_onError = Color(0xFFFFFFFF) +val md_theme_light_onErrorContainer = Color(0xFF410002) +val md_theme_light_background = Color(0xFFe4e7e9) +val md_theme_light_onBackground = Color(0xFF191C1C) +val md_theme_light_surface = Color(0xFFeceff1) +val md_theme_light_onSurface = Color(0xFF191C1C) +val md_theme_light_surfaceVariant = Color(0xFFDAE5E2) +val md_theme_light_onSurfaceVariant = Color(0xFF3F4947) +val md_theme_light_outline = Color(0xFF9EA2A7) +val md_theme_light_inverseOnSurface = Color(0xFFEFF1F0) +val md_theme_light_inverseSurface = Color(0xFF2D3130) +val md_theme_light_inversePrimary = Color(0xFF50DBCE) +val md_theme_light_shadow = Color(0xFF000000) +val md_theme_light_surfaceTint = Color(0xFF006A63) +val md_theme_light_outlineVariant = Color(0xFFBEC9C6) +val md_theme_light_scrim = Color(0xFF000000) + +private val colorScheme = lightColorScheme( + primary = md_theme_light_primary, + onPrimary = md_theme_light_onPrimary, + primaryContainer = md_theme_light_primaryContainer, + onPrimaryContainer = md_theme_light_onPrimaryContainer, + secondary = md_theme_light_secondary, + onSecondary = md_theme_light_onSecondary, + secondaryContainer = md_theme_light_secondaryContainer, + onSecondaryContainer = md_theme_light_onSecondaryContainer, + tertiary = md_theme_light_tertiary, + onTertiary = md_theme_light_onTertiary, + tertiaryContainer = md_theme_light_tertiaryContainer, + onTertiaryContainer = md_theme_light_onTertiaryContainer, + error = md_theme_light_error, + errorContainer = md_theme_light_errorContainer, + onError = md_theme_light_onError, + onErrorContainer = md_theme_light_onErrorContainer, + background = md_theme_light_background, + onBackground = md_theme_light_onBackground, + surface = md_theme_light_surface, + onSurface = md_theme_light_onSurface, + surfaceVariant = md_theme_light_surfaceVariant, + onSurfaceVariant = md_theme_light_onSurfaceVariant, + outline = md_theme_light_outline, + inverseOnSurface = md_theme_light_inverseOnSurface, + inverseSurface = md_theme_light_inverseSurface, + inversePrimary = md_theme_light_inversePrimary, + surfaceTint = md_theme_light_surfaceTint, + outlineVariant = md_theme_light_outlineVariant, + scrim = md_theme_light_scrim, +) + +val ClassicMaterialLight = ThemeOption( + dynamic = false, + key = "ClassicMaterialLight", + name = R.string.classic_material_light_theme_name, + available = { true } +) { + colorScheme +} + +@Composable +@Preview +private fun PreviewTheme() { + ThemePreview(ClassicMaterialLight) +} \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/presets/VoiceInputTheme.kt b/java/src/org/futo/inputmethod/latin/uix/theme/presets/VoiceInputTheme.kt index 2a50805c6..f772abb7f 100644 --- a/java/src/org/futo/inputmethod/latin/uix/theme/presets/VoiceInputTheme.kt +++ b/java/src/org/futo/inputmethod/latin/uix/theme/presets/VoiceInputTheme.kt @@ -1,8 +1,11 @@ package org.futo.inputmethod.latin.uix.theme.presets +import androidx.compose.runtime.Composable +import androidx.compose.ui.tooling.preview.Preview import org.futo.inputmethod.latin.R import org.futo.inputmethod.latin.uix.theme.DarkColorScheme import org.futo.inputmethod.latin.uix.theme.ThemeOption +import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview val VoiceInputTheme = ThemeOption( dynamic = false, @@ -11,4 +14,10 @@ val VoiceInputTheme = ThemeOption( available = { true } ) { DarkColorScheme +} + +@Composable +@Preview +private fun PreviewTheme() { + ThemePreview(VoiceInputTheme) } \ No newline at end of file diff --git a/java/src/org/futo/inputmethod/latin/uix/theme/selector/ThemePicker.kt b/java/src/org/futo/inputmethod/latin/uix/theme/selector/ThemePicker.kt index ef46a0a89..acbaea11a 100644 --- a/java/src/org/futo/inputmethod/latin/uix/theme/selector/ThemePicker.kt +++ b/java/src/org/futo/inputmethod/latin/uix/theme/selector/ThemePicker.kt @@ -1,5 +1,6 @@ package org.futo.inputmethod.latin.uix.theme.selector +import android.widget.Toast import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable @@ -9,10 +10,14 @@ 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.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Add +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text @@ -27,7 +32,8 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import org.futo.inputmethod.latin.uix.differsFrom +import org.futo.inputmethod.latin.uix.THEME_KEY +import org.futo.inputmethod.latin.uix.settings.useDataStore import org.futo.inputmethod.latin.uix.theme.ThemeOption import org.futo.inputmethod.latin.uix.theme.ThemeOptionKeys import org.futo.inputmethod.latin.uix.theme.ThemeOptions @@ -37,14 +43,14 @@ import org.futo.inputmethod.latin.uix.theme.presets.AMOLEDDarkPurple import org.futo.inputmethod.latin.uix.theme.presets.ClassicMaterialDark import org.futo.inputmethod.latin.uix.theme.presets.VoiceInputTheme +// TODO: For Dynamic System we need to show the user that it switches between light/dark @Composable -fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) { +fun ThemePreview(theme: ThemeOption, isSelected: Boolean = false, onClick: () -> Unit = { }) { val context = LocalContext.current val colors = remember { theme.obtainColors(context) } val currColors = MaterialTheme.colorScheme - val isSelected = !colors.differsFrom(currColors) val borderWidth = if (isSelected) { 2.dp } else { @@ -76,6 +82,7 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) { shape = keyboardShape ) { Box(modifier = Modifier.fillMaxSize()) { + // Theme name and action bar Text( text = stringResource(theme.name), textAlign = TextAlign.Center, @@ -87,11 +94,14 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) { color = textColor, style = Typography.labelSmall ) + + // Keyboard contents Box( modifier = Modifier .fillMaxSize() .padding(8.dp) ) { + // Spacebar Surface( modifier = Modifier .fillMaxWidth(0.5f) @@ -101,6 +111,7 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) { shape = RoundedCornerShape(12.dp) ) { } + // Enter key Surface( modifier = Modifier .width(24.dp) @@ -115,10 +126,40 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) { } } +@Composable +fun AddCustomThemeButton(onClick: () -> Unit = { }) { + val context = LocalContext.current + val currColors = MaterialTheme.colorScheme + + val keyboardShape = RoundedCornerShape(8.dp) + + Surface( + modifier = Modifier + .padding(12.dp) + .width(172.dp) + .height(128.dp) + .clickable { onClick() }, + color = currColors.surfaceVariant, + shape = keyboardShape + ) { + Box(modifier = Modifier.fillMaxSize()) { + Icon( + Icons.Default.Add, contentDescription = "", modifier = Modifier + .size(48.dp) + .align( + Alignment.Center + ) + ) + } + } +} + @Composable fun ThemePicker(onSelected: (ThemeOption) -> Unit) { val context = LocalContext.current + val currentTheme = useDataStore(THEME_KEY.key, "").value + val isInspecting = LocalInspectionMode.current val availableThemeOptions = remember { ThemeOptionKeys.mapNotNull { key -> @@ -140,15 +181,22 @@ fun ThemePicker(onSelected: (ThemeOption) -> Unit) { items(availableThemeOptions.count()) { val themeOption = availableThemeOptions[it].second - ThemePreview(themeOption) { + ThemePreview(themeOption, isSelected = themeOption.key == currentTheme) { onSelected(themeOption) } } + + item { + AddCustomThemeButton { + // TODO: Custom themes + val toast = Toast.makeText(context, "Custom themes coming eventually", Toast.LENGTH_SHORT) + toast.show() + } + } } } - @Preview @Composable private fun ThemePickerPreview() {