diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts index b7c31e5273..546fce9db4 100644 --- a/packages/common/src/constants.ts +++ b/packages/common/src/constants.ts @@ -539,7 +539,5 @@ export const DOUBLE_TAP_POSITION_THRESHOLD = 35; // glass background for mobile action buttons export const MOBILE_ACTION_BUTTON_BG = { - background: "rgba(255, 255, 255, 0.1)", - backdropFilter: "blur(20px)", - WebkitBackdropFilter: "blur(20px)", + background: "var(--island-bg-color)", } as const; diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss index 484afb6b65..32db665be0 100644 --- a/packages/excalidraw/components/Actions.scss +++ b/packages/excalidraw/components/Actions.scss @@ -122,9 +122,7 @@ justify-content: center; transition: all 0.2s ease; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); + background: var(--island-bg-color); svg { width: 1rem; @@ -168,8 +166,10 @@ .ToolIcon { .ToolIcon__icon { - width: 2.5rem; - height: 2.5rem; + width: var(--mobile-action-button-size); + height: var(--mobile-action-button-size); + + background-color: var(--island-bg-color); &:hover { background-color: transparent;