diff --git a/resources/css/shui.css b/resources/css/shui.css
index fdfbbd7a16..12e13bb84e 100644
--- a/resources/css/shui.css
+++ b/resources/css/shui.css
@@ -240,8 +240,14 @@
   opacity: 1;
 }
 
-.shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color); color: var(--ls-secondary-text-color, white); }
-.shui__button-theme-color.shui__button-color-custom  { background-color: var(--color-blue-600); color: white; }
+.shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color);
+                                                      color: var(--ls-secondary-text-color, white); }
+.shui__button-theme-color.shui__button-color-custom  { background-color: hsl(var(--logseq-og-button-background-hsl) / 0.9);
+                                                       color: white; }
+
+.shui__button-color-custom:hover, .dark .shui__button-color-custom:hover {
+    background: var(--logseq-og-button-background);
+}
 
 .shui__button-theme-color.shui__button-color-lime    { color: white; background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-10); } &:active { background-color: var(--rx-lime-08); }}
 .shui__button-theme-color.shui__button-color-orange  { color: white; background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-10); } &:active { background-color: var(--rx-orange-08); }}
diff --git a/src/main/frontend/common.css b/src/main/frontend/common.css
index 9dadb61f14..5492bd8c67 100644
--- a/src/main/frontend/common.css
+++ b/src/main/frontend/common.css
@@ -104,6 +104,8 @@ html[data-theme='dark'] {
   --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
   --ls-header-button-background: #dee4ea;
   --logseq-og-left-sidebar-text-color: var(--lx-gray-11);
+  --logseq-og-button-background-hsl: 200 98% 35%;
+  --logseq-og-button-background: hsl(var(--logseq-og-button-background-hsl));
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -183,6 +185,8 @@ html[data-theme='light'] {
   --ls-focus-ring-color: rgba(66, 133, 244, 0.5);
   --ls-header-button-background: rgba(15, 20, 25, 1);
   --logseq-og-left-sidebar-text-color: var(--lx-gray-12);
+  --logseq-og-button-background-hsl: 200 98% 35%;
+  --logseq-og-button-background: hsl(var(--logseq-og-button-background-hsl));
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
diff --git a/src/main/frontend/components/shortcut.cljs b/src/main/frontend/components/shortcut.cljs
index 90ba9f4a5e..228f291242 100644
--- a/src/main/frontend/components/shortcut.cljs
+++ b/src/main/frontend/components/shortcut.cljs
@@ -1,4 +1,5 @@
 (ns frontend.components.shortcut
+  "This namespace will be replaced later with frontend.components.shortcut2."
   (:require [clojure.string :as str]
             [frontend.context.i18n :refer [t]]
             [frontend.modules.shortcut.core :as shortcut]
diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
index a6a21612a6..0966d305c7 100644
--- a/src/main/frontend/ui.css
+++ b/src/main/frontend/ui.css
@@ -368,7 +368,7 @@ html.is-mobile {
 }
 
 .ui__toggle-background-on {
-  background: or(--logseq-og-toggle-on-background, --lx-accent-09, rgb(2, 132, 199));
+  background: or(--logseq-og-toggle-on-background, --lx-accent-09, --logseq-og-button-background);
 }
 
 .ui__toggle-background-off {