From 48fbd3c9d752b217545c6b7cd2019c245c9d57b8 Mon Sep 17 00:00:00 2001
From: ilyapashayan <ilya.w.a.j@gmail.com>
Date: Mon, 30 Mar 2026 19:20:50 +0400
Subject: [PATCH] fix: use CSS variables for mention styling so dark mode and
 custom colors work

---
 resources/css/comments.css      | 17 +++++++++++++++++
 src/CommentsServiceProvider.php |  6 ++++++
 src/Models/Comment.php          |  2 +-
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 resources/css/comments.css

diff --git a/resources/css/comments.css b/resources/css/comments.css
new file mode 100644
index 0000000..3846440
--- /dev/null
+++ b/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));
+}
diff --git a/src/CommentsServiceProvider.php b/src/CommentsServiceProvider.php
index 94e5f58..66ade45 100644
--- a/src/CommentsServiceProvider.php
+++ b/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');
     }
 }
diff --git a/src/Models/Comment.php b/src/Models/Comment.php
index a169e85..78ec451 100644
--- a/src/Models/Comment.php
+++ b/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(