dark mode for tags admin

EdiWang · Oct 2, 2024 · d7603d0 · d7603d0
1 parent d4277c6
commit d7603d0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/Moonglade.Web/Pages/Admin/Tags.cshtml b/src/Moonglade.Web/Pages/Admin/Tags.cshtml
@@ -2,6 +2,7 @@
 @using Moonglade.Core.TagFeature
 @inject IMediator Mediator
 @{
+    ViewBag.ThemeSwitchReady = true;
     ViewBag.Title = "Tags";
     var tags = await Mediator.Send(new GetTagsQuery());
 }
@@ -89,7 +90,7 @@
     <ul class="list-unstyled ul-tag-mgr">
         @foreach (var tag in tags.OrderBy(model => model.DisplayName))
         {
-            <li id="[email protected]" class="border rounded bg-white shadow-sm">
+            <li id="[email protected]" class="admin-tag-item border rounded shadow-sm">
                 <span class="span-tagcontent-editable" contenteditable="true" spellcheck="false" data-tagid="@tag.Id">@tag.DisplayName</span>
                 <a class="btn-delete" data-tagid="@tag.Id">
                     <i class="bi-trash"></i>

diff --git a/src/Moonglade.Web/wwwroot/css/admin.css b/src/Moonglade.Web/wwwroot/css/admin.css
@@ -375,6 +375,10 @@ div.mce-fullscreen {
     background-color: var(--bs-white);
 }
 
+.admin-tag-item {
+    background-color: var(--bs-white);
+}
+
 [data-bs-theme="dark"] .navbar-brand {
     color: var(--bs-white);
 }
@@ -414,4 +418,18 @@ div.mce-fullscreen {
 
 [data-bs-theme="dark"] .mention-item-container {
     background-color: var(--bs-body-bg);
-}
+}
+
+[data-bs-theme="dark"] .admin-tag-item {
+    background-color: var(--bs-body-bg);
+}
+
+[data-bs-theme="dark"] .ul-tag-mgr li a {
+    background-color: var(--bs-secondary-bg);
+    color: var(--bs-white);
+}
+
+    [data-bs-theme="dark"] .ul-tag-mgr li a:hover {
+        background-color: var(--bs-red);
+        color: var(--bs-white);
+    }