Theme code backgrounds in markdown

Change-Id: Ia37dc51961e990e5b7a2c9c6890da01bcf076dd6

library/ui-styles/src/main/res/values/attrs_sc.xml

@@ -16,6 +16,7 @@
         <attr name="dense_dropdown_text_input" format="reference" />
 
         <attr name="message_highlight_bg_color" format="color" />
+        <attr name="code_block_bg_color" format="color" />
 
         <attr name="user_color_pl_100" format="color" />
         <attr name="user_color_pl_95" format="color" />

library/ui-styles/src/main/res/values/colors_sc.xml

@@ -76,6 +76,10 @@
     <color name="user_color_sc_pl_0">#8bc34a</color>
     -->
 
+    <!-- Code background colors -->
+    <color name="code_background_sc">#121212</color>
+    <color name="code_background_sc_light">#10000000</color>
+
     <!-- Exposed Element colors -->
     <!-- This is actually not an SC color, but the one found in element for ic_material_play_circle PNGs -->
     <color name="element_accent_pale">#76cfa6</color>

library/ui-styles/src/main/res/values/theme_dark.xml

@@ -125,6 +125,7 @@
         <item name="colorAccentPale">@color/element_accent_pale</item>
         <item name="dense_dropdown_text_input">@style/Widget.Vector.TextInputLayout.Dense.ExposedDropdownMenu.Dark.SC</item>
         <item name="message_highlight_bg_color">?vctr_header_background</item>
+        <item name="code_block_bg_color">#19ffffff</item>
         <item name="user_color_pl_0">@color/user_color_element_pl_0</item>
         <item name="user_color_pl_1">@color/user_color_element_pl_1</item>
         <item name="user_color_pl_50">@color/user_color_element_pl_50</item>

library/ui-styles/src/main/res/values/theme_light.xml

@@ -125,6 +125,7 @@
         <item name="colorAccentPale">@color/element_accent_pale</item>
         <item name="dense_dropdown_text_input">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu</item>
         <item name="message_highlight_bg_color">?vctr_header_background</item>
+        <item name="code_block_bg_color">#19000000</item>
         <item name="user_color_pl_0">@color/user_color_element_pl_0</item>
         <item name="user_color_pl_1">@color/user_color_element_pl_1</item>
         <item name="user_color_pl_50">@color/user_color_element_pl_50</item>

library/ui-styles/src/main/res/values/theme_sc.xml

@@ -86,6 +86,7 @@
         <item name="riotx_unread_unimportant_room_badge">@color/background_floating_sc</item>
         <item name="colorAccentPale">@color/accent_sc_pale</item>
         <item name="message_highlight_bg_color">@color/accent_sc_alpha25</item>
+        <item name="code_block_bg_color">@color/code_background_sc</item>
         <item name="user_color_pl_0">@color/user_color_sc_pl_0</item>
         <item name="user_color_pl_1">@color/user_color_sc_pl_1</item>
         <item name="user_color_pl_50">@color/user_color_sc_pl_50</item>

library/ui-styles/src/main/res/values/theme_sc_light.xml

@@ -86,6 +86,7 @@
         <item name="riotx_unread_unimportant_room_badge">#737373</item><!-- like text_color_secondary_sc_light, but without transparency -->
         <item name="colorAccentPale">@color/accent_sc_pale</item>
         <item name="message_highlight_bg_color">#ffe0e0e0</item>
+        <item name="code_block_bg_color">@color/code_background_sc_light</item>
         <item name="user_color_pl_0">@color/user_color_sc_pl_0</item>
         <item name="user_color_pl_1">@color/user_color_sc_pl_1</item>
         <item name="user_color_pl_50">@color/user_color_sc_pl_50</item>

vector/src/main/java/im/vector/app/features/html/EventHtmlRenderer.kt

@@ -19,8 +19,12 @@ package im.vector.app.features.html
 import android.content.Context
 import android.text.Spannable
 import androidx.core.text.toSpannable
+import im.vector.app.R
 import im.vector.app.core.resources.ColorProvider
+import im.vector.app.features.themes.ThemeUtils
+import io.noties.markwon.AbstractMarkwonPlugin
 import io.noties.markwon.Markwon
+import io.noties.markwon.core.MarkwonTheme
 import io.noties.markwon.html.HtmlPlugin
 import org.commonmark.node.Node
 import timber.log.Timber
@@ -28,17 +32,45 @@ import javax.inject.Inject
 import javax.inject.Singleton
 
 @Singleton
-class EventHtmlRenderer @Inject constructor(htmlConfigure: MatrixHtmlPluginConfigure,
-                                            context: Context) {
+class EventHtmlRenderer @Inject constructor(private val htmlConfigure: MatrixHtmlPluginConfigure,
+                                            private val context: Context) {
+
+    private fun resolveCodeBlockBackground() =
+        ThemeUtils.getColor(context, R.attr.code_block_bg_color)
+
+    private var codeBlockBackground: Int = resolveCodeBlockBackground()
 
     interface PostProcessor {
         fun afterRender(renderedText: Spannable)
     }
 
-    private val markwon = Markwon.builder(context)
-            .usePlugin(HtmlPlugin.create(htmlConfigure))
+    private fun buildMarkwon() = Markwon.builder(context)
+            .usePlugins(listOf(
+                    HtmlPlugin.create(htmlConfigure),
+                    object: AbstractMarkwonPlugin() {
+                        override fun configureTheme(builder: MarkwonTheme.Builder) {
+                            super.configureTheme(builder)
+                            builder.codeBlockBackgroundColor(codeBlockBackground)
+                                    .codeBackgroundColor(codeBlockBackground)
+                        }
+                    }
+            ))
             .build()
 
+    private var markwon: Markwon = buildMarkwon()
+    get() {
+        val newCodeBlockBackground = resolveCodeBlockBackground()
+        if (codeBlockBackground != newCodeBlockBackground) {
+            codeBlockBackground = newCodeBlockBackground
+            field = buildMarkwon()
+        }
+        return field
+    }
+
+    fun invalidateColors() {
+        markwon = buildMarkwon()
+    }
+
     fun parse(text: String): Node {
         return markwon.parse(text)
     }