Add background to make dark mode icon stand out in own message grammar

practice

lib/pages/chat/events/html_message.dart

@@ -469,6 +469,8 @@ class HtmlMessage extends StatelessWidget {
                               ReadingAssistanceMode.practiceMode,
                         ),
                       ),
+                      addBackground: pangeaMessageEvent!.ownMessage &&
+                          Theme.of(context).brightness != Brightness.light,
                       width: tokenWidth,
                       textColor: textColor,
                     ),

lib/pangea/toolbar/message_practice/token_practice_button.dart

@@ -31,6 +31,7 @@ class TokenPracticeButton extends StatelessWidget {
   final TextStyle textStyle;
   final double width;
   final Color textColor;
+  final bool addBackground;
 
   const TokenPracticeButton({
     super.key,
@@ -39,6 +40,7 @@ class TokenPracticeButton extends StatelessWidget {
     required this.textStyle,
     required this.width,
     required this.textColor,
+    this.addBackground = false,
   });
 
   TextStyle get _emojiStyle => TextStyle(
@@ -81,6 +83,7 @@ class TokenPracticeButton extends StatelessWidget {
             target: _activity,
             emojiStyle: _emojiStyle,
             width: tokenButtonHeight,
+            addBackground: addBackground,
           );
         } else if (practiceMode == MessagePracticeMode.wordMorph) {
           child = _MorphMatchButton(
@@ -246,6 +249,7 @@ class _NoActivityContentButton extends StatelessWidget {
   final PracticeTarget? target;
   final TextStyle emojiStyle;
   final double width;
+  final bool addBackground;
 
   const _NoActivityContentButton({
     required this.practiceMode,
@@ -253,6 +257,7 @@ class _NoActivityContentButton extends StatelessWidget {
     required this.target,
     required this.emojiStyle,
     required this.width,
+    required this.addBackground,
   });
 
   @override
@@ -283,9 +288,18 @@ class _NoActivityContentButton extends StatelessWidget {
           child: SizedBox(
             width: width,
             child: Center(
-              child: MorphIcon(
-                morphFeature: morphFeature,
-                morphTag: morphTag.lemma,
+              child: IconButton.filled(
+                style: IconButton.styleFrom(
+                  backgroundColor: addBackground
+                      ? Theme.of(context).colorScheme.surface.withAlpha(180)
+                      : Colors.white.withAlpha(0),
+                ),
+                padding: const EdgeInsets.all(4),
+                onPressed: () => {},
+                icon: MorphIcon(
+                  morphFeature: morphFeature,
+                  morphTag: morphTag.lemma,
+                ),
               ),
             ),
           ),