diff --git a/app/src/main/java/com/huanchengfly/tieba/post/ui/widgets/compose/Images.kt b/app/src/main/java/com/huanchengfly/tieba/post/ui/widgets/compose/Images.kt
index 340f3347..cd119ab3 100644
--- a/app/src/main/java/com/huanchengfly/tieba/post/ui/widgets/compose/Images.kt
+++ b/app/src/main/java/com/huanchengfly/tieba/post/ui/widgets/compose/Images.kt
@@ -16,23 +16,22 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.graphics.ColorMatrix
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import com.github.panpf.sketch.compose.AsyncImage
 import com.github.panpf.sketch.request.Depth
 import com.github.panpf.sketch.request.DisplayRequest
+import com.github.panpf.sketch.transform.MaskTransformation
 import com.huanchengfly.tieba.post.R
 import com.huanchengfly.tieba.post.arch.ImmutableHolder
 import com.huanchengfly.tieba.post.goToActivity
 import com.huanchengfly.tieba.post.models.protos.PhotoViewData
+import com.huanchengfly.tieba.post.ui.common.theme.compose.ExtendedTheme
 import com.huanchengfly.tieba.post.ui.page.photoview.PhotoViewActivity
 import com.huanchengfly.tieba.post.ui.page.photoview.PhotoViewActivity.Companion.EXTRA_PHOTO_VIEW_DATA
 import com.huanchengfly.tieba.post.utils.ImageUtil
 import com.huanchengfly.tieba.post.utils.NetworkUtil
-import com.huanchengfly.tieba.post.utils.ThemeUtil
 import com.huanchengfly.tieba.post.utils.appPreferences
 
 fun shouldLoadImage(context: Context, skipNetworkCheck: Boolean): Boolean {
@@ -59,31 +58,24 @@ fun NetworkImage(
     var shouldLoad by remember { mutableStateOf(shouldLoadImage(context, skipNetworkCheck)) }
     val enableClick = remember(photoViewData, shouldLoad) { photoViewData != null || !shouldLoad }
 
-    val request = remember(imageUri, shouldLoad) {
+    val colorMask =
+        if (ExtendedTheme.colors.isNightMode && context.appPreferences.imageDarkenWhenNightMode) {
+            MaskTransformation(0x35000000)
+        } else null
+
+    val request = remember(imageUri, shouldLoad, colorMask) {
         DisplayRequest(context, imageUri) {
             placeholder(ImageUtil.getPlaceHolder(context, 0))
             crossfade()
             if (!shouldLoad) {
                 depth(Depth.LOCAL)
             }
+            if (colorMask != null) {
+                transformations(colorMask)
+            }
         }
     }
 
-    val currentTheme by remember { ThemeUtil.themeState }
-    val isNightMode = remember(currentTheme) { ThemeUtil.isNightMode(currentTheme) }
-    val colorFilter = if (isNightMode && context.appPreferences.imageDarkenWhenNightMode) {
-        ColorFilter.colorMatrix(
-            ColorMatrix(
-                floatArrayOf(
-                    1f, 0f, 0f, 0f, -35f,
-                    0f, 1f, 0f, 0f, -35f,
-                    0f, 0f, 1f, 0f, -35f,
-                    0f, 0f, 0f, 1f, 0f
-                )
-            )
-        )
-    } else null
-
     LongClickMenu(
         enabled = enableClick,
         indication = null,
@@ -117,7 +109,6 @@ fun NetworkImage(
             modifier = Modifier.fillMaxSize(),
             contentDescription = contentDescription,
             contentScale = contentScale,
-            colorFilter = colorFilter,
         )
     }
 }