diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/AnimatedWeatherIcon.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/AnimatedWeatherIcon.kt
index 2613128f..155dd3c9 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/AnimatedWeatherIcon.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/AnimatedWeatherIcon.kt
@@ -4,7 +4,6 @@ import androidx.compose.animation.Crossfade
 import androidx.compose.animation.animateColor
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.*
-import androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi
 import androidx.compose.animation.graphics.res.animatedVectorResource
 import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
 import androidx.compose.animation.graphics.vector.AnimatedImageVector
@@ -22,7 +21,6 @@ import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import de.mm20.launcher2.ui.R
@@ -35,39 +33,37 @@ import kotlin.math.sin
 fun AnimatedWeatherIcon(
     modifier: Modifier = Modifier,
     icon: WeatherIcon,
-    night: Boolean = false
+    night: Boolean = false,
+    colors: WeatherIconColors = WeatherIconDefaults.colors(),
 ) {
 
     Box(
         modifier = modifier
-            .padding(8.dp)
             .size(64.dp)
             .clipToBounds(),
         contentAlignment = Alignment.Center
     ) {
-        SunMoon(icon, night)
-        Precipitation(icon)
-        LightningBolt(icon)
-        LightningBolt2(icon)
-        Cloud1(icon)
-        Wind2(icon)
-        Cloud2(icon)
-        Cloud3(icon)
-        Fog(icon)
-        Hot(icon)
-        Cold(icon)
-        Wind1(icon)
+        SunMoon(icon, night, colors)
+        Precipitation(icon, colors)
+        LightningBolt(icon, colors)
+        LightningBolt2(icon, colors)
+        Cloud1(icon, colors)
+        Wind2(icon, colors)
+        Cloud2(icon, colors)
+        Cloud3(icon, colors)
+        Fog(icon, colors)
+        Hot(icon, colors)
+        Cold(icon, colors)
+        Wind1(icon, colors)
     }
 }
 
 @Composable
