fix: use CSS variables for mention styling so dark mode and custom colors work

resources/css/comments.css

@@ -0,0 +1,17 @@
+.comment-mention {
+    background-color: rgb(var(--primary-50));
+    color: rgb(var(--primary-600));
+    margin-top: 0;
+    margin-bottom: 0;
+    display: inline-block;
+    border-radius: 0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.dark .comment-mention {
+    background-color: rgb(var(--primary-400) / 0.1);
+    color: rgb(var(--primary-400));
+}

src/CommentsServiceProvider.php

@@ -2,6 +2,8 @@
 
 namespace Relaticle\Comments;
 
+use Filament\Support\Assets\Css;
+use Filament\Support\Facades\FilamentAsset;
 use Illuminate\Database\Eloquent\Relations\Relation;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Facades\Gate;
@@ -64,5 +66,9 @@ class CommentsServiceProvider extends PackageServiceProvider
         Livewire::component('comments', Comments::class);
         Livewire::component('comment-item', CommentItem::class);
         Livewire::component('reactions', Reactions::class);
+
+        FilamentAsset::register([
+            Css::make('comments', __DIR__.'/../resources/css/comments.css'),
+        ], 'relaticle/comments');
     }
 }

src/Models/Comment.php

@@ -151,7 +151,7 @@ class Comment extends Model
 
         foreach ($mentionNames as $name) {
             $escapedName = e($name);
-            $styledSpan = '<span class="comment-mention my-0 inline-block rounded bg-primary-50 px-1 font-medium whitespace-nowrap text-primary-600 dark:bg-primary-400/10 dark:text-primary-400">@'.$escapedName.'</span>';
+            $styledSpan = '<span class="comment-mention">@'.$escapedName.'</span>';
 
             // Replace rich-editor mention spans (data-type="mention" with @Name as text content)
             $body = preg_replace(