diff --git a/clj-e2e/test/logseq/e2e/right_sidebar_basic_test.clj b/clj-e2e/test/logseq/e2e/right_sidebar_basic_test.clj new file mode 100644 index 0000000000..c2a054714c --- /dev/null +++ b/clj-e2e/test/logseq/e2e/right_sidebar_basic_test.clj @@ -0,0 +1,45 @@ +(ns logseq.e2e.right-sidebar-basic-test + (:require + [clojure.string :as string] + [clojure.test :refer [deftest is testing use-fixtures]] + [logseq.e2e.assert :as assert] + [logseq.e2e.fixtures :as fixtures] + [logseq.e2e.util :as util] + [wally.main :as w])) + +(use-fixtures :once fixtures/open-page) +(use-fixtures :each fixtures/new-logseq-page fixtures/validate-graph) + +(defn- use-dark-neutral-theme! + [] + (w/eval-js + "window.logseq.api.set_theme_mode('dark'); + window.logseq.api.set_state_from_store(['ui/system-theme?'], false); + window.logseq.api.set_state_from_store(['ui/radix-color'], 'none');") + (util/wait-timeout 100)) + +(defn- right-sidebar-backgrounds + [] + (-> (w/eval-js + "(() => { + const topbar = document.querySelector('.cp__right-sidebar-topbar'); + const inner = document.querySelector('.cp__right-sidebar-inner'); + return [ + getComputedStyle(topbar).backgroundColor, + getComputedStyle(inner).backgroundColor, + document.documentElement.dataset.theme, + document.documentElement.dataset.color + ].join('|'); + })()") + (string/split #"\|"))) + +(deftest right-sidebar-topbar-uses-dark-neutral-background + (testing "right sidebar header stays dark with neutral accent color" + (use-dark-neutral-theme!) + (w/click ".toggle-right-sidebar") + (assert/assert-is-visible ".cp__right-sidebar.open .cp__right-sidebar-topbar") + (assert/assert-is-visible ".cp__right-sidebar .sidebar-item") + (let [[topbar-bg inner-bg theme color] (right-sidebar-backgrounds)] + (is (= "dark" theme)) + (is (= "none" color)) + (is (= inner-bg topbar-bg))))) diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css index 963cba43c7..69ade90a60 100644 --- a/src/main/frontend/components/container.css +++ b/src/main/frontend/components/container.css @@ -777,8 +777,13 @@ html[data-theme='dark'] { } .cp__right-sidebar { + &-inner, + &-topbar { + background-color: var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-01))); + } + .sidebar-item { - background-color: var(--lx-gray-03, var(--ls-secondary-background-color)); + background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03))); } } }