enhance(ui): polish theme colors for the right sidebar

src/main/frontend/components/container.css

@@ -14,7 +14,6 @@
 
 #app-container {
   @apply flex basis-full;
-  background-color: or(--lx-gray-01, --ls-primary-background-color, #fff);
 }
 
 #skip-to-main {
@@ -70,13 +69,7 @@
   overflow: auto;
 }
 
-.dark .left-sidebar-inner {
-  --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
-}
-
 .left-sidebar-inner {
-  --left-sidebar-bg-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
-
   position: relative;
   height: 100%;
   padding-top: 12px;
@@ -551,10 +544,6 @@
   /* box-shadow: inset 0 0 0 1px var(--ls-border-color); */
 }
 
-.cp__sidebar-main-layout {
-  background-color: or(--ls-main-content-background, --lx-gray-01, --ls-primary-background-color);
-}
-
 .cp__sidebar-main-content {
   width: 100%;
   max-width: var(--ls-main-content-max-width);
@@ -651,6 +640,7 @@
 
   &-inner {
     padding-top: 0;
+    background-color: transparent;
   }
 
   &-settings {
@@ -721,9 +711,7 @@
   }
 
   .sidebar-item {
-    @apply relative;
-    flex: 1 1;
-    min-height: 100px;
+    @apply relative flex-1 min-h-[100px];
 
     .sidebar-item-header {
       .breadcrumb {
@@ -838,4 +826,14 @@ html[data-theme='dark'] {
       background-color: rgba(0, 0, 0, .15);
     }
   }
+
+  .left-sidebar-inner {
+    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
+  }
+
+  .cp__right-sidebar {
+    .sidebar-item {
+      background-color: var(--lx-gray-03, var(--ls-secondary-background-color));
+    }
+  }
 }

src/main/frontend/components/right_sidebar.cljs

@@ -252,7 +252,7 @@
       (let [collapsed? (state/sub [:ui/sidebar-collapsed-blocks db-id])]
         [:<>
          (when (zero? idx) (drop-indicator (dec idx) drag-to))
-         [:div.flex.sidebar-item.content.color-level.shadow-md.rounded-md
+         [:div.flex.sidebar-item.content.color-level.rounded-md
           {:class [(str "item-type-" (name block-type))
                    (when collapsed? "collapsed")]}
           (let [[title component] item]
@@ -280,7 +280,7 @@
                                  (state/sidebar-block-toggle-collapse! db-id))}
                [:span.opacity-50.hover:opacity-100.flex.items-center.pr-1
                 (ui/rotating-arrow collapsed?)]
-               [:div.ml-1.font-medium.overflow-hidden
+               [:div.ml-1.font-medium.overflow-hidden.whitespace-nowrap
                 title]]
               [:.item-actions.flex.items-center
                (shui/dropdown-menu

src/main/frontend/components/right_sidebar.css

@@ -19,7 +19,6 @@ html[data-theme=light] {
   @apply ml-1 mt-[-8px] pb-[150px];
 
   height: calc(100vh - 48px);
-  background-color: or(--ls-right-sidebar-color, --lx-gray-01, --ls-secondary-background-color, #d8e1e8);
 }
 
 html[data-theme=light] a.toggle:hover {

src/main/frontend/components/theme.cljs

@@ -22,12 +22,14 @@
         [restored-sidebar? set-restored-sidebar?] (rum/use-state false)]
 
     (rum/use-effect!
-     #(let [doc js/document.documentElement
-            cls (.-classList doc)]
+     #(let [^js doc js/document.documentElement
+            ^js cls (.-classList doc)
+            ^js cls-body (.-classList js/document.body)]
         (.setAttribute doc "data-theme" theme)
         (if (= theme "dark") ;; for tailwind dark mode
-          (.add cls "dark")
-          (.remove cls "dark"))
+          ; The white-theme is for backward compatibility. See: https://github.com/logseq/logseq/pull/4652.
+          (do (.add cls "dark") (doto cls-body (.remove "white-theme" "light-theme") (.add "dark-theme")))
+          (do (.remove cls "dark") (doto cls-body (.remove "dark-theme") (.add "white-theme" "light-theme"))))
         (ui/apply-custom-theme-effect! theme)
         (plugin-handler/hook-plugin-app :theme-mode-changed {:mode theme}))
      [theme])
@@ -111,11 +113,8 @@
      #(storage/set :file-sync/onboarding-state onboarding-state)
      [onboarding-state])
 
-    [:div
-     {:class    (util/classnames
-                 [(str theme "-theme")
-                  {:white-theme (= "light" theme)}]) ; The white-theme is for backward compatibility. See: https://github.com/logseq/logseq/pull/4652.
-      :on-click on-click}
+    [:div.theme-container
+     {:on-click on-click}
      child
 
      (pdf/default-embed-playground)]))

src/main/frontend/components/theme.css

@@ -59,6 +59,10 @@
   transform: scale(1.1);
 }
 
+body {
+  background-color: or(--lx-gray-01, --ls-primary-background-color, #fff);
+}
+
 html[data-theme='light'] #app-container {
   .form-checkbox {
     &:focus {
@@ -156,3 +160,7 @@ main.ls-fold-button-on-right {
     }
   }
 }
+
+main.theme-inner {
+  --left-sidebar-bg-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
+}