From 14cbbd394f303a520fbc51fdd9b64a653fdcff25 Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Thu, 8 May 2025 15:09:25 -0400
Subject: [PATCH] Differinate between regular text and revealed spoiler text

When you reveal a spoiler, it removes the background from the spoiler
block - effectively making it seem like regular text. There's also a
minor issue that we use the color scheme's textColor as the "spoiler
block" color, and it will usually end up white. Most chat programs have
typically used a dark background for spoiler blocks, even on dark
themes.

I killed two UX issues with one stone, first by making the spoiler block
color fixed (but mixed with the textColor, to ensure it's readable
regardless of Breeze Light/Dark.) And second by only changing the text's
visibility, not the background.
---
 src/timeline/TextComponent.qml | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/timeline/TextComponent.qml b/src/timeline/TextComponent.qml
index 475759ab3..4b985ad66 100644
--- a/src/timeline/TextComponent.qml
+++ b/src/timeline/TextComponent.qml
@@ -49,6 +49,11 @@ TextEdit {
      */
     property bool spoilerRevealed: !hasSpoiler.test(display)
 
+    /**
+     * @brief The color of spoiler blocks, to be theme-agnostic.
+     */
+    property color spoilerBlockColor: Kirigami.ColorUtils.tintWithAlpha("#232629", Kirigami.Theme.textColor, 0.15)
+
     Layout.fillWidth: true
     Layout.fillHeight: true
     Layout.maximumWidth: Message.maxContentWidth
@@ -91,16 +96,27 @@ a{
     color: " + Kirigami.Theme.linkColor + ";
     text-decoration: none;
 }
+[data-mx-spoiler] a {
+    background: " + root.spoilerBlockColor + ";
+}
+[data-mx-spoiler] {
+    background: " + root.spoilerBlockColor + ";
+}
 " + (!spoilerRevealed ? "
 [data-mx-spoiler] a {
     color: transparent;
-    background: " + Kirigami.Theme.textColor + ";
 }
 [data-mx-spoiler] {
     color: transparent;
-    background: " + Kirigami.Theme.textColor + ";
 }
-" : "") + "
+" : "
+[data-mx-spoiler] a {
+    color: white;
+}
+[data-mx-spoiler] {
+    color: white;
+}
+") + "
 </style>" + display
 
     color: Kirigami.Theme.textColor