-private fun SunMoon(icon: WeatherIcon, night: Boolean) {
+private fun SunMoon(icon: WeatherIcon, night: Boolean, colors: WeatherIconColors) {
     val sunMoonIcon = AnimatedImageVector.animatedVectorResource(R.drawable.anim_weather_sun_moon)
     val transition = updateTransition(targetState = icon, "AnimatedWeatherIcon")
 
-    val color by animateColorAsState(
-        if (night) colorResource(id = R.color.weather_moon) else colorResource(id = R.color.weather_sun)
-    )
+    val color by animateColorAsState(if (night) colors.moon else colors.sun)
     val scale by transition.animateFloat(label = "sunScale") {
         when (it) {
             WeatherIcon.Clear,
@@ -101,7 +97,7 @@ private fun SunMoon(icon: WeatherIcon, night: Boolean) {
 }
 
 @Composable
-private fun LightningBolt(icon: WeatherIcon) {
+private fun LightningBolt(icon: WeatherIcon, colors: WeatherIconColors) {
     val transition = updateTransition(targetState = icon, "AnimatedWeatherIconBolt")
 
     val scale by transition.animateFloat(label = "scale") {
@@ -130,12 +126,12 @@ private fun LightningBolt(icon: WeatherIcon) {
             .size(32.dp)
             .offset(offset.x.dp, offset.y.dp)
             .scale(scale),
-        tint = colorResource(id = R.color.weather_lightning_bolt)
+        tint = colors.lightningBolt
     )
 }
 
 @Composable
-private fun LightningBolt2(icon: WeatherIcon) {
+private fun LightningBolt2(icon: WeatherIcon, colors: WeatherIconColors) {
     val transition = updateTransition(targetState = icon, "AnimatedWeatherIconBolt2")
 
     val scale by transition.animateFloat(label = "scale") {
@@ -160,12 +156,12 @@ private fun LightningBolt2(icon: WeatherIcon) {
             .size(32.dp)
             .offset(offset.x.dp, offset.y.dp)
             .scale(scale),
-        tint = colorResource(id = R.color.weather_lightning_bolt)
+        tint = colors.lightningBolt
     )
 }
 
 @Composable
-private fun Cloud1(icon: WeatherIcon) {
+private fun Cloud1(icon: WeatherIcon, colors: WeatherIconColors) {
     val transition = updateTransition(targetState = icon, "AnimatedWeatherIconCloud1")
 
     val scale by transition.animateFloat(label = "scale") {
@@ -217,19 +213,19 @@ private fun Cloud1(icon: WeatherIcon) {
             WeatherIcon.ThunderstormWithRain,
             WeatherIcon.HeavyThunderstorm,
             WeatherIcon.HeavyThunderstormWithRain,
-            WeatherIcon.Storm -> colorResource(id = R.color.weather_cloud_dark_2)
+            WeatherIcon.Storm -> colors.cloudDark2
             WeatherIcon.Showers,
             WeatherIcon.Sleet,
             WeatherIcon.Hail,
             WeatherIcon.Cloudy,
             WeatherIcon.Wind,
-            WeatherIcon.Fog -> colorResource(id = R.color.weather_cloud_dark_1)
+            WeatherIcon.Fog -> colors.cloudDark1
             WeatherIcon.Drizzle,
-            WeatherIcon.Snow -> colorResource(id = R.color.weather_cloud_medium_2)
-            WeatherIcon.MostlyCloudy -> colorResource(id = R.color.weather_cloud_light_2)
+            WeatherIcon.Snow -> colors.cloudMedium2
+            WeatherIcon.MostlyCloudy -> colors.cloudLight2
             WeatherIcon.PartlyCloudy,
-            WeatherIcon.BrokenClouds -> colorResource(id = R.color.weather_cloud_light_1)
-            else -> colorResource(id = R.color.weather_cloud_medium_2)
+            WeatherIcon.BrokenClouds -> colors.cloudLight1
+            else -> colors.cloudMedium2
         }
     }
 
@@ -245,7 +241,7 @@ private fun Cloud1(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Cloud2(icon: WeatherIcon) {
+private fun Cloud2(icon: WeatherIcon, colors: WeatherIconColors) {
     val transition = updateTransition(targetState = icon, "AnimatedWeatherIconCloud2")
 
     val scale by transition.animateFloat(label = "scale") {
@@ -290,12 +286,12 @@ private fun Cloud2(icon: WeatherIcon) {
     }
     val color by transition.animateColor(label = "color") {
         when (it) {
-            WeatherIcon.BrokenClouds -> colorResource(id = R.color.weather_cloud_light_2)
+            WeatherIcon.BrokenClouds -> colors.cloudLight2
             WeatherIcon.Thunderstorm,
             WeatherIcon.ThunderstormWithRain,
             WeatherIcon.HeavyThunderstorm,
             WeatherIcon.HeavyThunderstormWithRain,
-            WeatherIcon.Storm -> colorResource(id = R.color.weather_cloud_medium_2)
+            WeatherIcon.Storm -> colors.cloudMedium2
             WeatherIcon.Showers,
             WeatherIcon.Drizzle,
             WeatherIcon.Sleet,
@@ -303,9 +299,9 @@ private fun Cloud2(icon: WeatherIcon) {
             WeatherIcon.Hail,
             WeatherIcon.Cloudy,
             WeatherIcon.Wind,
-            WeatherIcon.Fog -> colorResource(id = R.color.weather_cloud_medium_1)
-            WeatherIcon.MostlyCloudy -> colorResource(id = R.color.weather_cloud_medium_1)
-            else -> colorResource(id = R.color.weather_cloud_medium_2)
+            WeatherIcon.Fog -> colors.cloudMedium1
+            WeatherIcon.MostlyCloudy -> colors.cloudMedium1
+            else -> colors.cloudMedium2
         }
     }
 
@@ -321,7 +317,7 @@ private fun Cloud2(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Cloud3(icon: WeatherIcon) {
+private fun Cloud3(icon: WeatherIcon, colors: WeatherIconColors) {
     val transition = updateTransition(targetState = icon, "AnimatedWeatherIconCloud3")
 
     val scale by transition.animateFloat(label = "scale") {
@@ -364,15 +360,15 @@ private fun Cloud3(icon: WeatherIcon) {
             WeatherIcon.ThunderstormWithRain,
             WeatherIcon.HeavyThunderstorm,
             WeatherIcon.HeavyThunderstormWithRain,
-            WeatherIcon.Storm -> colorResource(id = R.color.weather_cloud_dark_1)
+            WeatherIcon.Storm -> colors.cloudDark1
             WeatherIcon.Showers,
             WeatherIcon.Sleet,
             WeatherIcon.Hail,
             WeatherIcon.Cloudy,
-            WeatherIcon.Wind -> colorResource(id = R.color.weather_cloud_medium_2)
+            WeatherIcon.Wind -> colors.cloudMedium2
             WeatherIcon.Drizzle,
-            WeatherIcon.Snow -> colorResource(id = R.color.weather_cloud_light_2)
-            else -> colorResource(id = R.color.weather_cloud_medium_2)
+            WeatherIcon.Snow -> colors.cloudLight2
+            else -> colors.cloudMedium2
         }
     }
 
@@ -388,7 +384,7 @@ private fun Cloud3(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Hot(icon: WeatherIcon) {
+private fun Hot(icon: WeatherIcon, colors: WeatherIconColors) {
     val scale by animateFloatAsState(
         if (icon == WeatherIcon.Hot) {
             1f
@@ -402,12 +398,12 @@ private fun Hot(icon: WeatherIcon) {
         modifier = Modifier
             .scale(scale)
             .size(32.dp),
-        tint = colorResource(id = R.color.weather_hot)
+        tint = colors.hot
     )
 }
 
 @Composable
-private fun Cold(icon: WeatherIcon) {
+private fun Cold(icon: WeatherIcon, colors: WeatherIconColors) {
     val scale by animateFloatAsState(
         if (icon == WeatherIcon.Cold) {
             1f
@@ -421,12 +417,12 @@ private fun Cold(icon: WeatherIcon) {
         modifier = Modifier
             .scale(scale)
             .size(32.dp),
-        tint = colorResource(id = R.color.weather_cold)
+        tint = colors.cold
     )
 }
 
 @Composable
-private fun Wind1(icon: WeatherIcon) {
+private fun Wind1(icon: WeatherIcon, colors: WeatherIconColors) {
     val scale by animateFloatAsState(
         if (icon == WeatherIcon.Wind || icon == WeatherIcon.Storm) {
             0.6f
@@ -441,12 +437,12 @@ private fun Wind1(icon: WeatherIcon) {
             .scale(scale)
             .offset(12.dp, 11.dp)
             .size(32.dp),
-        tint = colorResource(id = R.color.weather_wind)
+        tint = colors.wind
     )
 }
 
 @Composable
-private fun Wind2(icon: WeatherIcon) {
+private fun Wind2(icon: WeatherIcon, colors: WeatherIconColors) {
     val scale by animateFloatAsState(
         if (icon == WeatherIcon.Storm) {
             0.6f
@@ -461,7 +457,7 @@ private fun Wind2(icon: WeatherIcon) {
             .scale(scale)
             .offset(8.dp, -1.dp)
             .size(32.dp),
-        tint = colorResource(id = R.color.weather_wind_dark)
+        tint = colors.windDark
     )
 }
 
@@ -509,7 +505,7 @@ fun AnimatedWeatherIconTestPanel() {
 }
 
 @Composable
-private fun Precipitation(icon: WeatherIcon) {
+private fun Precipitation(icon: WeatherIcon, colors: WeatherIconColors) {
 
     Box(
         modifier = Modifier
@@ -532,7 +528,7 @@ private fun Precipitation(icon: WeatherIcon) {
                             .offset(y = 8.dp + 11.dp * animProgress),
                         imageVector = Icons.Rounded.WeatherLightRainAnimatable,
                         contentDescription = null,
-                        tint = colorResource(id = R.color.weather_rain)
+                        tint = colors.rain
                     )
                 }
                 WeatherIcon.Hail -> {
@@ -548,7 +544,7 @@ private fun Precipitation(icon: WeatherIcon) {
                             .offset(y = 8.dp + 11.dp * animProgress),
                         imageVector = Icons.Rounded.WeatherHailAnimatable,
                         contentDescription = null,
-                        tint = colorResource(id = R.color.weather_hail)
+                        tint = colors.hail,
                     )
                 }
                 WeatherIcon.Snow -> {
@@ -567,7 +563,7 @@ private fun Precipitation(icon: WeatherIcon) {
                             ),
                         imageVector = Icons.Rounded.WeatherHailAnimatable,
                         contentDescription = null,
-                        tint = colorResource(id = R.color.weather_snow)
+                        tint = colors.snow,
                     )
                 }
                 WeatherIcon.Showers,
@@ -585,7 +581,7 @@ private fun Precipitation(icon: WeatherIcon) {
                             .offset(y = 8.dp + 11.dp * animProgress),
                         imageVector = Icons.Rounded.WeatherRainAnimatable,
                         contentDescription = null,
-                        tint = colorResource(id = R.color.weather_rain)
+                        tint = colors.rain,
                     )
                 }
                 WeatherIcon.Sleet -> {
@@ -601,7 +597,7 @@ private fun Precipitation(icon: WeatherIcon) {
                             .offset(y = 8.dp + 11.dp * animProgress),
                         imageVector = Icons.Rounded.WeatherSleetRainAnimatable,
                         contentDescription = null,
-                        tint = colorResource(id = R.color.weather_rain)
+                        tint = colors.rain,
                     )
                     Icon(
                         modifier = Modifier
@@ -609,7 +605,7 @@ private fun Precipitation(icon: WeatherIcon) {
                             .offset(y = 8.dp + 11.dp * animProgress),
                         imageVector = Icons.Rounded.WeatherSleetSnowAnimatable,
                         contentDescription = null,
-                        tint = colorResource(id = R.color.weather_snow)
+                        tint = colors.snow,
                     )
                 }
                 else -> {}
@@ -619,7 +615,7 @@ private fun Precipitation(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Fog(icon: WeatherIcon) {
+private fun Fog(icon: WeatherIcon, colors: WeatherIconColors) {
     val scale by animateFloatAsState(if (icon == WeatherIcon.Fog || icon == WeatherIcon.Haze) 1f else 0f)
 
     Icon(
@@ -629,7 +625,7 @@ private fun Fog(icon: WeatherIcon) {
             .offset(x = 6.dp, y = 7.dp),
         imageVector = Icons.Rounded.WeatherFog,
         contentDescription = null,
-        tint = colorResource(id = R.color.weather_fog)
+        tint = colors.fog
     )
 }
 
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIcon.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIcon.kt
index 38085449..8185ae42 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIcon.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIcon.kt
@@ -3,44 +3,55 @@ package de.mm20.launcher2.ui.component.weather
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
-import androidx.compose.material3.Icon
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.*
+import androidx.compose.material.icons.rounded.AcUnit
+import androidx.compose.material.icons.rounded.Air
+import androidx.compose.material.icons.rounded.Bolt
+import androidx.compose.material.icons.rounded.DarkMode
+import androidx.compose.material.icons.rounded.LightMode
+import androidx.compose.material.icons.rounded.Thermostat
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
-import de.mm20.launcher2.ui.*
-import de.mm20.launcher2.ui.icons.*
+import de.mm20.launcher2.ui.icons.WeatherCloud
+import de.mm20.launcher2.ui.icons.WeatherFog
+import de.mm20.launcher2.ui.icons.WeatherHail
+import de.mm20.launcher2.ui.icons.WeatherLightRain
+import de.mm20.launcher2.ui.icons.WeatherRain
+import de.mm20.launcher2.ui.icons.WeatherSleetRain
+import de.mm20.launcher2.ui.icons.WeatherSleetSnow
 
 @Composable
 fun WeatherIcon(
     icon: WeatherIcon,
-    night: Boolean = false
+    modifier: Modifier = Modifier,
+    night: Boolean = false,
+    colors: WeatherIconColors = WeatherIconDefaults.colors(),
 ) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(24.dp),
         contentAlignment = Alignment.Center
     ) {
-        SunMoon(icon, night)
-        Precipitation(icon)
-        LightningBolts(icon)
-        Cloud1(icon)
-        Cloud2(icon)
-        Cloud3(icon)
-        HotCold(icon)
-        Wind(icon)
-        Fog(icon)
+        SunMoon(icon, night, colors)
+        Precipitation(icon, colors)
+        LightningBolts(icon, colors)
+        Cloud1(icon, colors)
+        Cloud2(icon, colors)
+        Cloud3(icon, colors)
+        HotCold(icon, colors)
+        Wind(icon, colors)
+        Fog(icon, colors)
     }
 }
 
 @Composable
-private fun SunMoon(icon: WeatherIcon, night: Boolean) {
+private fun SunMoon(icon: WeatherIcon, night: Boolean, colors: WeatherIconColors) {
     when (icon) {
         WeatherIcon.Clear,
         WeatherIcon.PartlyCloudy,
@@ -48,16 +59,18 @@ private fun SunMoon(icon: WeatherIcon, night: Boolean) {
         WeatherIcon.Haze,
         WeatherIcon.MostlyCloudy -> {
         }
+
         else -> return
     }
 
-    val color = if (night) colorResource(id = R.color.weather_moon) else colorResource(id = R.color.weather_sun)
+    val color = if (night) colors.moon else colors.sun
 
     val scale = when (icon) {
         WeatherIcon.Clear,
         WeatherIcon.PartlyCloudy,
         WeatherIcon.BrokenClouds,
         WeatherIcon.Haze -> 1f
+
         WeatherIcon.MostlyCloudy -> 0.8f
         else -> 0f
     }
@@ -80,7 +93,7 @@ private fun SunMoon(icon: WeatherIcon, night: Boolean) {
 }
 
 @Composable
-private fun Cloud1(icon: WeatherIcon) {
+private fun Cloud1(icon: WeatherIcon, colors: WeatherIconColors) {
 
     when (icon) {
         WeatherIcon.Thunderstorm,
@@ -98,6 +111,7 @@ private fun Cloud1(icon: WeatherIcon) {
         WeatherIcon.PartlyCloudy,
         WeatherIcon.BrokenClouds -> {
         }
+
         else -> return
     }
 
@@ -113,8 +127,10 @@ private fun Cloud1(icon: WeatherIcon) {
         WeatherIcon.Hail,
         WeatherIcon.Cloudy,
         WeatherIcon.Fog -> 1.4f
+
         WeatherIcon.MostlyCloudy,
         WeatherIcon.PartlyCloudy -> 1f
+
         WeatherIcon.BrokenClouds -> 0.9f
         else -> 0f
     }
@@ -128,8 +144,10 @@ private fun Cloud1(icon: WeatherIcon) {
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstorm,
         WeatherIcon.HeavyThunderstormWithRain -> DpOffset(0.dp, -7.dp)
+
         WeatherIcon.Cloudy,
         WeatherIcon.Fog -> DpOffset(0.dp, -2.5.dp)
+
         WeatherIcon.MostlyCloudy -> DpOffset(-2.5.dp, 0.dp)
         WeatherIcon.PartlyCloudy -> DpOffset(-1.5.dp, 2.dp)
         WeatherIcon.BrokenClouds -> DpOffset(-2.5.dp, 3.5.dp)
@@ -139,18 +157,22 @@ private fun Cloud1(icon: WeatherIcon) {
         WeatherIcon.Thunderstorm,
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstorm,
-        WeatherIcon.HeavyThunderstormWithRain -> colorResource(id = R.color.weather_cloud_dark_2)
+        WeatherIcon.HeavyThunderstormWithRain -> colors.cloudDark2
+
         WeatherIcon.Showers,
         WeatherIcon.Sleet,
         WeatherIcon.Hail,
         WeatherIcon.Cloudy,
-        WeatherIcon.Fog -> colorResource(id = R.color.weather_cloud_dark_1)
+        WeatherIcon.Fog -> colors.cloudDark1
+
         WeatherIcon.Drizzle,
-        WeatherIcon.Snow -> colorResource(id = R.color.weather_cloud_medium_2)
-        WeatherIcon.MostlyCloudy -> colorResource(id = R.color.weather_cloud_light_2)
+        WeatherIcon.Snow -> colors.cloudMedium2
+
+        WeatherIcon.MostlyCloudy -> colors.cloudLight2
         WeatherIcon.PartlyCloudy,
-        WeatherIcon.BrokenClouds -> colorResource(id = R.color.weather_cloud_light_1)
-        else -> colorResource(id = R.color.weather_cloud_medium_2)
+        WeatherIcon.BrokenClouds -> colors.cloudLight1
+
+        else -> colors.cloudMedium2
     }
 
     Icon(
@@ -165,7 +187,7 @@ private fun Cloud1(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Cloud2(icon: WeatherIcon) {
+private fun Cloud2(icon: WeatherIcon, colors: WeatherIconColors) {
 
     when (icon) {
         WeatherIcon.Thunderstorm,
@@ -182,6 +204,7 @@ private fun Cloud2(icon: WeatherIcon) {
         WeatherIcon.Fog,
         WeatherIcon.BrokenClouds -> {
         }
+
         else -> return
     }
 
@@ -198,6 +221,7 @@ private fun Cloud2(icon: WeatherIcon) {
         WeatherIcon.Hail,
         WeatherIcon.Cloudy,
         WeatherIcon.Fog -> 1.1f
+
         WeatherIcon.BrokenClouds -> 0.7f
         else -> 0f
     }
@@ -211,27 +235,31 @@ private fun Cloud2(icon: WeatherIcon) {
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstorm,
         WeatherIcon.HeavyThunderstormWithRain -> DpOffset(-3.dp, -3.dp)
+
         WeatherIcon.Cloudy,
         WeatherIcon.Fog -> DpOffset(-3.dp, 1.5.dp)
+
         WeatherIcon.BrokenClouds -> DpOffset(4.5.dp, -4.5.dp)
         WeatherIcon.MostlyCloudy -> DpOffset(2.dp, 2.5.dp)
         else -> DpOffset.Zero
     }
     val color = when (icon) {
-        WeatherIcon.BrokenClouds -> colorResource(id = R.color.weather_cloud_light_2)
+        WeatherIcon.BrokenClouds -> colors.cloudLight2
         WeatherIcon.Thunderstorm,
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstorm,
-        WeatherIcon.HeavyThunderstormWithRain -> colorResource(id = R.color.weather_cloud_medium_2)
+        WeatherIcon.HeavyThunderstormWithRain -> colors.cloudMedium2
+
         WeatherIcon.Showers,
         WeatherIcon.Drizzle,
         WeatherIcon.Sleet,
         WeatherIcon.Snow,
         WeatherIcon.Hail,
         WeatherIcon.Cloudy,
-        WeatherIcon.Fog -> colorResource(id = R.color.weather_cloud_medium_1)
-        WeatherIcon.MostlyCloudy -> colorResource(id = R.color.weather_cloud_medium_1)
-        else -> colorResource(id = R.color.weather_cloud_medium_2)
+        WeatherIcon.Fog -> colors.cloudMedium1
+
+        WeatherIcon.MostlyCloudy -> colors.cloudMedium1
+        else -> colors.cloudMedium2
     }
 
     Icon(
@@ -246,7 +274,7 @@ private fun Cloud2(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Cloud3(icon: WeatherIcon) {
+private fun Cloud3(icon: WeatherIcon, colors: WeatherIconColors) {
     when (icon) {
         WeatherIcon.Showers,
         WeatherIcon.Drizzle,
@@ -260,6 +288,7 @@ private fun Cloud3(icon: WeatherIcon) {
         WeatherIcon.Cloudy -> {
 
         }
+
         else -> return
     }
     val offset = when (icon) {
@@ -272,22 +301,27 @@ private fun Cloud3(icon: WeatherIcon) {
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstorm,
         WeatherIcon.HeavyThunderstormWithRain -> DpOffset(3.dp, -2.dp)
+
         WeatherIcon.Cloudy,
         WeatherIcon.Fog -> DpOffset(3.dp, 2.5.dp)
+
         else -> DpOffset.Zero
     }
     val color = when (icon) {
         WeatherIcon.Thunderstorm,
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstorm,
-        WeatherIcon.HeavyThunderstormWithRain -> colorResource(id = R.color.weather_cloud_dark_1)
+        WeatherIcon.HeavyThunderstormWithRain -> colors.cloudDark1
+
         WeatherIcon.Showers,
         WeatherIcon.Sleet,
         WeatherIcon.Hail,
-        WeatherIcon.Cloudy -> colorResource(id = R.color.weather_cloud_medium_2)
+        WeatherIcon.Cloudy -> colors.cloudMedium2
+
         WeatherIcon.Drizzle,
-        WeatherIcon.Snow -> colorResource(id = R.color.weather_cloud_light_2)
-        else -> colorResource(id = R.color.weather_cloud_medium_2)
+        WeatherIcon.Snow -> colors.cloudLight2
+
+        else -> colors.cloudMedium2
     }
 
     Icon(
@@ -301,7 +335,7 @@ private fun Cloud3(icon: WeatherIcon) {
 }
 
 @Composable
-private fun Precipitation(icon: WeatherIcon) {
+private fun Precipitation(icon: WeatherIcon, colors: WeatherIconColors) {
     if (icon == WeatherIcon.Sleet) {
         Icon(
             modifier = Modifier
@@ -309,7 +343,7 @@ private fun Precipitation(icon: WeatherIcon) {
                 .size(32.dp),
             imageVector = Icons.Rounded.WeatherSleetSnow,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_snow)
+            tint = colors.snow
         )
         Icon(
             modifier = Modifier
@@ -317,7 +351,7 @@ private fun Precipitation(icon: WeatherIcon) {
                 .size(32.dp),
             imageVector = Icons.Rounded.WeatherSleetRain,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_rain)
+            tint = colors.rain
         )
         return
     }
@@ -330,6 +364,7 @@ private fun Precipitation(icon: WeatherIcon) {
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstormWithRain -> {
         }
+
         else -> return
     }
     val vector = when (icon) {
@@ -337,6 +372,7 @@ private fun Precipitation(icon: WeatherIcon) {
         WeatherIcon.Showers,
         WeatherIcon.ThunderstormWithRain,
         WeatherIcon.HeavyThunderstormWithRain -> Icons.Rounded.WeatherRain
+
         WeatherIcon.Hail, WeatherIcon.Snow -> Icons.Rounded.WeatherHail
         else -> Icons.Rounded.WeatherLightRain
     }
@@ -344,9 +380,10 @@ private fun Precipitation(icon: WeatherIcon) {
         WeatherIcon.Drizzle,
         WeatherIcon.Showers,
         WeatherIcon.ThunderstormWithRain,
-        WeatherIcon.HeavyThunderstormWithRain -> colorResource(id = R.color.weather_rain)
-        WeatherIcon.Hail -> colorResource(id = R.color.weather_hail)
-        WeatherIcon.Snow -> colorResource(id = R.color.weather_snow)
+        WeatherIcon.HeavyThunderstormWithRain -> colors.rain
+
+        WeatherIcon.Hail -> colors.hail
+        WeatherIcon.Snow -> colors.snow
         else -> Color.Unspecified
     }
     Icon(
@@ -360,14 +397,14 @@ private fun Precipitation(icon: WeatherIcon) {
 }
 
 @Composable
-private fun HotCold(icon: WeatherIcon) {
+private fun HotCold(icon: WeatherIcon, colors: WeatherIconColors) {
     if (icon == WeatherIcon.Hot) {
         Icon(
             modifier = Modifier
                 .size(32.dp),
             imageVector = Icons.Rounded.Thermostat,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_hot)
+            tint = colors.hot
         )
     }
     if (icon == WeatherIcon.Cold) {
@@ -376,13 +413,13 @@ private fun HotCold(icon: WeatherIcon) {
                 .size(32.dp),
             imageVector = Icons.Rounded.AcUnit,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_cold)
+            tint = colors.cold
         )
     }
 }
 
 @Composable
-private fun Wind(icon: WeatherIcon) {
+private fun Wind(icon: WeatherIcon, colors: WeatherIconColors) {
     if (icon == WeatherIcon.Storm) {
         Icon(
             modifier = Modifier
@@ -390,22 +427,22 @@ private fun Wind(icon: WeatherIcon) {
                 .size(24.dp),
             imageVector = Icons.Rounded.Air,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_wind_dark)
+            tint = colors.windDark
         )
     }
     if (icon == WeatherIcon.Wind || icon == WeatherIcon.Storm) {
         Icon(
             modifier = Modifier
-                .size(if(icon == WeatherIcon.Wind) 32.dp else 24.dp),
+                .size(if (icon == WeatherIcon.Wind) 32.dp else 24.dp),
             imageVector = Icons.Rounded.Air,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_wind)
+            tint = colors.wind
         )
     }
 }
 
 @Composable
-private fun Fog(icon: WeatherIcon) {
+private fun Fog(icon: WeatherIcon, colors: WeatherIconColors) {
 
     if (icon != WeatherIcon.Haze && icon != WeatherIcon.Fog) {
         return
@@ -417,12 +454,12 @@ private fun Fog(icon: WeatherIcon) {
             .offset(x = 3.dp, y = 4.dp),
         imageVector = Icons.Rounded.WeatherFog,
         contentDescription = null,
-        tint = colorResource(id = R.color.weather_fog)
+        tint = colors.fog
     )
 }
 
 @Composable
-private fun LightningBolts(icon: WeatherIcon) {
+private fun LightningBolts(icon: WeatherIcon, colors: WeatherIconColors) {
 
     if (icon != WeatherIcon.ThunderstormWithRain
         && icon != WeatherIcon.HeavyThunderstormWithRain
@@ -432,7 +469,8 @@ private fun LightningBolts(icon: WeatherIcon) {
         return
     }
 
-    val isHeavy = icon == WeatherIcon.HeavyThunderstormWithRain || icon == WeatherIcon.HeavyThunderstorm
+    val isHeavy =
+        icon == WeatherIcon.HeavyThunderstormWithRain || icon == WeatherIcon.HeavyThunderstorm
 
     Icon(
         modifier = Modifier
@@ -440,17 +478,17 @@ private fun LightningBolts(icon: WeatherIcon) {
             .offset(x = if (isHeavy) 4.dp else 1.dp, y = 6.dp),
         imageVector = Icons.Rounded.Bolt,
         contentDescription = null,
-        tint = colorResource(id = R.color.weather_lightning_bolt)
+        tint = colors.lightningBolt
     )
 
-    if  (icon == WeatherIcon.HeavyThunderstorm || icon == WeatherIcon.HeavyThunderstormWithRain) {
+    if (icon == WeatherIcon.HeavyThunderstorm || icon == WeatherIcon.HeavyThunderstormWithRain) {
         Icon(
             modifier = Modifier
                 .size(10.dp)
                 .offset(x = -3.dp, y = 6.dp),
             imageVector = Icons.Rounded.Bolt,
             contentDescription = null,
-            tint = colorResource(id = R.color.weather_lightning_bolt)
+            tint = colors.lightningBolt
         )
     }
 }
\ No newline at end of file
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIconColors.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIconColors.kt
new file mode 100644
index 00000000..9f36e80c
--- /dev/null
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/component/weather/WeatherIconColors.kt
@@ -0,0 +1,68 @@
+package de.mm20.launcher2.ui.component.weather
+
+import android.content.Context
+import androidx.annotation.ColorRes
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalContext
+import blend.Blend
+import de.mm20.launcher2.ui.R
+
+
+data class WeatherIconColors(
+    val sun: Color,
+    val moon: Color,
+    val cloudDark1: Color,
+    val cloudDark2: Color,
+    val cloudMedium1: Color,
+    val cloudMedium2: Color,
+    val cloudLight1: Color,
+    val cloudLight2: Color,
+    val rain: Color,
+    val snow: Color,
+    val hail: Color,
+    val fog: Color,
+    val wind: Color,
+    val windDark: Color,
+    val lightningBolt: Color,
+    val hot: Color,
+    val cold: Color,
+)
+
+object WeatherIconDefaults {
+    @Composable
+    fun colors(): WeatherIconColors {
+        val context = LocalContext.current
+
+        val themeColor = MaterialTheme.colorScheme.primary
+
+        return remember(themeColor) {
+            WeatherIconColors(
+                sun = harmonize(context, R.color.weather_sun, themeColor),
+                moon = harmonize(context, R.color.weather_moon, themeColor),
+                cloudDark1 = harmonize(context, R.color.weather_cloud_dark_1, themeColor),
+                cloudDark2 = harmonize(context, R.color.weather_cloud_dark_2, themeColor),
+                cloudMedium1 = harmonize(context, R.color.weather_cloud_medium_1, themeColor),
+                cloudMedium2 = harmonize(context, R.color.weather_cloud_medium_2, themeColor),
+                cloudLight1 = harmonize(context, R.color.weather_cloud_light_1, themeColor),
+                cloudLight2 = harmonize(context, R.color.weather_cloud_light_2, themeColor),
+                rain = harmonize(context, R.color.weather_rain, themeColor),
+                snow = harmonize(context, R.color.weather_snow, themeColor),
+                hail = harmonize(context, R.color.weather_hail, themeColor),
+                fog = harmonize(context, R.color.weather_fog, themeColor),
+                wind = harmonize(context, R.color.weather_wind, themeColor),
+                windDark = harmonize(context, R.color.weather_wind_dark, themeColor),
+                lightningBolt = harmonize(context, R.color.weather_lightning_bolt, themeColor),
+                hot = harmonize(context, R.color.weather_hot, themeColor),
+                cold = harmonize(context, R.color.weather_cold, themeColor),
+            )
+        }
+    }
+}
+
+private fun harmonize(context: Context, @ColorRes baseColor: Int, themeColor: Color): Color {
+    return Color(Blend.harmonize(context.getColor(baseColor), themeColor.toArgb()))
+}
\ No newline at end of file
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/icons/Icons.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/icons/Icons.kt
index 6cd68dd7..502821eb 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/icons/Icons.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/icons/Icons.kt
@@ -856,4 +856,146 @@ val Icons.Rounded.WhatsApp
             curveTo(8.86f, 7.34f, 8.7f, 7.33f, 8.53f, 7.33f)
             close()
         }
+    }
+
+val Icons.Rounded.Rain
+    get() = materialIcon("Icons.Rounded.Rain") {
+        materialPath {
+            moveTo(13.95f, 21.9f)
+            quadToRelative(-0.375f, 0.2f, -0.762f, 0.062f)
+            quadToRelative(-0.388f, -0.137f, -0.588f, -0.512f)
+            lineToRelative(-1.5f, -3f)
+            quadToRelative(-0.2f, -0.375f, -0.062f, -0.762f)
+            quadToRelative(0.137f, -0.388f, 0.512f, -0.588f)
+            quadToRelative(0.375f, -0.2f, 0.762f, -0.062f)
+            quadToRelative(0.388f, 0.137f, 0.588f, 0.512f)
+            lineToRelative(1.5f, 3f)
+            quadToRelative(0.2f, 0.375f, 0.063f, 0.762f)
+            quadToRelative(-0.138f, 0.388f, -0.513f, 0.588f)
+            close()
+            moveToRelative(6f, 0f)
+            quadToRelative(-0.375f, 0.2f, -0.762f, 0.062f)
+            quadToRelative(-0.388f, -0.137f, -0.588f, -0.512f)
+            lineToRelative(-1.5f, -3f)
+            quadToRelative(-0.2f, -0.375f, -0.062f, -0.762f)
+            quadToRelative(0.137f, -0.388f, 0.512f, -0.588f)
+            quadToRelative(0.375f, -0.2f, 0.762f, -0.062f)
+            quadToRelative(0.388f, 0.137f, 0.588f, 0.512f)
+            lineToRelative(1.5f, 3f)
+            quadToRelative(0.2f, 0.375f, 0.063f, 0.762f)
+            quadToRelative(-0.138f, 0.388f, -0.513f, 0.588f)
+            close()
+            moveToRelative(-12f, 0f)
+            quadToRelative(-0.375f, 0.2f, -0.762f, 0.062f)
+            quadToRelative(-0.388f, -0.137f, -0.588f, -0.512f)
+            lineToRelative(-1.5f, -3f)
+            quadToRelative(-0.2f, -0.375f, -0.062f, -0.762f)
+            quadToRelative(0.137f, -0.388f, 0.512f, -0.588f)
+            quadToRelative(0.375f, -0.2f, 0.762f, -0.062f)
+            quadToRelative(0.388f, 0.137f, 0.588f, 0.512f)
+            lineToRelative(1.5f, 3f)
+            quadToRelative(0.2f, 0.375f, 0.063f, 0.762f)
+            quadToRelative(-0.138f, 0.388f, -0.513f, 0.588f)
+            close()
+            moveTo(7.5f, 16f)
+            quadToRelative(-2.275f, 0f, -3.887f, -1.613f)
+            quadTo(2f, 12.775f, 2f, 10.5f)
+            quadToRelative(0f, -2.075f, 1.375f, -3.625f)
+            quadToRelative(1.375f, -1.55f, 3.4f, -1.825f)
+            quadToRelative(0.8f, -1.425f, 2.188f, -2.238f)
+            quadTo(10.35f, 2f, 12f, 2f)
+            quadToRelative(2.25f, 0f, 3.912f, 1.438f)
+            quadToRelative(1.663f, 1.437f, 2.013f, 3.587f)
+            quadToRelative(1.725f, 0.15f, 2.9f, 1.425f)
+            quadTo(22f, 9.725f, 22f, 11.5f)
+            quadToRelative(0f, 1.875f, -1.312f, 3.188f)
+            quadTo(19.375f, 16f, 17.5f, 16f)
+            close()
+            moveToRelative(0f, -2f)
+            horizontalLineToRelative(10f)
+            quadToRelative(1.05f, 0f, 1.775f, -0.725f)
+            quadTo(20f, 12.55f, 20f, 11.5f)
+            quadToRelative(0f, -1.05f, -0.725f, -1.775f)
+            quadTo(18.55f, 9f, 17.5f, 9f)
+            horizontalLineTo(16f)
+            verticalLineTo(8f)
+            quadToRelative(0f, -1.65f, -1.175f, -2.825f)
+            quadTo(13.65f, 4f, 12f, 4f)
+            quadToRelative(-1.2f, 0f, -2.188f, 0.65f)
+            quadToRelative(-0.987f, 0.65f, -1.487f, 1.75f)
+            lineToRelative(-0.25f, 0.6f)
+            horizontalLineTo(7.45f)
+            quadToRelative(-1.425f, 0.05f, -2.437f, 1.062f)
+            quadTo(4f, 9.075f, 4f, 10.5f)
+            quadToRelative(0f, 1.45f, 1.025f, 2.475f)
+            quadTo(6.05f, 14f, 7.5f, 14f)
+            close()
+            moveTo(12f, 9f)
+            close()
+
+        }
+    }
+
+val Icons.Rounded.HumidityPercentage
+    get() = materialIcon("Icons.Rounded.HumidityPercentage") {
+        materialPath {
+            moveTo(14.5f, 18f)
+            quadToRelative(0.625f, 0f, 1.062f, -0.438f)
+            quadTo(16f, 17.125f, 16f, 16.5f)
+            reflectiveQuadToRelative(-0.438f, -1.062f)
+            quadTo(15.125f, 15f, 14.5f, 15f)
+            reflectiveQuadToRelative(-1.062f, 0.438f)
+            quadTo(13f, 15.875f, 13f, 16.5f)
+            reflectiveQuadToRelative(0.438f, 1.062f)
+            quadTo(13.875f, 18f, 14.5f, 18f)
+            close()
+            moveToRelative(-5.75f, -0.75f)
+            quadToRelative(0.3f, 0.3f, 0.7f, 0.3f)
+            quadToRelative(0.4f, 0f, 0.7f, -0.3f)
+            lineToRelative(5.1f, -5.1f)
+            quadToRelative(0.3f, -0.3f, 0.3f, -0.7f)
+            quadToRelative(0f, -0.4f, -0.3f, -0.7f)
+            quadToRelative(-0.3f, -0.3f, -0.712f, -0.3f)
+            quadToRelative(-0.413f, 0f, -0.713f, 0.3f)
+            lineTo(8.75f, 15.825f)
+            quadToRelative(-0.3f, 0.3f, -0.3f, 0.713f)
+            quadToRelative(0f, 0.412f, 0.3f, 0.712f)
+            close()
+            moveTo(9.5f, 13f)
+            quadToRelative(0.625f, 0f, 1.062f, -0.438f)
+            quadTo(11f, 12.125f, 11f, 11.5f)
+            reflectiveQuadToRelative(-0.438f, -1.062f)
+            quadTo(10.125f, 10f, 9.5f, 10f)
+            reflectiveQuadToRelative(-1.062f, 0.438f)
+            quadTo(8f, 10.875f, 8f, 11.5f)
+            reflectiveQuadToRelative(0.438f, 1.062f)
+            quadTo(8.875f, 13f, 9.5f, 13f)
+            close()
+            moveToRelative(2.5f, 9f)
+            quadToRelative(-3.175f, 0f, -5.587f, -2.212f)
+            quadTo(4f, 17.575f, 4f, 13.8f)
+            quadToRelative(0f, -2.375f, 1.8f, -5.15f)
+            quadToRelative(1.8f, -2.775f, 5.45f, -6f)
+            quadToRelative(0.15f, -0.125f, 0.35f, -0.2f)
+            quadToRelative(0.2f, -0.075f, 0.4f, -0.075f)
+            reflectiveQuadToRelative(0.4f, 0.075f)
+            quadToRelative(0.2f, 0.075f, 0.35f, 0.2f)
+            quadToRelative(3.65f, 3.225f, 5.45f, 6f)
+            quadTo(20f, 11.425f, 20f, 13.8f)
+            quadToRelative(0f, 3.775f, -2.413f, 5.988f)
+            quadTo(15.175f, 22f, 12f, 22f)
+            close()
+            moveToRelative(0f, -2f)
+            quadToRelative(2.525f, 0f, 4.262f, -1.725f)
+            quadTo(18f, 16.55f, 18f, 13.8f)
+            quadToRelative(0f, -1.775f, -1.475f, -4.063f)
+            quadTo(15.05f, 7.45f, 12f, 4.65f)
+            quadToRelative(-3.05f, 2.8f, -4.525f, 5.087f)
+            quadTo(6f, 12.025f, 6f, 13.8f)
+            quadToRelative(0f, 2.75f, 1.737f, 4.475f)
+            quadTo(9.475f, 20f, 12f, 20f)
+            close()
+            moveToRelative(0f, -6.2f)
+            close()
+        }
     }
\ No newline at end of file
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/ktx/LazyListLayoutInfo.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/ktx/LazyListLayoutInfo.kt
new file mode 100644
index 00000000..3e68193b
--- /dev/null
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/ktx/LazyListLayoutInfo.kt
@@ -0,0 +1,23 @@
+package de.mm20.launcher2.ui.ktx
+
+import androidx.compose.foundation.lazy.LazyListLayoutInfo
+import kotlin.math.pow
+
+fun LazyListLayoutInfo.blendIntoViewScale(key: Any, degree: Float = 1f): Float =
+    visibleItemsInfo.firstOrNull { it.key == key }?.let {
+
+        val itemStart = it.offset
+        val itemEnd = it.offset + it.size
+
+        val atLeftEnd = itemStart < viewportStartOffset
+        val atRightEnd = itemEnd > viewportEndOffset
+
+        if (!atLeftEnd && !atRightEnd) {
+            return 1f
+        }
+
+        val factor = 1f - (if (atLeftEnd) viewportStartOffset - itemStart else itemEnd - viewportEndOffset) / it.size.toFloat()
+
+        if (degree != 1f) factor.pow(degree) else factor
+
+    } ?: 1f
\ No newline at end of file
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidget.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidget.kt
index 0103f187..380b3af1 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidget.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidget.kt
@@ -6,24 +6,44 @@ import android.net.Uri
 import android.text.format.DateUtils
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CornerSize
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ArrowDropDown
-import androidx.compose.material.icons.rounded.LightMode
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
+import androidx.compose.material.icons.rounded.*
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+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.rotate
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.Lifecycle
@@ -35,6 +55,9 @@ import de.mm20.launcher2.ui.common.WeatherLocationSearchDialog
 import de.mm20.launcher2.ui.component.MissingPermissionBanner
 import de.mm20.launcher2.ui.component.weather.AnimatedWeatherIcon
 import de.mm20.launcher2.ui.component.weather.WeatherIcon
+import de.mm20.launcher2.ui.icons.HumidityPercentage
+import de.mm20.launcher2.ui.icons.Rain
+import de.mm20.launcher2.ui.ktx.blendIntoViewScale
 import de.mm20.launcher2.weather.DailyForecast
 import de.mm20.launcher2.weather.Forecast
 import java.text.DateFormat
@@ -59,6 +82,8 @@ fun WeatherWidget() {
 
     val imperialUnits by viewModel.imperialUnits.observeAsState(false)
 
+    val compactMode by viewModel.compactMode.observeAsState(false)
+
     var showLocationDialog by remember { mutableStateOf(false) }
 
     if (showLocationDialog) {
@@ -97,134 +122,84 @@ fun WeatherWidget() {
     Column {
         CurrentWeather(forecast, imperialUnits)
 
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(vertical = 2.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
+        if (!compactMode) {
+
             val dailyForecasts by viewModel.dailyForecasts.observeAsState(emptyList())
             val selectedDayForecast by viewModel.currentDailyForecast.observeAsState()
-            selectedDayForecast?.let {
-                WeatherDaySelector(
-                    days = dailyForecasts,
-                    selectedDay = it,
-                    onDaySelected = {
-                        viewModel.selectDay(it)
-                    },
-                    modifier = Modifier
-                        .weight(1f)
-                        .padding(horizontal = 4.dp),
-                    imperialUnits = imperialUnits
-                )
-            }
             val currentDayForecasts by viewModel.currentDayForecasts.observeAsState(emptyList())
-            WeatherTimeSelector(
-                forecasts = currentDayForecasts,
-                selectedForecast = forecast,
-                imperialUnits = imperialUnits,
-                onTimeSelected = {
-                    viewModel.selectForecast(it)
-                },
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 4.dp),
-            )
+
+            Surface(
+                color = MaterialTheme.colorScheme.surfaceVariant,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Column(
+                    modifier = Modifier.padding(top = 8.dp, bottom = 12.dp)
+                ) {
+                    WeatherTimeSelector(
+                        forecasts = currentDayForecasts,
+                        selectedForecast = forecast,
+                        imperialUnits = imperialUnits,
+                        onTimeSelected = {
+                            viewModel.selectForecast(it)
+                        },
+                        modifier = Modifier.padding(bottom = 8.dp)
+                    )
+                    Divider(
+                        modifier = Modifier.padding(horizontal = 16.dp),
+                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.12f),
+                    )
+                    selectedDayForecast?.let {
+                        WeatherDaySelector(
+                            days = dailyForecasts,
+                            selectedDay = it,
+                            onDaySelected = {
+                                viewModel.selectDay(it)
+                            },
+                            imperialUnits = imperialUnits,
+                            modifier = Modifier.padding(top = 8.dp)
+                        )
+                    }
+                }
+            }
         }
     }
 }
 
 @Composable
 fun CurrentWeather(forecast: Forecast, imperialUnits: Boolean) {
-    var detailsExpanded by remember { mutableStateOf(false) }
-    Row {
-        Column(
-            modifier = Modifier
-                .padding(start = 16.dp, top = 16.dp)
-                .weight(1f)
+    val context = LocalContext.current
+    Column {
+        Row(
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.SpaceBetween,
         ) {
-            Text(
-                text = forecast.location,
-                style = MaterialTheme.typography.titleMedium
-            )
-            Text(
-                modifier = Modifier.padding(vertical = 8.dp),
-                text = convertTemperature(
-                    imperialUnits = imperialUnits,
-                    temp = forecast.temperature
-                ).toString() + "°",
-                style = MaterialTheme.typography.headlineLarge,
-            )
-            Text(
-                text = forecast.condition,
-                style = MaterialTheme.typography.bodySmall
-            )
-
+            val latLonRegexp =
+                remember { Regex("^\\d{1,2}°\\d{1,2}'[NS] \\d{1,3}°\\d{1,2}'[EW]\$") }
+            val isLatLon = latLonRegexp.matches(forecast.location)
             Row(
                 modifier = Modifier
-                    .clickable(onClick = {
-                        detailsExpanded = !detailsExpanded
-                    })
-                    .padding(vertical = 12.dp)
+                    .weight(1f)
+                    .padding(top = 16.dp, start = 16.dp, end = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
             ) {
+                Icon(
+                    imageVector = if (isLatLon) Icons.Rounded.MyLocation else Icons.Rounded.LocationCity,
+                    contentDescription = null
+                )
+                Spacer(modifier = Modifier.padding(4.dp))
                 Text(
-                    text = stringResource(id = if (detailsExpanded) R.string.weather_widget_hide_details else R.string.weather_widget_show_details),
-                    style = MaterialTheme.typography.labelMedium,
-                    color = MaterialTheme.colorScheme.primary
+                    text = forecast.location,
+                    style = MaterialTheme.typography.titleMedium
                 )
             }
-
-            AnimatedVisibility(visible = detailsExpanded) {
-                Column(
-                    modifier = Modifier.fillMaxWidth()
-                ) {
-                    if (forecast.humidity >= 0) {
-                        Text(
-                            stringResource(
-                                id = R.string.weather_details_humidity,
-                                "${forecast.humidity.roundToInt()} %"
-                            ),
-                            style = MaterialTheme.typography.bodySmall,
-                        )
-                    }
-                    Text(
-                        stringResource(
-                            id = R.string.weather_details_wind,
-                            formatWindSpeed(imperialUnits, forecast)
-                        ),
-                        style = MaterialTheme.typography.bodySmall,
-                    )
-                    val precipitation = formatPrecipitation(imperialUnits, forecast)
-                    if (precipitation != null) {
-                        Text(
-                            stringResource(
-                                id = R.string.weather_details_precipitation,
-                                precipitation
-                            ),
-                            style = MaterialTheme.typography.bodySmall,
-                        )
-                    }
-                }
-            }
-        }
-        Column(
-            verticalArrangement = Arrangement.SpaceBetween,
-            horizontalAlignment = Alignment.End
-        ) {
-            val context = LocalContext.current
-            AnimatedWeatherIcon(
-                modifier = Modifier.padding(all = 16.dp),
-                icon = weatherIconById(forecast.icon),
-                night = forecast.night
-            )
-            Spacer(modifier = Modifier.weight(1f))
             Surface(
-                shape = MaterialTheme.shapes.extraSmall.copy(bottomEnd = CornerSize(0), topEnd = CornerSize(0)),
-                color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
-                modifier = Modifier.align(Alignment.End)
-
+                shape = MaterialTheme.shapes.extraSmall.copy(
+                    topStart = CornerSize(0),
+                    topEnd = CornerSize(0),
+                    bottomEnd = CornerSize(0)
+                ),
+                color = MaterialTheme.colorScheme.secondaryContainer,
             ) {
-
                 Text(
                     text = "${forecast.provider} (${
                         formatTime(
@@ -232,9 +207,7 @@ fun CurrentWeather(forecast: Forecast, imperialUnits: Boolean) {
                             forecast.updateTime
                         )
                     })",
-                    style = TextStyle(
-                        fontSize = 10.sp
-                    ),
+                    style = MaterialTheme.typography.bodySmall.copy(fontSize = 8.sp),
                     modifier = Modifier
                         .clickable(onClick = {
                             val intent = Intent(Intent.ACTION_VIEW).apply {
@@ -243,104 +216,109 @@ fun CurrentWeather(forecast: Forecast, imperialUnits: Boolean) {
                             }
                             context.tryStartActivity(intent)
                         })
-                        .padding(start = 8.dp, top = 4.dp, bottom = 4.dp, end = 16.dp)
+                        .padding(start = 8.dp, top = 4.dp, bottom = 4.dp, end = 12.dp)
                 )
             }
         }
-    }
-}
-
-@Composable
-fun WeatherDetailRow(title: String, value: String) {
-    Row {
-        Text(
-            text = title,
-            modifier = Modifier,//.padding(end = 8.dp),
-            style = MaterialTheme.typography.bodySmall,
-        )
-        Text(
-            text = value,
-            style = MaterialTheme.typography.bodySmall,
-        )
-    }
-}
-
-@Composable
-fun WeatherDaySelector(
-    modifier: Modifier = Modifier,
-    days: List<DailyForecast>,
-    selectedDay: DailyForecast,
-    onDaySelected: (Int) -> Unit,
-    imperialUnits: Boolean
-) {
-    val menuExpanded = remember { mutableStateOf(false) }
-    val dateFormat = SimpleDateFormat("EEE")
-    Box(modifier = modifier, contentAlignment = Alignment.CenterStart) {
-        TextButton(
-            onClick = {
-                menuExpanded.value = true
-            },
-            colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.onSurface)
+        Row(
+            modifier = Modifier.padding(start = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
         ) {
-            WeatherIcon(icon = weatherIconById(selectedDay.icon))
             Text(
-                text = dateFormat.format(selectedDay.timestamp),
-                style = MaterialTheme.typography.titleSmall,
-                modifier = Modifier
-                    .align(Alignment.CenterVertically)
-                    .padding(start = 16.dp, end = 8.dp)
+                modifier = Modifier.weight(1f),
+                text = convertTemperature(
+                    imperialUnits = imperialUnits,
+                    temp = forecast.temperature
+                ).toString() + "°",
+                style = MaterialTheme.typography.headlineMedium,
             )
             Text(
-                text = "${
-                    convertTemperature(
-                        imperialUnits,
-                        selectedDay.minTemp
-                    )
-                }° / ${convertTemperature(imperialUnits, selectedDay.maxTemp)}°",
-                style = MaterialTheme.typography.titleSmall,
-                modifier = Modifier.align(Alignment.CenterVertically)
+                text = forecast.condition,
+                style = MaterialTheme.typography.bodySmall
             )
-            Icon(
-                imageVector = Icons.Rounded.ArrowDropDown,
-                contentDescription = null
+            AnimatedWeatherIcon(
+                modifier = Modifier.padding(
+                    start = 8.dp,
+                    end = 8.dp
+                ),
+                icon = weatherIconById(forecast.icon),
+                night = forecast.night
             )
         }
-        DropdownMenu(
-            expanded = menuExpanded.value,
-            offset = DpOffset(0.dp, 0.dp),
-            onDismissRequest = {
-                menuExpanded.value = false
-            }) {
+    }
 
-            for ((i, d) in days.withIndex()) {
-                DropdownMenuItem(
-                    onClick = {
-                        menuExpanded.value = false
-                        onDaySelected(i)
+    val validHumidity = forecast.humidity != -1.0
+    val validWindDirection = forecast.windDirection != -1.0
+    val validWindSpeed = forecast.windSpeed != -1.0
+    val validPrecip = forecast.precipitation != -1.0
+
+    Row(
+        modifier = Modifier
+            .padding(start = 16.dp, end = 16.dp, bottom = 12.dp, top = 8.dp)
+            .fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        if (validHumidity) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    imageVector = Icons.Rounded.HumidityPercentage,
+                    modifier = Modifier.size(20.dp),
+                    contentDescription = null
+                )
+                Spacer(modifier = Modifier.padding(3.dp))
+                Text(
+                    text = "${forecast.humidity.roundToInt()} %",
+                    style = MaterialTheme.typography.labelMedium
+                )
+            }
+        }
+        if (validWindDirection || validWindSpeed) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                if (validWindDirection) {
+                    // windDirection is "fromDirection"; Wind (arrow) blows into opposite direction
+                    val angle by animateFloatAsState(forecast.windDirection.toFloat() + 180f)
+                    Icon(
+                        imageVector = Icons.Rounded.North,
+                        modifier = Modifier
+                            .rotate(angle)
+                            .size(20.dp),
+                        contentDescription = null
+                    )
+                } else {
+                    Icon(
+                        imageVector = Icons.Rounded.WindPower,
+                        contentDescription = null,
+                        modifier = Modifier.size(20.dp)
+                    )
+                }
+                Spacer(modifier = Modifier.padding(3.dp))
+                Text(
+                    text = if (validWindSpeed) {
+                        formatWindSpeed(imperialUnits, forecast)
+                    } else {
+                        windDirectionAsWord(forecast.windDirection)
                     },
-                    text = {
-                        Row {
-                            WeatherIcon(icon = weatherIconById(d.icon))
-                            Text(
-                                text = dateFormat.format(d.timestamp),
-                                style = MaterialTheme.typography.titleSmall,
-                                softWrap = false,
-                                modifier = Modifier
-                                    .padding(start = 16.dp, end = 8.dp)
-                                    .weight(1f)
-                            )
-                            Text(
-                                text = "${
-                                    convertTemperature(
-                                        imperialUnits,
-                                        d.minTemp
-                                    )
-                                }° / ${convertTemperature(imperialUnits, d.maxTemp)}°",
-                                softWrap = false,
-                                style = MaterialTheme.typography.titleSmall,
-                            )
-                        }
-                    }
+                    style = MaterialTheme.typography.labelMedium
+                )
+            }
+        }
+        if (validPrecip) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    imageVector = Icons.Rounded.Rain,
+                    modifier = Modifier.size(20.dp),
+                    contentDescription = null
+                )
+                Spacer(modifier = Modifier.padding(3.dp))
+                Text(
+                    text = formatPrecipitation(imperialUnits, forecast),
+                    style = MaterialTheme.typography.labelMedium
                 )
             }
         }
@@ -355,65 +333,111 @@ fun WeatherTimeSelector(
     imperialUnits: Boolean,
     onTimeSelected: (Int) -> Unit
 ) {
-    val menuExpanded = remember { mutableStateOf(false) }
-
     val dateFormat = remember { DateFormat.getTimeInstance(DateFormat.SHORT) }
 
-    Box(
-        modifier = modifier,
-        contentAlignment = Alignment.CenterEnd
+    val listState = rememberLazyListState()
+    LazyRow(
+        state = listState,
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
     ) {
-        TextButton(
-            onClick = {
-                menuExpanded.value = true
-            },
-            colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.onSurface)
-        ) {
-            Text(
-                text = dateFormat.format(selectedForecast.timestamp),
-                style = MaterialTheme.typography.titleSmall,
-            )
-            Icon(
-                imageVector = Icons.Rounded.ArrowDropDown,
-                contentDescription = null
-            )
-        }
-        DropdownMenu(
-            expanded = menuExpanded.value,
-            offset = DpOffset(0.dp, 0.dp),
-            onDismissRequest = {
-                menuExpanded.value = false
-            }) {
-
-            for ((i, fc) in forecasts.withIndex()) {
-                DropdownMenuItem(
-                    onClick = {
-                        menuExpanded.value = false
-                        onTimeSelected(i)
+        itemsIndexed(forecasts, key = { idx, _ -> idx }) { idx, fc ->
+            val backgroundAlpha = if (fc == selectedForecast) 0.2f else 0.0f
+            Surface(
+                shape = MaterialTheme.shapes.extraSmall,
+                modifier = Modifier
+                    .widthIn(min = 56.dp)
+                    .graphicsLayer {
+                        alpha = listState.layoutInfo.blendIntoViewScale(idx, 2f)
                     },
-                    text = {
-                        Row {
-                            WeatherIcon(icon = weatherIconById(fc.icon), night = fc.night)
-                            Text(
-                                text = dateFormat.format(fc.timestamp),
-                                style = MaterialTheme.typography.titleSmall,
-                                softWrap = false,
-                                modifier = Modifier
-                                    .align(Alignment.CenterVertically)
-                                    .padding(start = 16.dp, end = 8.dp)
-                                    .weight(1f)
-                            )
-                            Text(
-                                text = "${convertTemperature(imperialUnits, fc.temperature)}°",
-                                softWrap = false,
-                                style = MaterialTheme.typography.titleSmall,
-                                modifier = Modifier.align(Alignment.CenterVertically)
-                            )
-                        }
-                    }
-                )
+                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(backgroundAlpha)
+            ) {
+                Column(
+                    modifier = Modifier
+                        .clickable { onTimeSelected(idx) }
+                        .padding(6.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.SpaceEvenly
+                ) {
+                    WeatherIcon(
+                        modifier = Modifier.align(Alignment.CenterHorizontally),
+                        icon = weatherIconById(fc.icon),
+                        night = fc.night
+                    )
+                    Text(
+                        text = dateFormat.format(fc.timestamp),
+                        style = MaterialTheme.typography.labelMedium,
+                        softWrap = false,
+                        modifier = Modifier.align(Alignment.CenterHorizontally)
+                    )
+                    Text(
+                        text = "${convertTemperature(imperialUnits, fc.temperature)}°",
+                        softWrap = false,
+                        style = MaterialTheme.typography.labelMedium,
+                        modifier = Modifier.align(Alignment.CenterHorizontally)
+                    )
+                }
             }
+        }
+    }
+}
 
+@Composable
+fun WeatherDaySelector(
+    modifier: Modifier = Modifier,
+    days: List<DailyForecast>,
+    selectedDay: DailyForecast,
+    onDaySelected: (Int) -> Unit,
+    imperialUnits: Boolean
+) {
+    val dateFormat = SimpleDateFormat("EEE")
+
+    val listState = rememberLazyListState()
+    LazyRow(
+        state = listState,
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
+    ) {
+        itemsIndexed(days, key = { idx, _ -> idx }) { idx, day ->
+            val backgroundAlpha = if (day == selectedDay) 0.2f else 0.0f
+
+            Surface(
+                modifier = Modifier.graphicsLayer {
+                    alpha = listState.layoutInfo.blendIntoViewScale(idx, 0.5f)
+                },
+                shape = MaterialTheme.shapes.extraSmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(backgroundAlpha)
+            ) {
+                Row(
+                    modifier = Modifier
+                        .clickable { onDaySelected(idx) }
+                        .padding(6.dp),
+                    horizontalArrangement = Arrangement.SpaceAround,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    WeatherIcon(icon = weatherIconById(day.icon))
+                    Text(
+                        text = dateFormat.format(day.timestamp),
+                        style = MaterialTheme.typography.labelMedium,
+                        softWrap = false,
+                        modifier = Modifier.padding(start = 12.dp, end = 6.dp)
+                    )
+                    Text(
+                        text = "${
+                            convertTemperature(
+                                imperialUnits,
+                                day.minTemp
+                            )
+                        }° / ${convertTemperature(imperialUnits, day.maxTemp)}°",
+                        softWrap = false,
+                        style = MaterialTheme.typography.labelMedium,
+                    )
+                }
+            }
         }
     }
 }
@@ -432,24 +456,16 @@ private fun formatWindSpeed(imperialUnits: Boolean, forecast: Forecast): String
     val speedValue = formatter.format(forecast.windSpeed * if (imperialUnits) 0.621371 else 1.0)
     val speedUnit =
         stringResource(id = if (imperialUnits) R.string.unit_mile_per_hour_symbol else R.string.unit_meter_per_second_symbol)
-    return "$speedValue $speedUnit • ${windDirectionAsWord(forecast.windDirection)}"
+    return "$speedValue $speedUnit"
 }
 
 @Composable
-private fun formatPrecipitation(imperialUnits: Boolean, forecast: Forecast): String? {
+private fun formatPrecipitation(imperialUnits: Boolean, forecast: Forecast): String {
     val formatter = if (imperialUnits) DecimalFormat("#.##") else DecimalFormat("#.#")
     val precipUnit =
         if (imperialUnits) stringResource(id = R.string.unit_inch_symbol) else stringResource(id = R.string.unit_millimeter_symbol)
-    if (forecast.precipProbability >= 0 && forecast.precipitation >= 0.0) {
-        return "${formatter.format(forecast.precipitation)} $precipUnit • ${forecast.precipProbability} %"
-    }
-    if (forecast.precipProbability >= 0) {
-        return "${forecast.precipProbability} %"
-    }
-    if (forecast.precipitation >= 0.0) {
-        return "${formatter.format(forecast.precipitation)} $precipUnit"
-    }
-    return null
+
+    return "${formatter.format(forecast.precipitation)} $precipUnit"
 }
 
 @Composable
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidgetWM.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidgetWM.kt
index b2060f1c..0ebf2e5b 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidgetWM.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/weather/WeatherWidgetWM.kt
@@ -106,6 +106,8 @@ class WeatherWidgetWM : ViewModel(), KoinComponent {
 
     val imperialUnits = dataStore.data.map { it.weather.imperialUnits }.asLiveData()
 
+    val compactMode = dataStore.data.map { it.weather.compactMode }.asLiveData()
+
     fun selectDay(index: Int) {
         selectedDayIndex = min(index, forecasts.lastIndex)
     }
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreen.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreen.kt
index 53a13320..e5e90094 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreen.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreen.kt
@@ -55,6 +55,14 @@ fun WeatherWidgetSettingsScreen() {
                         viewModel.setImperialUnits(it)
                     }
                 )
+                val compactMode by viewModel.compactMode.observeAsState(false)
+                SwitchPreference(
+                    title = stringResource(R.string.preference_compact_mode),
+                    summary = stringResource(R.string.preference_compact_mode_summary),
+                    value = compactMode,
+                    onValueChanged = {
+                        viewModel.setCompactMode(it)
+                    })
             }
         }
         item {
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreenVM.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreenVM.kt
index 26c48d3b..dd8c2b6c 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreenVM.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/weatherwidget/WeatherWidgetSettingsScreenVM.kt
@@ -36,6 +36,17 @@ class WeatherWidgetSettingsScreenVM : ViewModel(), KoinComponent {
         }
     }
 
+    val compactMode = dataStore.data.map { it.weather.compactMode }.asLiveData()
+    fun setCompactMode(compactMode: Boolean) {
+        viewModelScope.launch {
+            dataStore.updateData {
+                it.toBuilder()
+                    .setWeather(it.weather.toBuilder().setCompactMode(compactMode))
+                    .build()
+            }
+        }
+    }
+
     val weatherProvider = repository.selectedProvider.asLiveData()
     fun setWeatherProvider(provider: WeatherSettings.WeatherProvider) {
         repository.selectProvider(provider)
diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt
index 26bb2b28..72efd83a 100644
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.coerceAtMost
 import androidx.compose.ui.unit.dp
@@ -136,9 +137,15 @@ fun colorSchemeAsState(
             if (Build.VERSION.SDK_INT >= 31) {
                 return remember(darkTheme) {
                     mutableStateOf(
-                        if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(
-                            context
-                        )
+                        if (darkTheme) {
+                            dynamicDarkColorScheme(context).copy(
+                                outlineVariant = Color(context.getColor(android.R.color.system_neutral2_700))
+                            )
+                        } else {
+                            dynamicLightColorScheme(context).copy(
+                                outlineVariant = Color(context.getColor(android.R.color.system_neutral2_200))
+                            )
+                        }
                     )
                 }
             }
diff --git a/core/i18n/src/main/res/values-de/strings.xml b/core/i18n/src/main/res/values-de/strings.xml
index 54bf1568..4cbbd654 100644
--- a/core/i18n/src/main/res/values-de/strings.xml
+++ b/core/i18n/src/main/res/values-de/strings.xml
@@ -43,6 +43,8 @@
     <string name="preference_location">Standort</string>
     <string name="preference_imperial_units_summary">Grad Fahrenheit und Meilen pro Stunde verwenden</string>
     <string name="preference_imperial_units">Imperiale Einheiten</string>
+    <string name="preference_compact_mode">Kompaktmodus</string>
+    <string name="preference_compact_mode_summary">Anzeige von täglich- und stündlichen Vorhersagen ausblenden</string>
     <string name="preference_category_debug">Debug</string>
     <string name="wikipedia_url">https://de.wikipedia.org</string>
     <string name="wikipedia_source">Aus Wikipedia</string>
diff --git a/core/i18n/src/main/res/values/strings.xml b/core/i18n/src/main/res/values/strings.xml
index cfd7a861..7c8c1a72 100644
--- a/core/i18n/src/main/res/values/strings.xml
+++ b/core/i18n/src/main/res/values/strings.xml
@@ -450,6 +450,8 @@
     <string name="preference_location">Location</string>
     <string name="preference_imperial_units_summary">Use degrees Fahrenheit and miles per hour</string>
     <string name="preference_imperial_units">Imperial units</string>
+    <string name="preference_compact_mode">Compact mode</string>
+    <string name="preference_compact_mode_summary">Hide rows displaying hourly and daily forecasts</string>
     <string name="preference_category_debug">Debug</string>
     <string name="preference_category_debug_tools">Tools</string>
     <string name="preference_debug_cleanup_database">Clean up database</string>
diff --git a/core/preferences/src/main/proto/settings.proto b/core/preferences/src/main/proto/settings.proto
index 757e4b8b..71d51873 100644
--- a/core/preferences/src/main/proto/settings.proto
+++ b/core/preferences/src/main/proto/settings.proto
@@ -92,6 +92,7 @@ message Settings {
     }
     WeatherProvider provider = 1;
     bool imperial_units = 2;
+    bool compact_mode = 3;
   }
   WeatherSettings weather = 5;
 
diff --git a/libs/material-color-utilities/src/main/java/blend/Blend.java b/libs/material-color-utilities/src/main/java/blend/Blend.java
new file mode 100644
index 00000000..39642db4
--- /dev/null
+++ b/libs/material-color-utilities/src/main/java/blend/Blend.java
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This file is automatically generated. Do not modify it.
+
+package blend;
+
+import hct.Cam16;
+import hct.Hct;
+import utils.ColorUtils;
+import utils.MathUtils;
+
+/** Functions for blending in HCT and CAM16. */
+public class Blend {
+    private Blend() {}
+
+    /**
+     * Blend the design color's HCT hue towards the key color's HCT hue, in a way that leaves the
+     * original color recognizable and recognizably shifted towards the key color.
+     *
+     * @param designColor ARGB representation of an arbitrary color.
+     * @param sourceColor ARGB representation of the main theme color.
+     * @return The design color with a hue shifted towards the system's color, a slightly
+     *     warmer/cooler variant of the design color's hue.
+     */
+    public static int harmonize(int designColor, int sourceColor) {
+        Hct fromHct = Hct.fromInt(designColor);
+        Hct toHct = Hct.fromInt(sourceColor);
+        double differenceDegrees = MathUtils.differenceDegrees(fromHct.getHue(), toHct.getHue());
+        double rotationDegrees = Math.min(differenceDegrees * 0.5, 15.0);
+        double outputHue =
+                MathUtils.sanitizeDegreesDouble(
+                        fromHct.getHue()
+                                + rotationDegrees * MathUtils.rotationDirection(fromHct.getHue(), toHct.getHue()));
+        return Hct.from(outputHue, fromHct.getChroma(), fromHct.getTone()).toInt();
+    }
+
+    /**
+     * Blends hue from one color into another. The chroma and tone of the original color are
+     * maintained.
+     *
+     * @param from ARGB representation of color
+     * @param to ARGB representation of color
+     * @param amount how much blending to perform; 0.0 >= and <= 1.0
+     * @return from, with a hue blended towards to. Chroma and tone are constant.
+     */
+    public static int hctHue(int from, int to, double amount) {
+        int ucs = cam16Ucs(from, to, amount);
+        Cam16 ucsCam = Cam16.fromInt(ucs);
+        Cam16 fromCam = Cam16.fromInt(from);
+        Hct blended = Hct.from(ucsCam.getHue(), fromCam.getChroma(), ColorUtils.lstarFromArgb(from));
+        return blended.toInt();
+    }
+
+    /**
+     * Blend in CAM16-UCS space.
+     *
+     * @param from ARGB representation of color
+     * @param to ARGB representation of color
+     * @param amount how much blending to perform; 0.0 >= and <= 1.0
+     * @return from, blended towards to. Hue, chroma, and tone will change.
+     */
+    public static int cam16Ucs(int from, int to, double amount) {
+        Cam16 fromCam = Cam16.fromInt(from);
+        Cam16 toCam = Cam16.fromInt(to);
+        double fromJ = fromCam.getJstar();
+        double fromA = fromCam.getAstar();
+        double fromB = fromCam.getBstar();
+        double toJ = toCam.getJstar();
+        double toA = toCam.getAstar();
+        double toB = toCam.getBstar();
+        double jstar = fromJ + (toJ - fromJ) * amount;
+        double astar = fromA + (toA - fromA) * amount;
+        double bstar = fromB + (toB - fromB) * amount;
+        return Cam16.fromUcs(jstar, astar, bstar).toInt();
+    }
+}
\ No newline at end of file