dark mode for EditPage

EdiWang · Oct 1, 2024 · f1a7e9c · f1a7e9c
1 parent 18f2c03
commit f1a7e9c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/src/Moonglade.Web/Pages/Admin/EditPage.cshtml b/src/Moonglade.Web/Pages/Admin/EditPage.cshtml
@@ -1,6 +1,7 @@
 @page "/admin/page/edit/{id:guid?}"
 @model Moonglade.Web.Pages.Admin.EditPageModel
 @{
+    ViewBag.ThemeSwitchReady = true;
     ViewBag.Title = "Edit Page";
 }
 
@@ -174,7 +175,7 @@
                 </div>
             </div>
             <div class="col-md-3 col-xl-2">
-                <div class="p-3 rounded-3 shadow-sm border bg-white mb-4">
+                <div class="admin-side-options-container p-3 rounded-3 shadow-sm border mb-4">
                     <div class="mb-3">
                         <div class="form-check form-switch mb-2">
                             <input type="checkbox" asp-for="EditPageRequest.HideSidebar" class="form-check-input">

diff --git a/src/Moonglade.Web/wwwroot/css/admin.css b/src/Moonglade.Web/wwwroot/css/admin.css
@@ -62,16 +62,18 @@
     width: 190px;
     min-height: calc(100vh - 54px);
     border-right: 1px solid var(--bs-border-color);
+    .list-group-item span
 
-    .list-group-item span {
-        width: 22px;
-        font-size: 16px;
-        display: inline-block;
-    }
+{
+    width: 22px;
+    font-size: 16px;
+    display: inline-block;
+}
+
+.list-group-item.active {
+    color: #000;
+}
 
-    .list-group-item.active {
-        color: #000;
-    }
 }
 
 .admin-main {
@@ -80,10 +82,12 @@
 
 .admin-toolbar {
     margin-bottom: 25px !important;
+    .nav-pills .nav-link.active, .nav-pills .show > .nav-link
+
+{
+    background-color: var(--accent-color1);
+}
 
-    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
-        background-color: var(--accent-color1);
-    }
 }
 
 .admin-toolbar-text {
@@ -200,18 +204,20 @@ div.mce-fullscreen {
 .ul-tag-mgr {
     line-height: 28px;
     text-align: justify;
+    li
 
-    li {
-        display: inline-block;
-        height: 33px;
-        line-height: 33px;
-        margin-bottom: 10px;
-        vertical-align: top;
-    }
+{
+    display: inline-block;
+    height: 33px;
+    line-height: 33px;
+    margin-bottom: 10px;
+    vertical-align: top;
+}
+
+li.updated {
+    border: 1px solid var(--bs-green);
+}
 
-    li.updated {
-        border: 1px solid var(--bs-green);
-    }
 }
 
 .ul-tag-mgr li span {
@@ -363,6 +369,10 @@ div.mce-fullscreen {
     align-items: center;
 }
 
+.admin-side-options-container {
+    background-color: var(--bs-white);
+}
+
 [data-bs-theme="dark"] .navbar-brand {
     color: var(--bs-white);
 }
@@ -390,4 +400,8 @@ div.mce-fullscreen {
 
 [data-bs-theme="dark"] .admin-nav .list-group-item.active {
     color: var(--bs-white)
-}
+}
+
+[data-bs-theme="dark"] .admin-side-options-container {
+    background-color: var(--bs-body-bg);
+}