diff --git a/.run/Run Desktop.run.xml b/.run/Run Desktop.run.xml
index 5e16d4e320..5feb2204bf 100644
--- a/.run/Run Desktop.run.xml	
+++ b/.run/Run Desktop.run.xml	
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2024 OpenAni and contributors.
+  ~ Copyright (C) 2024-2025 OpenAni and contributors.
   ~
   ~ 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
   ~ Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
diff --git a/app/shared/app-data/src/commonMain/kotlin/data/models/preference/ThemeSettings.kt b/app/shared/app-data/src/commonMain/kotlin/data/models/preference/ThemeSettings.kt
index 8a97f4f2fd..31300017db 100644
--- a/app/shared/app-data/src/commonMain/kotlin/data/models/preference/ThemeSettings.kt
+++ b/app/shared/app-data/src/commonMain/kotlin/data/models/preference/ThemeSettings.kt
@@ -28,6 +28,7 @@ data class ThemeSettings(
     val useDynamicTheme: Boolean = false, // only supported on Android with Build.VERSION.SDK_INT >= 31
     // TODO: Default "true" if supported (on Android, Build.VERSION.SDK_INT >= 31)
     val useBlackBackground: Boolean = false,
+    val useDynamicSubjectPageTheme: Boolean = false,
     val seedColorValue: ULong = DefaultSeedColor.value,
     @Suppress("PropertyName") @Transient val _placeholder: Int = 0,
 ) {
diff --git a/app/shared/ui-foundation/build.gradle.kts b/app/shared/ui-foundation/build.gradle.kts
index 3cb9b441f2..2c6399fa97 100644
--- a/app/shared/ui-foundation/build.gradle.kts
+++ b/app/shared/ui-foundation/build.gradle.kts
@@ -29,7 +29,7 @@ kotlin {
         api(libs.kotlinx.collections.immutable)
         implementation(libs.kotlinx.serialization.protobuf)
         implementation(projects.app.shared.placeholder)
-        
+
         api(libs.coil.compose.core)
         api(libs.coil.svg)
         api(libs.coil.network.ktor2)
@@ -52,7 +52,7 @@ kotlin {
         implementation(projects.utils.bbcode)
         implementation(libs.constraintlayout.compose)
         api(projects.app.shared.pagingCompose)
-        
+
         api(libs.koin.core)
 
         api(libs.materialkolor)
diff --git a/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/AsyncImage.android.kt b/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/AsyncImage.android.kt
index 3c99da9c8a..9e7dfc3edd 100644
--- a/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/AsyncImage.android.kt
+++ b/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/AsyncImage.android.kt
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 OpenAni and contributors.
+ * Copyright (C) 2024-2025 OpenAni and contributors.
  *
  * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
  * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
diff --git a/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/ImageUtils.android.kt b/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/ImageUtils.android.kt
new file mode 100644
index 0000000000..918200bb0e
--- /dev/null
+++ b/app/shared/ui-foundation/src/androidMain/kotlin/ui/foundation/ImageUtils.android.kt
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2024-2025 OpenAni and contributors.
+ *
+ * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
+ * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
+ *
+ * https://github.com/open-ani/ani/blob/main/LICENSE
+ */
+
+package me.him188.ani.app.ui.foundation
+
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asAndroidBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.core.graphics.scale
+import coil3.Image
+import coil3.toBitmap
+
+actual fun Image.toComposeImageBitmap(): ImageBitmap {
+    return this.toBitmap().asImageBitmap()
+}
+
+actual fun ImageBitmap.resize(
+    width: Int,
+    height: Int,
+): ImageBitmap {
+    return this.asAndroidBitmap().scale(width, height).asImageBitmap()
+}
diff --git a/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/ImageUtils.kt b/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/ImageUtils.kt
new file mode 100644
index 0000000000..105de3e4d3
--- /dev/null
+++ b/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/ImageUtils.kt
@@ -0,0 +1,256 @@
+/*
+ * Copyright (C) 2024-2025 OpenAni and contributors.
+ *
+ * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
+ * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
+ *
+ * https://github.com/open-ani/ani/blob/main/LICENSE
+ */
+
+package me.him188.ani.app.ui.foundation
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ImageBitmap
+import coil3.Image
+import kotlin.math.pow
+
+expect fun Image.toComposeImageBitmap(): ImageBitmap
+
+expect fun ImageBitmap.resize(
+    width: Int,
+    height: Int,
+): ImageBitmap
+
+/**
+ * Determine the main color in a [ImageBitmap].
+ *
+ * @receiver The [ImageBitmap] to extract colors from.
+ * @return The main color.
+ */
+fun ImageBitmap.themeColor(): Color {
+    val width = this.width
+    val height = this.height
+
+    val pixels = IntArray(width * height)
+    this.readPixels(
+        buffer = pixels,
+        startX = 0,
+        startY = 0,
+        width = width,
+        height = height,
+        bufferOffset = 0,
+        stride = width,
+    )
+
+    // 将像素转换为带权重的 LAB 点
+    val points = mutableListOf<WeightedLabPoint>()
+    val centerX = width / 2.0
+    val centerY = height / 2.0
+    val maxDistance = kotlin.math.sqrt(centerX * centerX + centerY * centerY)
+
+    for (y in 0 until height) {
+        for (x in 0 until width) {
+            val pixel = pixels[y * width + x]
+            if ((pixel shr 24) and 0xFF <= 128) continue
+
+            // 计算到图片中心的距离作为权重
+            val distanceFromCenter = kotlin.math.sqrt(
+                (x - centerX) * (x - centerX) + (y - centerY) * (y - centerY),
+            )
+            val weight = 1.0 - (distanceFromCenter / maxDistance) * 0.5 // 中心权重最高为1，边缘为0.5
+
+            // 转换 RGB 到 LAB
+            val rgb = RGBColor(
+                r = (pixel shr 16) and 0xFF,
+                g = (pixel shr 8) and 0xFF,
+                b = pixel and 0xFF,
+            )
+            val lab = rgb.toLab()
+            points.add(WeightedLabPoint(lab, weight))
+        }
+    }
+
+    if (points.isEmpty()) return Color.Black
+
+    // 使用 K-means++ 进行聚类
+    val k = 5
+    val clusters = kMeansPlusPlus(points, k, maxIterations = 15)
+
+    // 评估每个聚类的重要性（考虑点数量和权重）
+    val dominantCluster = clusters.maxByOrNull { cluster ->
+        cluster.points.sumOf { it.weight } * cluster.points.size
+    } ?: return Color.Black
+
+    // 将主导聚类的中心点转回 RGB 并返回
+    val (r, g, b) = dominantCluster.centroid.toRGB()
+    return Color(
+        red = r / 255f,
+        green = g / 255f,
+        blue = b / 255f,
+    )
+}
+
+private data class RGBColor(val r: Int, val g: Int, val b: Int) {
+    fun toLab(): LabColor {
+        // RGB to XYZ
+        var r = this.r / 255.0
+        var g = this.g / 255.0
+        var b = this.b / 255.0
+
+        // Gamma correction
+        r = if (r > 0.04045) ((r + 0.055) / 1.055).pow(2.4) else r / 12.92
+        g = if (g > 0.04045) ((g + 0.055) / 1.055).pow(2.4) else g / 12.92
+        b = if (b > 0.04045) ((b + 0.055) / 1.055).pow(2.4) else b / 12.92
+
+        r *= 100
+        g *= 100
+        b *= 100
+
+        val x = r * 0.4124 + g * 0.3576 + b * 0.1805
+        val y = r * 0.2126 + g * 0.7152 + b * 0.0722
+        val z = r * 0.0193 + g * 0.1192 + b * 0.9505
+
+        // XYZ to Lab
+        return LabColor.fromXYZ(x, y, z)
+    }
+}
+
+private data class LabColor(val l: Double, val a: Double, val b: Double) {
+    fun distanceTo(other: LabColor): Double {
+        val dl = l - other.l
+        val da = a - other.a
+        val db = b - other.b
+        return kotlin.math.sqrt(dl * dl + da * da + db * db)
+    }
+
+    fun toRGB(): RGBColor {
+        // Lab to XYZ
+        val y = (l + 16) / 116
+        val x = a / 500 + y
+        val z = y - b / 200
+
+        val x3 = x * x * x
+        val y3 = y * y * y
+        val z3 = z * z * z
+
+        val xr = if (x3 > 0.008856) x3 else (x - 16.0 / 116) / 7.787
+        val yr = if (y3 > 0.008856) y3 else (y - 16.0 / 116) / 7.787
+        val zr = if (z3 > 0.008856) z3 else (z - 16.0 / 116) / 7.787
+
+        // XYZ to RGB
+        var r = xr * 3.2406 - yr * 1.5372 - zr * 0.4986
+        var g = -xr * 0.9689 + yr * 1.8758 + zr * 0.0415
+        var b = xr * 0.0557 - yr * 0.2040 + zr * 1.0570
+
+        // Gamma correction
+        r = if (r > 0.0031308) 1.055 * r.pow(1 / 2.4) - 0.055 else 12.92 * r
+        g = if (g > 0.0031308) 1.055 * g.pow(1 / 2.4) - 0.055 else 12.92 * g
+        b = if (b > 0.0031308) 1.055 * b.pow(1 / 2.4) - 0.055 else 12.92 * b
+
+        return RGBColor(
+            r = (r * 255).toInt().coerceIn(0, 255),
+            g = (g * 255).toInt().coerceIn(0, 255),
+            b = (b * 255).toInt().coerceIn(0, 255),
+        )
+    }
+
+    companion object {
+        fun fromXYZ(x: Double, y: Double, z: Double): LabColor {
+            val xr = x / 95.047
+            val yr = y / 100.0
+            val zr = z / 108.883
+
+            val fx = if (xr > 0.008856) xr.pow(1.0 / 3) else (7.787 * xr) + 16.0 / 116
+            val fy = if (yr > 0.008856) yr.pow(1.0 / 3) else (7.787 * yr) + 16.0 / 116
+            val fz = if (zr > 0.008856) zr.pow(1.0 / 3) else (7.787 * zr) + 16.0 / 116
+
+            val l = (116 * fy) - 16
+            val a = 500 * (fx - fy)
+            val b = 200 * (fy - fz)
+
+            return LabColor(l, a, b)
+        }
+    }
+}
+
+private data class WeightedLabPoint(
+    val lab: LabColor,
+    val weight: Double
+)
+
+private data class Cluster(
+    var centroid: LabColor,
+    val points: MutableList<WeightedLabPoint> = mutableListOf()
+)
+
+private fun kMeansPlusPlus(
+    points: List<WeightedLabPoint>,
+    k: Int,
+    maxIterations: Int
+): List<Cluster> {
+    // K-means++ 初始化
+    val centroids = mutableListOf<LabColor>()
+    val random = kotlin.random.Random.Default
+
+    // 随机选择第一个中心点
+    centroids.add(points.random().lab)
+
+    // 选择剩余的中心点
+    while (centroids.size < k) {
+        var totalDistance = 0.0
+        val distances = points.map { point ->
+            val minDistance = centroids.minOf { centroid ->
+                point.lab.distanceTo(centroid)
+            }
+            totalDistance += minDistance * minDistance * point.weight
+            totalDistance
+        }
+
+        // 按距离的平方选择下一个中心点
+        val threshold = random.nextDouble() * totalDistance
+        val nextCentroid = points[distances.indexOfFirst { it >= threshold }].lab
+        centroids.add(nextCentroid)
+    }
+
+    val clusters = centroids.map { Cluster(it) }
+
+    // K-means 迭代
+    var iteration = 0
+    var changed: Boolean
+
+    do {
+        clusters.forEach { it.points.clear() }
+
+        // 分配点到最近的聚类
+        for (point in points) {
+            val nearestCluster = clusters.minByOrNull {
+                point.lab.distanceTo(it.centroid)
+            } ?: continue
+            nearestCluster.points.add(point)
+        }
+
+        changed = false
+
+        // 更新聚类中心
+        for (cluster in clusters) {
+            if (cluster.points.isEmpty()) continue
+
+            // 计算加权平均值作为新的中心点
+            val totalWeight = cluster.points.sumOf { it.weight }
+            val newCentroid = LabColor(
+                l = cluster.points.sumOf { it.lab.l * it.weight } / totalWeight,
+                a = cluster.points.sumOf { it.lab.a * it.weight } / totalWeight,
+                b = cluster.points.sumOf { it.lab.b * it.weight } / totalWeight,
+            )
+
+            if (newCentroid.distanceTo(cluster.centroid) > 0.1) {
+                changed = true
+                cluster.centroid = newCentroid
+            }
+        }
+
+        iteration++
+    } while (changed && iteration < maxIterations)
+
+    return clusters
+}
diff --git a/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/AppTheme.kt b/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/AppTheme.kt
index 4c2bf71745..9d1f4a2555 100644
--- a/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/AppTheme.kt
+++ b/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/AppTheme.kt
@@ -13,6 +13,8 @@ package me.him188.ani.app.ui.foundation.theme
 
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.ContentTransform
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.FiniteAnimationSpec
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.isSystemInDarkTheme
@@ -31,6 +33,11 @@ import androidx.compose.ui.unit.IntOffset
 import me.him188.ani.app.data.models.preference.DarkMode
 import me.him188.ani.app.data.models.preference.ThemeSettings
 import me.him188.ani.app.ui.foundation.animation.LocalAniMotionScheme
+import me.him188.ani.app.ui.foundation.theme.AniThemeDefaults.pageContentBackgroundColor
+
+val LocalThemeSettings = compositionLocalOf<ThemeSettings> {
+    error("LocalThemeSettings not provided")
+}
 
 /**
  * Create a [ColorScheme] based on the current [ThemeSettings].
@@ -191,11 +198,6 @@ object EasingDurations {
     const val standardAccelerate = 200
 }
 
-
-val LocalThemeSettings = compositionLocalOf<ThemeSettings> {
-    error("LocalThemeSettings not provided")
-}
-
 fun modifyColorSchemeForBlackBackground(
     colorScheme: ColorScheme,
     isDark: Boolean,
@@ -216,17 +218,47 @@ fun modifyColorSchemeForBlackBackground(
     } else colorScheme
 }
 
-/**
- * Transform system-bar visual effects.
- * Currently only takes effect on Android.
- *
- * @param isDark system theme, if `true`, system bar will be visually white.
- */
 @Composable
-expect fun SystemBarColorEffect(
-    isDark: Boolean = when (LocalThemeSettings.current.darkMode) {
-        DarkMode.LIGHT -> false
-        DarkMode.DARK -> true
-        DarkMode.AUTO -> isSystemInDarkTheme()
-    },
-)
\ No newline at end of file
+fun animateColorScheme(
+    targetColorScheme: ColorScheme,
+    animationSpec: AnimationSpec<Color> = tween(EasingDurations.standard),
+): ColorScheme {
+    return ColorScheme(
+        primary = animateColorAsState(targetColorScheme.primary, animationSpec).value,
+        onPrimary = animateColorAsState(targetColorScheme.onPrimary, animationSpec).value,
+        primaryContainer = animateColorAsState(targetColorScheme.primaryContainer, animationSpec).value,
+        onPrimaryContainer = animateColorAsState(targetColorScheme.onPrimaryContainer, animationSpec).value,
+        inversePrimary = animateColorAsState(targetColorScheme.inversePrimary, animationSpec).value,
+        secondary = animateColorAsState(targetColorScheme.secondary, animationSpec).value,
+        onSecondary = animateColorAsState(targetColorScheme.onSecondary, animationSpec).value,
+        secondaryContainer = animateColorAsState(targetColorScheme.secondaryContainer, animationSpec).value,
+        onSecondaryContainer = animateColorAsState(targetColorScheme.onSecondaryContainer, animationSpec).value,
+        tertiary = animateColorAsState(targetColorScheme.tertiary, animationSpec).value,
+        onTertiary = animateColorAsState(targetColorScheme.onTertiary, animationSpec).value,
+        tertiaryContainer = animateColorAsState(targetColorScheme.tertiaryContainer, animationSpec).value,
+        onTertiaryContainer = animateColorAsState(targetColorScheme.onTertiaryContainer, animationSpec).value,
+        background = animateColorAsState(targetColorScheme.background, animationSpec).value,
+        onBackground = animateColorAsState(targetColorScheme.onBackground, animationSpec).value,
+        surface = animateColorAsState(targetColorScheme.surface, animationSpec).value,
+        onSurface = animateColorAsState(targetColorScheme.onSurface, animationSpec).value,
+        surfaceVariant = animateColorAsState(targetColorScheme.surfaceVariant, animationSpec).value,
+        onSurfaceVariant = animateColorAsState(targetColorScheme.onSurfaceVariant, animationSpec).value,
+        surfaceTint = animateColorAsState(targetColorScheme.surfaceTint, animationSpec).value,
+        inverseSurface = animateColorAsState(targetColorScheme.inverseSurface, animationSpec).value,
+        inverseOnSurface = animateColorAsState(targetColorScheme.inverseOnSurface, animationSpec).value,
+        surfaceBright = animateColorAsState(targetColorScheme.surfaceBright, animationSpec).value,
+        surfaceDim = animateColorAsState(targetColorScheme.surfaceDim, animationSpec).value,
+        surfaceContainer = animateColorAsState(targetColorScheme.surfaceContainer, animationSpec).value,
+        surfaceContainerHigh = animateColorAsState(targetColorScheme.surfaceContainerHigh, animationSpec).value,
+        surfaceContainerHighest = animateColorAsState(targetColorScheme.surfaceContainerHighest, animationSpec).value,
+        surfaceContainerLow = animateColorAsState(targetColorScheme.surfaceContainerLow, animationSpec).value,
+        surfaceContainerLowest = animateColorAsState(targetColorScheme.surfaceContainerLowest, animationSpec).value,
+        error = animateColorAsState(targetColorScheme.error, animationSpec).value,
+        onError = animateColorAsState(targetColorScheme.onError, animationSpec).value,
+        errorContainer = animateColorAsState(targetColorScheme.errorContainer, animationSpec).value,
+        onErrorContainer = animateColorAsState(targetColorScheme.onErrorContainer, animationSpec).value,
+        outline = animateColorAsState(targetColorScheme.outline, animationSpec).value,
+        outlineVariant = animateColorAsState(targetColorScheme.outlineVariant, animationSpec).value,
+        scrim = animateColorAsState(targetColorScheme.scrim, animationSpec).value,
+    )
+}
diff --git a/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/MaterialThemeFromImage.kt b/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/MaterialThemeFromImage.kt
new file mode 100644
index 0000000000..64add085f7
--- /dev/null
+++ b/app/shared/ui-foundation/src/commonMain/kotlin/ui/foundation/theme/MaterialThemeFromImage.kt
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2024-2025 OpenAni and contributors.
+ *
+ * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
+ * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
+ *
+ * https://github.com/open-ani/ani/blob/main/LICENSE
+ */
+
+package me.him188.ani.app.ui.foundation.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.ImageBitmap
+import com.materialkolor.PaletteStyle
+import com.materialkolor.dynamicColorScheme
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import me.him188.ani.app.data.models.preference.DarkMode
+import me.him188.ani.app.ui.foundation.resize
+import me.him188.ani.app.ui.foundation.themeColor
+
+/**
+ * Generate a [MaterialTheme] from a [ImageBitmap].
+ *
+ * @receiver The [ImageBitmap] to generate from.
+ * @return Generated [MaterialTheme]
+ */
+@Composable
+fun MaterialThemeFromImage(
+    bitmap: ImageBitmap?,
+    content: @Composable () -> Unit
+) {
+    val themeSettings = LocalThemeSettings.current
+    val isDark = when (themeSettings.darkMode) {
+        DarkMode.LIGHT -> false
+        DarkMode.DARK -> true
+        DarkMode.AUTO -> isSystemInDarkTheme()
+    }
+    val useBlackBackground = themeSettings.useBlackBackground
+    var colorScheme by remember { mutableStateOf<ColorScheme?>(null) }
+
+    LaunchedEffect(bitmap) {
+        if (bitmap == null) return@LaunchedEffect
+
+        val computedColorScheme = withContext(Dispatchers.Default) {
+            val resizedBitmap = bitmap.resize(64, 64)
+            val seedColor = resizedBitmap.themeColor()
+            dynamicColorScheme(
+                primary = seedColor,
+                isDark = isDark,
+                isAmoled = useBlackBackground,
+                style = PaletteStyle.TonalSpot,
+                modifyColorScheme = { colorScheme ->
+                    modifyColorSchemeForBlackBackground(
+                        colorScheme,
+                        isDark,
+                        useBlackBackground,
+                    )
+                },
+            )
+        }
+        colorScheme = computedColorScheme
+    }
+
+    MaterialTheme(
+        colorScheme = animateColorScheme(
+            targetColorScheme = colorScheme ?: MaterialTheme.colorScheme,
+        ),
+        content = content,
+    )
+}
diff --git a/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/AsyncImage.skiko.kt b/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/AsyncImage.skiko.kt
index 465ec9e9e9..506be62829 100644
--- a/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/AsyncImage.skiko.kt
+++ b/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/AsyncImage.skiko.kt
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 OpenAni and contributors.
+ * Copyright (C) 2024-2025 OpenAni and contributors.
  *
  * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
  * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
diff --git a/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/ImageUtils.skiko.kt b/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/ImageUtils.skiko.kt
new file mode 100644
index 0000000000..55aedc6e01
--- /dev/null
+++ b/app/shared/ui-foundation/src/skikoMain/kotlin/ui/foundation/ImageUtils.skiko.kt
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2024-2025 OpenAni and contributors.
+ *
+ * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
+ * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
+ *
+ * https://github.com/open-ani/ani/blob/main/LICENSE
+ */
+
+package me.him188.ani.app.ui.foundation
+
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asComposeImageBitmap
+import androidx.compose.ui.graphics.asSkiaBitmap
+import androidx.compose.ui.graphics.toComposeImageBitmap
+import coil3.Image
+import coil3.toBitmap
+import org.jetbrains.skia.ImageInfo
+import org.jetbrains.skia.Paint
+import org.jetbrains.skia.Rect
+import org.jetbrains.skia.Surface
+import org.jetbrains.skia.Image as SkiaImage
+
+actual fun Image.toComposeImageBitmap(): ImageBitmap {
+    return this.toBitmap().asComposeImageBitmap()
+}
+
+actual fun ImageBitmap.resize(
+    width: Int,
+    height: Int,
+): ImageBitmap {
+    // written by o3-mini
+
+    val skiaBitmap = this.asSkiaBitmap()
+
+    // 创建目标 Surface，通过指定 ImageInfo 来设定输出图片的尺寸和颜色配置
+    val imageInfo = ImageInfo.makeN32Premul(width, height)
+    val surface = Surface.makeRaster(imageInfo)
+    val canvas = surface.canvas
+
+    // 将原始位图转换为 SkiaImage 以便绘制
+    val originalImage = SkiaImage.makeFromBitmap(skiaBitmap)
+    // 定义原始图片的源矩形（使用整个图片）
+    val srcRect = Rect(0f, 0f, skiaBitmap.width.toFloat(), skiaBitmap.height.toFloat())
+    // 定义目标矩形，表示缩放后图片在画布上的位置和大小
+    val destRect = Rect(0f, 0f, width.toFloat(), height.toFloat())
+
+    // 将原始图片绘制到目标矩形中，自动缩放
+    canvas.drawImageRect(originalImage, srcRect, destRect, Paint())
+
+    // 获取缩放后图片的快照，并转换为 Compose 的 ImageBitmap
+    return surface.makeImageSnapshot().toComposeImageBitmap()
+}
diff --git a/app/shared/ui-settings/src/commonMain/kotlin/ui/settings/tabs/theme/ThemePreferences.kt b/app/shared/ui-settings/src/commonMain/kotlin/ui/settings/tabs/theme/ThemePreferences.kt
index 5bbe8efe37..8eabfa7fc7 100644
--- a/app/shared/ui-settings/src/commonMain/kotlin/ui/settings/tabs/theme/ThemePreferences.kt
+++ b/app/shared/ui-settings/src/commonMain/kotlin/ui/settings/tabs/theme/ThemePreferences.kt
@@ -134,6 +134,15 @@ fun SettingsScope.ThemeGroup(
             title = { Text("高对比度深色主题") },
             description = { Text("深色模式使用纯黑背景，在 AMOLED 屏幕使用纯黑背景可以省电") },
         )
+
+        SwitchItem(
+            checked = themeSettings.useDynamicSubjectPageTheme,
+            onCheckedChange = { checked ->
+                state.update(themeSettings.copy(useDynamicSubjectPageTheme = checked))
+            },
+            title = { Text("条目详情页使用动态主题") },
+            description = { Text("根据条目的图片，使用自适应颜色（注意，对详情页性能有较大影响，建议不要在低端设备使用该功能") },
+        )
     }
 
     Box(
diff --git a/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/SubjectDetailsPage.kt b/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/SubjectDetailsPage.kt
index 87148d414c..d194e32bb0 100644
--- a/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/SubjectDetailsPage.kt
+++ b/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/SubjectDetailsPage.kt
@@ -10,8 +10,11 @@
 package me.him188.ani.app.ui.subject.details
 
 import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -62,6 +65,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalDensity
@@ -70,6 +74,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.paging.compose.collectAsLazyPagingItemsWithLifecycle
+import coil3.compose.AsyncImagePainter
 import kotlinx.coroutines.launch
 import me.him188.ani.app.data.models.episode.findCacheStatus
 import me.him188.ani.app.data.models.subject.SubjectCollectionStats
@@ -98,6 +103,9 @@ import me.him188.ani.app.ui.foundation.navigation.BackHandler
 import me.him188.ani.app.ui.foundation.pagerTabIndicatorOffset
 import me.him188.ani.app.ui.foundation.rememberImageViewerHandler
 import me.him188.ani.app.ui.foundation.theme.AniThemeDefaults
+import me.him188.ani.app.ui.foundation.theme.LocalThemeSettings
+import me.him188.ani.app.ui.foundation.theme.MaterialThemeFromImage
+import me.him188.ani.app.ui.foundation.toComposeImageBitmap
 import me.him188.ani.app.ui.foundation.widgets.LocalToaster
 import me.him188.ani.app.ui.richtext.RichTextDefaults
 import me.him188.ani.app.ui.search.LoadErrorCard
@@ -194,15 +202,6 @@ private fun SubjectDetailsScreen(
     val browserNavigator = LocalUriHandler.current
 
     var showSelectEpisode by rememberSaveable { mutableStateOf(false) }
-    if (showSelectEpisode) {
-        EpisodeListDialog(
-            state.episodeListState,
-            title = {
-                Text(state.info?.displayName ?: "")
-            },
-            onDismissRequest = { showSelectEpisode = false },
-        )
-    }
     val connectedScrollState = rememberConnectedScrollState()
 
     // image viewer
@@ -211,112 +210,143 @@ private fun SubjectDetailsScreen(
 
     val placeholderModifier = Modifier.placeholder(state.showPlaceholder)
     val presentation by state.presentationFlow.collectAsStateWithLifecycle()
-    SubjectDetailsScreenLayout(
-        state.subjectId,
-        state.info,
-        isPlaceholder = state.showPlaceholder,
-        seasonTags = {
-            SubjectDetailsDefaults.SeasonTag(
-                airDate = state.info?.airDate ?: PackedDate.Invalid,
-                airingLabelState = state.airingLabelState,
-                placeholderModifier,
-            )
-        },
-        collectionData = {
-            SubjectDetailsDefaults.CollectionData(
-                collectionStats = state.info?.collectionStats ?: SubjectCollectionStats.Zero,
-                placeholderModifier,
+
+    val themeSettings = LocalThemeSettings.current
+    var bitmap by remember { mutableStateOf<ImageBitmap?>(null) }
+    MaterialThemeFromImage(bitmap) {
+        if (showSelectEpisode) {
+            EpisodeListDialog(
+                state.episodeListState,
+                title = {
+                    Text(state.info?.displayName ?: "")
+                },
+                onDismissRequest = { showSelectEpisode = false },
             )
-        },
-        collectionActions = {
-            if (state.authState.isKnownExpired) {
-                val navigator = LocalNavigator.current
-                OutlinedButton(
-                    onClick = { state.authState.launchAuthorize(navigator) },
-                    modifier = placeholderModifier,
-                ) {
-                    Text("登录后可收藏")
-                }
-            } else {
-                EditableSubjectCollectionTypeButton(
-                    state.editableSubjectCollectionTypeState,
+        }
+
+        SubjectDetailsScreenLayout(
+            subjectId = state.subjectId,
+            info = state.info,
+            isPlaceholder = state.showPlaceholder,
+            seasonTags = {
+                SubjectDetailsDefaults.SeasonTag(
+                    airDate = state.info?.airDate ?: PackedDate.Invalid,
+                    airingLabelState = state.airingLabelState,
                     placeholderModifier,
                 )
-            }
-        },
-        rating = {
-            EditableRating(
-                state.editableRatingState,
-                placeholderModifier,
-            )
-        },
-        selectEpisodeButton = {
-            SubjectDetailsDefaults.SelectEpisodeButtons(
-                state.subjectProgressState,
-                episodeCacheStatus = { presentation.episodeCacheInfo.findCacheStatus(it) },
-                onShowEpisodeList = { showSelectEpisode = true },
-                onPlay = onPlay,
-                placeholderModifier,
-            )
-        },
-        connectedScrollState = connectedScrollState,
-        modifier,
-        showTopBar = showTopBar,
-        showBlurredBackground = showBlurredBackground,
-        windowInsets = windowInsets,
-        navigationIcon = navigationIcon,
-    ) { isPlaceholder, paddingValues ->
-        if (isPlaceholder) {
-            PlaceholderSubjectDetailsContentPager(paddingValues)
-        } else {
-            SubjectDetailsContentPager(
-                paddingValues,
-                connectedScrollState,
-                detailsTab = { contentPadding ->
-                    if (state.info == null) return@SubjectDetailsContentPager
-                    SubjectDetailsDefaults.DetailsTab(
-                        info = state.info,
-                        staff = state.staffPager.collectAsLazyPagingItemsWithLifecycle(),
-                        exposedStaff = state.exposedStaffPager.collectAsLazyPagingItemsWithLifecycle(),
-                        totalStaffCount = state.totalStaffCountState.value,
-                        characters = state.charactersPager.collectAsLazyPagingItemsWithLifecycle(),
-                        exposedCharacters = state.exposedCharactersPager.collectAsLazyPagingItemsWithLifecycle(),
-                        totalCharactersCount = state.totalCharactersCountState.value,
-                        relatedSubjects = state.relatedSubjectsPager.collectAsLazyPagingItemsWithLifecycle(),
-                        Modifier
-                            .nestedScrollWorkaround(state.detailsTabLazyListState, connectedScrollState)
-                            .nestedScroll(connectedScrollState.nestedScrollConnection),
-                        state.detailsTabLazyListState,
-                        contentPadding = contentPadding,
-                    )
-                },
-                commentsTab = { contentPadding ->
-                    SubjectDetailsDefaults.SubjectCommentColumn(
-                        state = state.subjectCommentState,
-                        onClickUrl = {
-                            RichTextDefaults.checkSanityAndOpen(it, browserNavigator, toaster)
-                        },
-                        onClickImage = { imageViewer.viewImage(it) },
-                        connectedScrollState,
-                        Modifier.fillMaxSize(),
-                        lazyStaggeredGridState = state.commentTabLazyStaggeredGridState,
-                        contentPadding = contentPadding,
+            },
+            collectionData = {
+                SubjectDetailsDefaults.CollectionData(
+                    collectionStats = state.info?.collectionStats ?: SubjectCollectionStats.Zero,
+                    placeholderModifier,
+                )
+            },
+            collectionActions = {
+                if (state.authState.isKnownExpired) {
+                    val navigator = LocalNavigator.current
+                    OutlinedButton(
+                        onClick = { state.authState.launchAuthorize(navigator) },
+                        modifier = placeholderModifier,
+                    ) {
+                        Text("登录后可收藏")
+                    }
+                } else {
+                    EditableSubjectCollectionTypeButton(
+                        state.editableSubjectCollectionTypeState,
+                        placeholderModifier,
                     )
-                },
-                discussionsTab = {
-                    LazyColumn(
-                        Modifier.fillMaxSize()
-                            // TODO: Add nestedScrollWorkaround when we implement this tab
-                            .nestedScroll(connectedScrollState.nestedScrollConnection),
+                }
+            },
+            rating = {
+                EditableRating(
+                    state.editableRatingState,
+                    placeholderModifier,
+                )
+            },
+            selectEpisodeButton = {
+                SubjectDetailsDefaults.SelectEpisodeButtons(
+                    state.subjectProgressState,
+                    episodeCacheStatus = { presentation.episodeCacheInfo.findCacheStatus(it) },
+                    onShowEpisodeList = { showSelectEpisode = true },
+                    onPlay = onPlay,
+                    placeholderModifier,
+                )
+            },
+            connectedScrollState = connectedScrollState,
+            modifier,
+            showTopBar = showTopBar,
+            showBlurredBackground = showBlurredBackground,
+            windowInsets = windowInsets,
+            navigationIcon = navigationIcon,
+            onCoverImageSuccess = { success ->
+                if (themeSettings.useDynamicSubjectPageTheme) {
+                    bitmap = success.result.image.toComposeImageBitmap()
+                }
+            },
+        ) { isPlaceholder, paddingValues ->
+            if (isPlaceholder) {
+                PlaceholderSubjectDetailsContentPager(paddingValues)
+            } else {
+                Box {
+                    AnimatedVisibility(
+                        visible = state.showPlaceholder,
+                        enter = EnterTransition.None,
+                        exit = fadeOut(LocalAniMotionScheme.current.feedItemFadeOutSpec),
                     ) {
-                        item {
-                            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
-                                Text("即将上线, 敬请期待", Modifier.padding(16.dp))
-                            }
-                        }
+                        PlaceholderSubjectDetailsContentPager(paddingValues)
                     }
-                },
-            )
+                    if (state.showPlaceholder) return@SubjectDetailsScreenLayout
+
+                    SubjectDetailsContentPager(
+                        paddingValues,
+                        connectedScrollState,
+                        detailsTab = { contentPadding ->
+                            if (state.info == null) return@SubjectDetailsContentPager
+                            SubjectDetailsDefaults.DetailsTab(
+                                info = state.info,
+                                staff = state.staffPager.collectAsLazyPagingItemsWithLifecycle(),
+                                exposedStaff = state.exposedStaffPager.collectAsLazyPagingItemsWithLifecycle(),
+                                totalStaffCount = state.totalStaffCountState.value,
+                                characters = state.charactersPager.collectAsLazyPagingItemsWithLifecycle(),
+                                exposedCharacters = state.exposedCharactersPager.collectAsLazyPagingItemsWithLifecycle(),
+                                totalCharactersCount = state.totalCharactersCountState.value,
+                                relatedSubjects = state.relatedSubjectsPager.collectAsLazyPagingItemsWithLifecycle(),
+                                Modifier
+                                    .nestedScrollWorkaround(state.detailsTabLazyListState, connectedScrollState)
+                                    .nestedScroll(connectedScrollState.nestedScrollConnection),
+                                state.detailsTabLazyListState,
+                                contentPadding = contentPadding,
+                            )
+                        },
+                        commentsTab = { contentPadding ->
+                            SubjectDetailsDefaults.SubjectCommentColumn(
+                                state = state.subjectCommentState,
+                                onClickUrl = {
+                                    RichTextDefaults.checkSanityAndOpen(it, browserNavigator, toaster)
+                                },
+                                onClickImage = { imageViewer.viewImage(it) },
+                                connectedScrollState,
+                                Modifier.fillMaxSize(),
+                                lazyStaggeredGridState = state.commentTabLazyStaggeredGridState,
+                                contentPadding = contentPadding,
+                            )
+                        },
+                        discussionsTab = {
+                            LazyColumn(
+                                Modifier.fillMaxSize()
+                                    // TODO: Add nestedScrollWorkaround when we implement this tab
+                                    .nestedScroll(connectedScrollState.nestedScrollConnection),
+                            ) {
+                                item {
+                                    Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+                                        Text("即将上线, 敬请期待", Modifier.padding(16.dp))
+                                    }
+                                }
+                            }
+                        },
+                    )
+                }
+            }
         }
     }
 
@@ -391,6 +421,7 @@ fun SubjectDetailsScreenLayout(
     showBlurredBackground: Boolean = true,
     windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
     navigationIcon: @Composable () -> Unit = {},
+    onCoverImageSuccess: (AsyncImagePainter.State.Success) -> Unit = {},
     content: @Composable (isPlaceholder: Boolean, contentPadding: PaddingValues) -> Unit,
 ) {
     val backgroundColor = AniThemeDefaults.pageContentBackgroundColor
@@ -485,11 +516,12 @@ fun SubjectDetailsScreenLayout(
                             collectionAction = collectionActions,
                             selectEpisodeButton = selectEpisodeButton,
                             rating = rating,
-                            Modifier
+                            modifier = Modifier
                                 .connectedScrollTarget(connectedScrollState)
                                 .fillMaxWidth()
                                 .ifThen(!showTopBar) { padding(top = windowSizeClass.paneVerticalPadding) }
                                 .padding(horizontal = windowSizeClass.paneHorizontalPadding),
+                            onCoverImageSuccess = onCoverImageSuccess,
                         )
                     }
                 }
diff --git a/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/components/SubjectDetailsHeader.kt b/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/components/SubjectDetailsHeader.kt
index 420261142f..162385713d 100644
--- a/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/components/SubjectDetailsHeader.kt
+++ b/app/shared/ui-subject/src/commonMain/kotlin/ui/subject/details/components/SubjectDetailsHeader.kt
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 OpenAni and contributors.
+ * Copyright (C) 2024-2025 OpenAni and contributors.
  *
  * 此源代码的使用受 GNU AFFERO GENERAL PUBLIC LICENSE version 3 许可证的约束, 可以在以下链接找到该许可证.
  * Use of this source code is governed by the GNU AGPLv3 license, which can be found at the following link.
@@ -43,6 +43,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImagePainter
 import me.him188.ani.app.data.models.subject.SubjectInfo
 import me.him188.ani.app.platform.currentAniBuildConfig
 import me.him188.ani.app.ui.foundation.AsyncImage
@@ -65,6 +66,7 @@ internal fun SubjectDetailsHeader(
     collectionAction: @Composable () -> Unit,
     selectEpisodeButton: @Composable BoxScope.() -> Unit,
     rating: @Composable () -> Unit,
+    onCoverImageSuccess: (AsyncImagePainter.State.Success) -> Unit = {},
     modifier: Modifier = Modifier,
 ) {
     val clipboardManager = LocalClipboardManager.current
@@ -108,6 +110,7 @@ internal fun SubjectDetailsHeader(
             collectionAction = collectionAction,
             selectEpisodeButton = selectEpisodeButton,
             rating = rating,
+            onCoverImageSuccess = onCoverImageSuccess,
             modifier = modifier,
         )
     } else {
@@ -121,6 +124,7 @@ internal fun SubjectDetailsHeader(
             collectionAction = collectionAction,
             selectEpisodeButton = selectEpisodeButton,
             rating = rating,
+            onSuccess = onCoverImageSuccess,
             modifier = modifier,
         )
     }
@@ -139,6 +143,7 @@ fun SubjectDetailsHeaderCompact(
     collectionAction: @Composable () -> Unit,
     selectEpisodeButton: @Composable BoxScope.() -> Unit,
     rating: @Composable () -> Unit,
+    onSuccess: (AsyncImagePainter.State.Success) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier) {
@@ -154,6 +159,7 @@ fun SubjectDetailsHeaderCompact(
                         .height(imageWidth / COVER_WIDTH_TO_HEIGHT_RATIO),
                     contentScale = ContentScale.Crop,
                     placeholder = if (currentAniBuildConfig.isDebug) remember { ColorPainter(Color.Gray) } else null,
+                    onSuccess = onSuccess,
                 )
             }
 
@@ -223,6 +229,7 @@ fun SubjectDetailsHeaderWide(
     collectionAction: @Composable () -> Unit,
     selectEpisodeButton: @Composable BoxScope.() -> Unit,
     rating: @Composable () -> Unit,
+    onCoverImageSuccess: (AsyncImagePainter.State.Success) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier) {
@@ -241,6 +248,7 @@ fun SubjectDetailsHeaderWide(
                         .height(imageWidth / COVER_WIDTH_TO_HEIGHT_RATIO),
                     contentScale = ContentScale.Crop,
                     placeholder = if (currentAniBuildConfig.isDebug) remember { ColorPainter(Color.Gray) } else null,
+                    onSuccess = onCoverImageSuccess,
                 )
             }
 
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 9419ef84a8..d6620ee975 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -65,7 +65,7 @@ mannodermaus-junit5 = "1.6.0" # https://github.com/mannodermaus/android-junit5
 stately-common = "2.0.7"
 vlcj = "4.8.2"
 jsystemthemedetector = "3.8"
-materialkolor = "2.0.0"
+materialkolor = "2.0.2"
 mockito = "5.12.0"
 mockito-kotlin = "5.4.0"