Add dark mode to clock widget

i18n/src/main/res/values/strings.xml

@@ -545,6 +545,7 @@
     <string name="preference_clockwidget_layout_horizontal">Compact</string>
     <string name="preference_clock_widget_fill_height">Fill screen height</string>
     <string name="preference_clock_widget_fill_height_summary">Insert extra space above the clock to fill the entire screen height</string>
+    <string name="preference_clock_widget_color">Color</string>
     <string name="preference_clock_widget_style">Style</string>
     <string name="preference_clock_widget_style_summary">Select a clock</string>
     <string name="preference_clockwidget_date_part">Date</string>

preferences/src/main/java/de/mm20/launcher2/preferences/Defaults.kt

@@ -45,6 +45,7 @@ fun createFactorySettings(context: Context): Settings {
                 .newBuilder()
                 .setLayout(Settings.ClockWidgetSettings.ClockWidgetLayout.Vertical)
                 .setClockStyle(Settings.ClockWidgetSettings.ClockStyle.DigitalClock1)
+                .setColor(Settings.ClockWidgetSettings.ClockWidgetColors.Auto)
                 .setAlarmPart(true)
                 .setBatteryPart(true)
                 .setDatePart(true)

preferences/src/main/proto/settings.proto

@@ -122,6 +122,13 @@ message Settings {
     bool alarm_part = 6;
     bool favorites_part = 7;
     bool fill_height = 8;
+
+    enum ClockWidgetColors {
+      Auto = 0;
+      Light = 1;
+      Dark = 2;
+    }
+    ClockWidgetColors color = 9;
   }
   ClockWidgetSettings clock_widget = 7;
 

ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/ClockWidget.kt

@@ -16,11 +16,14 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import de.mm20.launcher2.preferences.Settings
 import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockStyle
+import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockWidgetColors
 import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockWidgetLayout
 import de.mm20.launcher2.ui.base.LocalTime
 import de.mm20.launcher2.ui.launcher.widgets.clock.clocks.*
 import de.mm20.launcher2.ui.launcher.widgets.clock.parts.PartProvider
+import de.mm20.launcher2.ui.locals.LocalPreferDarkContentOverWallpaper
 
 @Composable
 fun ClockWidget(
@@ -30,6 +33,7 @@ fun ClockWidget(
     val context = LocalContext.current
     val layout by viewModel.layout.observeAsState()
     val clockStyle by viewModel.clockStyle.observeAsState()
+    val color by viewModel.color.observeAsState()
     val time = LocalTime.current
 
     LaunchedEffect(time) {
@@ -44,8 +48,14 @@ fun ClockWidget(
         contentAlignment = Alignment.BottomCenter
     ) {
 
+        val contentColor = if (color == ClockWidgetColors.Auto && LocalPreferDarkContentOverWallpaper.current || color == ClockWidgetColors.Dark) {
+            Color(0,0,0, 180)
+        } else {
+            Color.White
+        }
+
         CompositionLocalProvider(
-            LocalContentColor provides Color.White
+            LocalContentColor provides contentColor
         ) {
             if (layout == ClockWidgetLayout.Vertical) {
                 Column(

ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/ClockWidgetVM.kt

@@ -67,6 +67,8 @@ class ClockWidgetVM : ViewModel(), KoinComponent {
     val layout = dataStore.data.map { it.clockWidget.layout }.asLiveData()
     val clockStyle = dataStore.data.map { it.clockWidget.clockStyle }.asLiveData()
 
+    val color = dataStore.data.map { it.clockWidget.color }.asLiveData()
+
     fun updateTime(time: Long) {
         partProviders.value.forEach { it.setTime(time) }
     }

ui/src/main/java/de/mm20/launcher2/ui/settings/clockwidget/ClockWidgetSettingsScreen.kt

@@ -18,7 +18,9 @@ import com.google.accompanist.pager.ExperimentalPagerApi
 import com.google.accompanist.pager.HorizontalPager
 import com.google.accompanist.pager.HorizontalPagerIndicator
 import com.google.accompanist.pager.rememberPagerState
+import de.mm20.launcher2.preferences.Settings
 import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockStyle
+import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockWidgetColors
 import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockWidgetLayout
 import de.mm20.launcher2.ui.launcher.widgets.clock.Clock
 import de.mm20.launcher2.ui.R
@@ -53,6 +55,19 @@ fun ClockWidgetSettingsScreen() {
                         viewModel.setClockStyle(it)
                     }
                 )
+                val color by viewModel.color.observeAsState()
+                ListPreference(
+                    title = stringResource(R.string.preference_clock_widget_color),
+                    value = color,
+                    items = listOf(
+                        stringResource(R.string.preference_system_bar_icons_auto) to ClockWidgetColors.Auto,
+                        stringResource(R.string.preference_system_bar_icons_light) to ClockWidgetColors.Light,
+                        stringResource(R.string.preference_system_bar_icons_dark) to ClockWidgetColors.Dark,
+                    ),
+                    onValueChanged = {
+                        if (it != null) viewModel.setColor(it)
+                    }
+                )
                 val fillHeight by viewModel.fillHeight.observeAsState()
                 SwitchPreference(
                     title = stringResource(R.string.preference_clock_widget_fill_height),

ui/src/main/java/de/mm20/launcher2/ui/settings/clockwidget/ClockWidgetSettingsScreenVM.kt

@@ -5,6 +5,7 @@ import androidx.lifecycle.asLiveData
 import androidx.lifecycle.viewModelScope
 import de.mm20.launcher2.preferences.LauncherDataStore
 import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings
+import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockWidgetColors
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.launch
 import org.koin.core.component.KoinComponent
@@ -38,6 +39,19 @@ class ClockWidgetSettingsScreenVM : ViewModel(), KoinComponent {
         }
     }
 
+    val color = dataStore.data.map { it.clockWidget.color }.asLiveData()
+    fun setColor(color: ClockWidgetColors) {
+        viewModelScope.launch {
+            dataStore.updateData {
+                it.toBuilder()
+                    .setClockWidget(
+                        it.clockWidget.toBuilder()
+                            .setColor(color)
+                    ).build()
+            }
+        }
+    }
+
     val fillHeight = dataStore.data.map { it.clockWidget.fillHeight }.asLiveData()
     fun setFillHeight(fillHeight: Boolean) {
         viewModelScope.launch {