From 58c366c3c2f22b147b99de63d2ad883a206433d9 Mon Sep 17 00:00:00 2001 From: charlie Date: Wed, 10 Jan 2024 11:57:01 +0800 Subject: [PATCH] enhance(ui): polish theme colors for the right sidebar --- src/main/frontend/components/container.css | 26 +++++++++---------- .../frontend/components/right_sidebar.cljs | 4 +-- .../frontend/components/right_sidebar.css | 1 - src/main/frontend/components/theme.cljs | 17 ++++++------ src/main/frontend/components/theme.css | 8 ++++++ 5 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css index bb3d680f8..990562a38 100644 --- a/src/main/frontend/components/container.css +++ b/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)); + } + } } diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs index 36a0b3749..36b06d5e7 100644 --- a/src/main/frontend/components/right_sidebar.cljs +++ b/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 diff --git a/src/main/frontend/components/right_sidebar.css b/src/main/frontend/components/right_sidebar.css index 9fba7ef9e..9c64da26a 100644 --- a/src/main/frontend/components/right_sidebar.css +++ b/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 { diff --git a/src/main/frontend/components/theme.cljs b/src/main/frontend/components/theme.cljs index 2fe1fb47c..44acfe96b 100644 --- a/src/main/frontend/components/theme.cljs +++ b/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)])) diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index e7086b18b..ceecc2006 100644 --- a/src/main/frontend/components/theme.css +++ b/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); +} \ No newline at end of file