diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index b662509896..b3969de957 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -432,10 +432,12 @@
   --secondary-button-disabled: rgba(255, 255, 255, .12);
   --secondary-button-disabled-color: rgba(255, 255, 255, .4);
 
-  --primary-button-default: #6366F1;
-  --primary-button-hovered: #818CF8;
-  --primary-button-pressed: #4F46E5;
-  --primary-button-focused: #6366F1;
+  --primary-button-outline: #6F71D4;
+  --primary-button-transparent: rgba(81, 83, 181, 0.22);
+  --primary-button-default: #5153b5;
+  --primary-button-hovered: #686bd4;
+  --primary-button-pressed: #3d3f94;
+  --primary-button-focused: #5153b5;
 
   --theme-button-default: rgba(255, 255, 255, .03);
   --theme-button-hovered: rgba(255, 255, 255, .07);
@@ -527,9 +529,9 @@
   --theme-kanban-card-footer: rgba(217, 217, 217, .07);
 
   --theme-editbox-focus-color: rgba(255, 255, 255, .04);
-  --theme-editbox-focus-border: #818CF8;
+  --theme-editbox-focus-border: #6F71D4;
   --theme-tablist-color: rgba(0, 0, 0, .02);
-  --theme-tablist-plain-color: #6366F1;
+  --theme-tablist-plain-color: #5153b5;
   --theme-tablist-plain-divider: rgba(255, 255, 255, .07); // Light invert
   --theme-checkbox-color: #000;
   --theme-checkbox-bg-color: #FFF;
@@ -579,14 +581,14 @@
   --theme-inbox-activitymsg-divider: rgba(255, 255, 255, .1);
   --theme-inbox-activitymsg-border: rgba(255, 255, 255, .03);
   --theme-inbox-counter-bgcolor: rgba(255, 255, 255, .06);
-  --theme-inbox-people-counter-bgcolor: rgba(99, 102, 241, .12);
+  --theme-inbox-people-counter-bgcolor: rgba(81, 83, 181, .14);
 
   --theme-toggle-sw-color: #fff;
   --theme-toggle-on-sw-color: #fff;
   --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);
   --theme-toggle-bg-hover: rgba(120, 120, 128, 0.64);
-  --theme-toggle-on-bg-color: #6366F1;
-  --theme-toggle-on-bg-hover: #4F46E5;
+  --theme-toggle-on-bg-color: #5153b5;
+  --theme-toggle-on-bg-hover: #3d3f94;
   --theme-radio-bg-color: #343442;
 
   --theme-error-color: #eb5757;
@@ -678,9 +680,9 @@
   --button-disabled-color: #313236;
   --noborder-bg-color: #313236;
   --noborder-bg-hover: #37383b;
-  --primary-bg-color: #6366F1;
-  --primary-bg-hover: #818CF8;
-  --primary-edit-border-color: #A5B4FC;
+  --primary-bg-color: #5153b5;
+  --primary-bg-hover: #686bd4;
+  --primary-edit-border-color: #9b9de8;
   --primary-shadow: rgb(0 0 0 / 25%) 0px 1px 2px;
   --dangerous-bg-color: #eb5757;
   --dangerous-bg-hover: #ff6464;
@@ -716,17 +718,17 @@
   --theme-state-ghost-color: rgba(123, 123, 123, 0.6);
   --theme-state-ghost-background-color: rgba(123, 123, 123, 0.1);
   --theme-state-ghost-border-color: transparent;
-  --theme-state-primary-color: #818CF8;
-  --theme-state-primary-background-color: rgba(99, 102, 241, 0.12);
-  --theme-state-primary-border-color: rgba(99, 102, 241, 0.22);
+  --theme-state-primary-color: #686bd4;
+  --theme-state-primary-background-color: rgba(81, 83, 181, 0.14);
+  --theme-state-primary-border-color: rgba(81, 83, 181, 0.26);
   --theme-state-regular-color: #7b7b7b;
   --theme-state-regular-background-color: rgba(123, 123, 123, 0.1);
   --theme-state-regular-border-color: rgba(123, 123, 123, 0.15);
   --theme-wizard-not-visited-color: #34343c;
 
   --calendar-event-back-color: #252A32;
-  --calendar-event-border-color: rgba(99, 102, 241, 0.25);
-  --calendar-event-handle-color: #6366F1;
+  --calendar-event-border-color: rgba(81, 83, 181, 0.28);
+  --calendar-event-handle-color: #5153b5;
 
   --theme-label-green-color: rgba(34, 197, 94, .8);
   --theme-label-green-bg-color: rgba(34, 197, 94, .08);
diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss
index c1332dbfd9..6407d629dc 100644
--- a/packages/theme/styles/_lumia-colors.scss
+++ b/packages/theme/styles/_lumia-colors.scss
@@ -138,7 +138,7 @@
 }
 
 .theme-dark-gray {
-  --border-talk-indication-primary: #6366F1;
+  --border-talk-indication-primary: #5153b5;
   --global-ui-BackgroundColor: 1530720D;
   --global-ui-BorderColor: #A5BDFF1A;
   --global-ui-hover-BackgroundColor: #A5BDFF1A;
@@ -156,24 +156,24 @@
   --global-popover-BackgroundColor: #1F2328;
   --global-popover-hover-BackgroundColor: #2C3139;
   --global-popover-BorderColor: #FFFFFF14;
-  --global-primary-LinkColor: #A5B4FC;
+  --global-primary-LinkColor: #b4b6ec;
   --global-primary-IconColor: #ffffff;
   --global-primary-TextColor: #FFFFFF;
   --global-secondary-TextColor: #C1C9D6;
   --global-tertiary-TextColor: #8E99AF;
   --global-disabled-TextColor: #5A667E;
-  --global-accent-TextColor: #A5B4FC;
+  --global-accent-TextColor: #b4b6ec;
   --global-error-TextColor: #FF6359;
-  --global-focus-BorderColor: #6366F1;
+  --global-focus-BorderColor: #5153b5;
   --global-focus-inset-BorderColor: #0D121C;
   --global-popover-ShadowColor: #0E131E59;
   --global-modal-ShadowColor: #0E131E73;
-  --global-accent-SkyText: #C7D2FE;
-  --global-accent-BackgroundColor: #6366F1;
+  --global-accent-SkyText: #d4d6f5;
+  --global-accent-BackgroundColor: #5153b5;
   --global-on-nuance-TextColor: #041d7d;
 
   --global-no-priority-PriorityColor: #8E99AF;
-  --global-low-PriorityColor: #818CF8;
+  --global-low-PriorityColor: #686bd4;
   --global-medium-PriorityColor: #FFBD2E;
   --global-high-PriorityColor: #F6684B;
   --global-urgent-PriorityColor: #F6684B;
@@ -192,11 +192,11 @@
   /** Buttons **/
   --button-subtle-LabelColor: #fff;
   --button-subtle-IconColor: #fff;
-  --button-primary-BackgroundColor: #6366F1;
+  --button-primary-BackgroundColor: #5153b5;
   --button-primary-BorderColor: #d1d5de1a;
-  --button-primary-hover-BackgroundColor: #818CF8;
-  --button-primary-active-BackgroundColor: #4F46E5;
-  --button-primary-loading-LabelColor: #C7D2FE;
+  --button-primary-hover-BackgroundColor: #686bd4;
+  --button-primary-active-BackgroundColor: #3d3f94;
+  --button-primary-loading-LabelColor: #d4d6f5;
   --button-disabled-BackgroundColor: #d1d5de12;
   --button-secondary-BackgroundColor: #d1d5de12;
   --button-secondary-BorderColor: #d1d5de1f;
@@ -205,7 +205,7 @@
   --button-tertiary-hover-BackgroundColor: #d1d5de24;
   --button-tertiary-active-BackgroundColor: #d1d5de33;
   --button-menu-active-BorderColor: #d9dee6;
-  --selector-active-BackgroundColor: #6366F1;
+  --selector-active-BackgroundColor: #5153b5;
 
   /** Editbox **/
   --input-BackgroundColor: #a5bdff0d;
diff --git a/packages/ui/src/__test__/colors.test.ts b/packages/ui/src/__test__/colors.test.ts
index 2d34da6699..e31d793442 100644
--- a/packages/ui/src/__test__/colors.test.ts
+++ b/packages/ui/src/__test__/colors.test.ts
@@ -15,14 +15,6 @@
 
 import { getPlatformColorByName, getPlatformAvatarColorByName, avatarWhiteColors, avatarDarkColors } from '../colors'
 
-jest.mock('svelte/store', () => ({
-  get: jest.fn(() => undefined)
-}))
-
-jest.mock('@hcengineering/theme', () => ({
-  themeStore: {}
-}))
-
 describe('colors module tests', () => {
   describe('getPlatformColorByName', () => {
     it('get existing color, light theme', () => {
diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index 0d384b5966..ef63b9d74d 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -1,6 +1,3 @@
-import { get } from 'svelte/store'
-import { themeStore } from '@hcengineering/theme'
-
 /**
  * @public
  */
@@ -26,10 +23,22 @@ export interface ColorDefinition {
 const DARK_BLEND_CLASSIC = '#1A1A28'
 const DARK_BLEND_GRAY = '#161719'
 
+/** Persisted `localStorage` theme id for dark gray; keep in sync with `ThemeId.DarkGray` in `@hcengineering/theme`. */
+const STORED_THEME_DARK_GRAY = 'theme-dark-gray'
+
+function isStoredDarkGrayTheme (): boolean {
+  if (typeof localStorage === 'undefined') return false
+  try {
+    return localStorage.getItem('theme') === STORED_THEME_DARK_GRAY
+  } catch {
+    return false
+  }
+}
+
 function resolveDarkGray (explicit: boolean | undefined, darkTheme: boolean): boolean {
   if (!darkTheme) return false
   if (explicit !== undefined) return explicit
-  return get(themeStore)?.darkGray ?? false
+  return isStoredDarkGrayTheme()
 }
 
 const define = (