Add support for dark mode for images

README.md

@@ -35,7 +35,7 @@ implement all you UI in Kotlin with Jetpack Compose and MOKO resources.
 - **Strings, Plurals** to access the corresponding resources from common code;
 - **Colors** with light/dark mode support;
 - **Compose Multiplatform** support;
-- **Images** support (`svg`, `png`, `jpg`);
+- **Images** support (`svg`, `png`, `jpg`) with light/dark mode support;
 - **Fonts** support (`ttf`, `otf`);
 - **Files** support (as `raw` or `assets` for android);
 - **StringDesc** for lifecycle-aware access to resources and unified localization on both platforms;
@@ -561,6 +561,13 @@ Then we get an autogenerated `MR.images.home_black_18` `ImageResource` in code.
 - Android: `imageView.setImageResource(image.drawableResId)`
 - iOS: `imageView.image = image.toUIImage()`
 
+#### dark mode
+
+To support Dark Mode images, you can add _dark and optionally _light to the name of an image. Make sure the rest of the name matches the corresponding light mode image:
+
+- `car.svg`
+- `car_dark.svg`
+
 #### svg
 
 The Image generator also supports `svg` files.

resources-generator/src/main/kotlin/dev/icerock/gradle/generator/Appearance.kt

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2024 IceRock MAG Inc. Use of this source code is governed by the Apache 2.0 license.
+ */
+
+package dev.icerock.gradle.generator
+
+internal enum class Appearance {
+    LIGHT,
+    DARK
+}

resources-generator/src/main/kotlin/dev/icerock/gradle/generator/ImagesGenerator.kt

@@ -14,6 +14,7 @@ import dev.icerock.gradle.generator.apple.AppleImagesGenerator
 import dev.icerock.gradle.generator.common.CommonImagesGenerator
 import dev.icerock.gradle.generator.js.JsImagesGenerator
 import dev.icerock.gradle.generator.jvm.JvmImagesGenerator
+import dev.icerock.gradle.utils.withoutAppearance
 import dev.icerock.gradle.utils.withoutScale
 import org.gradle.api.file.FileTree
 import org.gradle.api.logging.Logger
@@ -37,6 +38,7 @@ abstract class ImagesGenerator(
             val key = file
                 .nameWithoutExtension
                 .withoutScale
+                .withoutAppearance
 
             "$key.${file.extension}"
         }

resources-generator/src/main/kotlin/dev/icerock/gradle/generator/android/AndroidImagesGenerator.kt

@@ -8,9 +8,11 @@ import com.android.ide.common.vectordrawable.Svg2Vector
 import com.squareup.kotlinpoet.ClassName
 import com.squareup.kotlinpoet.CodeBlock
 import com.squareup.kotlinpoet.KModifier
+import dev.icerock.gradle.generator.Appearance
 import dev.icerock.gradle.generator.ImagesGenerator
 import dev.icerock.gradle.generator.NOPObjectBodyExtendable
 import dev.icerock.gradle.generator.ObjectBodyExtendable
+import dev.icerock.gradle.utils.appearance
 import dev.icerock.gradle.utils.svg
 import org.gradle.api.file.FileTree
 import org.gradle.api.logging.Logger
@@ -47,7 +49,12 @@ class AndroidImagesGenerator(
             files.map { key to it }
         }.forEach { (key, file) ->
             val scale = file.nameWithoutExtension.substringAfter("@").substringBefore("x")
-            val drawableDirName = "drawable" + when (scale) {
+
+            val themeRes = when(file.nameWithoutExtension.appearance) {
+                Appearance.LIGHT, null -> ""
+                Appearance.DARK -> "-night"
+            }
+            val densityRes = when (scale) {
                 "0.75" -> "-ldpi"
                 "1" -> "-mdpi"
                 "1.5" -> "-hdpi"
@@ -63,6 +70,7 @@ class AndroidImagesGenerator(
                     }
                 }
             }
+            val drawableDirName = "drawable$themeRes$densityRes"
 
             val drawableDir = File(resourcesGenerationDir, drawableDirName)
             val processedKey = processKey(key)

resources-generator/src/main/kotlin/dev/icerock/gradle/generator/apple/AppleImagesGenerator.kt

@@ -9,6 +9,7 @@ import com.squareup.kotlinpoet.KModifier
 import dev.icerock.gradle.generator.ImagesGenerator
 import dev.icerock.gradle.generator.ObjectBodyExtendable
 import dev.icerock.gradle.generator.apple.AppleMRGenerator.Companion.ASSETS_DIR_NAME
+import dev.icerock.gradle.utils.appearance
 import dev.icerock.gradle.utils.nameWithoutScale
 import dev.icerock.gradle.utils.scale
 import dev.icerock.gradle.utils.svg
@@ -71,6 +72,14 @@ class AppleImagesGenerator(
                         if (!file.svg) {
                             put("scale", JsonPrimitive(file.scale))
                         }
+                        file.nameWithoutExtension.appearance?.let { appearance ->
+                            put("appearances", buildJsonArray {
+                                add(buildJsonObject {
+                                    put("appearance", JsonPrimitive("luminosity"))
+                                    put("value", JsonPrimitive(appearance.name.lowercase()))
+                                })
+                            })
+                        }
                     }
                 }.forEach { add(it) }
             }

resources-generator/src/main/kotlin/dev/icerock/gradle/generator/jsJvmCommon/GenerateImageUtil.kt

@@ -4,6 +4,8 @@
 
 package dev.icerock.gradle.generator.jsJvmCommon
 
+import dev.icerock.gradle.generator.Appearance
+import dev.icerock.gradle.utils.appearance
 import java.io.File
 
 fun generateHighestQualityImageResources(
@@ -14,7 +16,7 @@ fun generateHighestQualityImageResources(
     val imagesDir = File(resourcesGenerationDir, imagesDirName).apply { mkdirs() }
 
     keyFileMap.forEach { (key, files) ->
-        val hqFile = files.maxByOrNull {
+        val hqFile = files.filter { it.nameWithoutExtension.appearance != Appearance.DARK }.maxByOrNull {
             it.nameWithoutExtension.substringAfter("@").substringBefore("x").toDouble()
         } ?: return
         hqFile.copyTo(File(imagesDir, "$key.${hqFile.extension}"))

resources-generator/src/main/kotlin/dev/icerock/gradle/utils/StringExt.kt

@@ -4,6 +4,8 @@
 
 package dev.icerock.gradle.utils
 
+import dev.icerock.gradle.generator.Appearance
+
 /**
  * Replace all new lines including space characters before and after.
  * This is required to remove the IDE indentation.
@@ -14,3 +16,16 @@ internal fun String.removeLineWraps(): String {
 
 internal val String.withoutScale get() =
     substringBefore("@")
+
+internal val String.appearance: Appearance?
+    get() = Appearance.values().firstOrNull { this.contains("_${it.name}", true) }
+
+internal val String.withoutAppearance: String
+    get() {
+        var result = this
+        Appearance.values()
+            .forEach {
+                result = result.replace("_${it.name}", "", true)
+            }
+        return result
+    }