diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index bcd5d7c298..939b928aae 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -41,7 +41,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@toeverything/theme": "^1.0.17",
+    "@toeverything/theme": "^1.0.18",
     "@vanilla-extract/dynamic": "^2.1.0",
     "check-password-strength": "^2.0.10",
     "clsx": "^2.1.0",
diff --git a/packages/frontend/component/src/ui/modal/styles.css.ts b/packages/frontend/component/src/ui/modal/styles.css.ts
index 58e962eafc..15770ad02a 100644
--- a/packages/frontend/component/src/ui/modal/styles.css.ts
+++ b/packages/frontend/component/src/ui/modal/styles.css.ts
@@ -68,7 +68,7 @@ export const modalOverlay = style({
       animation: 'none',
     },
     '&.mobile': {
-      backgroundColor: cssVarV2('layer/mobile/modal'),
+      backgroundColor: cssVarV2('layer/background/mobile/modal'),
     },
   },
 });
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index b2baf056d6..8dc1c77f4e 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -37,7 +37,7 @@
     "@radix-ui/react-toolbar": "^1.0.4",
     "@sentry/react": "^8.0.0",
     "@toeverything/pdf-viewer": "^0.1.1",
-    "@toeverything/theme": "^1.0.17",
+    "@toeverything/theme": "^1.0.18",
     "@vanilla-extract/dynamic": "^2.1.0",
     "animejs": "^3.2.2",
     "bytes": "^3.1.2",
diff --git a/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts b/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts
index 088294aa68..716608fd21 100644
--- a/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts
+++ b/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts
@@ -7,7 +7,7 @@ export const appTabsBackground = createVar('appTabsBackground');
 
 export const appTabs = style({
   vars: {
-    [appTabsBackground]: cssVarV2('layer/background/secondary'),
+    [appTabsBackground]: cssVarV2('layer/background/mobile/primary'),
   },
   backgroundColor: appTabsBackground,
   borderTop: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
diff --git a/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx b/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx
index ffca37f3b2..b7fd39e7c1 100644
--- a/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx
+++ b/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx
@@ -10,7 +10,7 @@ export const card = style({
   borderRadius: 12,
   border: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
   boxShadow: '0px 2px 3px rgba(0,0,0,0.05)',
-  background: cssVarV2('layer/background/primary'),
+  background: cssVarV2('layer/background/mobile/secondary'),
 
   display: 'flex',
   flexDirection: 'column',
diff --git a/packages/frontend/core/src/mobile/pages/workspace/all.tsx b/packages/frontend/core/src/mobile/pages/workspace/all.tsx
index 8361d37ff9..d2c2f15122 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/all.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/all.tsx
@@ -4,7 +4,7 @@ import { AppTabs } from '../../components';
 import { AllDocList, AllDocsHeader, AllDocsMenu } from '../../views';
 
 export const Component = () => {
-  useThemeColorV2('layer/background/secondary');
+  useThemeColorV2('layer/background/mobile/primary');
 
   return (
     <>
diff --git a/packages/frontend/core/src/mobile/pages/workspace/collection/index.tsx b/packages/frontend/core/src/mobile/pages/workspace/collection/index.tsx
index 21e75c971a..15d46f345a 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/collection/index.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/collection/index.tsx
@@ -4,7 +4,7 @@ import { AppTabs } from '../../../components';
 import { AllDocsHeader, CollectionList } from '../../../views';
 
 export const Component = () => {
-  useThemeColorV2('layer/background/secondary');
+  useThemeColorV2('layer/background/mobile/primary');
   return (
     <>
       <AllDocsHeader />
diff --git a/packages/frontend/core/src/mobile/pages/workspace/home.tsx b/packages/frontend/core/src/mobile/pages/workspace/home.tsx
index 7aa97f4173..9fffda9a4b 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/home.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/home.tsx
@@ -10,7 +10,7 @@ import {
 import { HomeHeader, RecentDocs } from '../../views';
 
 export const Component = () => {
-  useThemeColorV2('layer/background/secondary');
+  useThemeColorV2('layer/background/mobile/primary');
 
   return (
     <>
diff --git a/packages/frontend/core/src/mobile/pages/workspace/tag/index.tsx b/packages/frontend/core/src/mobile/pages/workspace/tag/index.tsx
index 98d7826407..2c4d3acbda 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/tag/index.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/tag/index.tsx
@@ -4,7 +4,7 @@ import { AppTabs } from '../../../components';
 import { AllDocsHeader, TagList } from '../../../views';
 
 export const Component = () => {
-  useThemeColorV2('layer/background/secondary');
+  useThemeColorV2('layer/background/mobile/primary');
   return (
     <>
       <AllDocsHeader />
diff --git a/packages/frontend/core/src/mobile/views/all-docs/style.css.ts b/packages/frontend/core/src/mobile/views/all-docs/style.css.ts
index cb9a27851f..048b690e78 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/style.css.ts
+++ b/packages/frontend/core/src/mobile/views/all-docs/style.css.ts
@@ -9,7 +9,7 @@ export const header = style({
   width: '100%',
   position: 'fixed',
   top: 0,
-  backgroundColor: cssVarV2('layer/background/secondary'),
+  backgroundColor: cssVarV2('layer/background/mobile/primary'),
   zIndex: 1,
 });
 export const headerSpace = style([basicHeader]);
diff --git a/yarn.lock b/yarn.lock
index f97dc2778c..f2790cb708 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -352,7 +352,7 @@ __metadata:
     "@storybook/react": "npm:^8.2.9"
     "@storybook/react-vite": "npm:^8.2.9"
     "@testing-library/react": "npm:^16.0.0"
-    "@toeverything/theme": "npm:^1.0.17"
+    "@toeverything/theme": "npm:^1.0.18"
     "@types/react": "npm:^18.2.75"
     "@types/react-dom": "npm:^18.2.24"
     "@vanilla-extract/css": "npm:^1.14.2"
@@ -431,7 +431,7 @@ __metadata:
     "@sentry/react": "npm:^8.0.0"
     "@testing-library/react": "npm:^16.0.0"
     "@toeverything/pdf-viewer": "npm:^0.1.1"
-    "@toeverything/theme": "npm:^1.0.17"
+    "@toeverything/theme": "npm:^1.0.18"
     "@types/animejs": "npm:^3.1.12"
     "@types/bytes": "npm:^3.1.4"
     "@types/image-blob-reduce": "npm:^4.1.4"
@@ -13137,10 +13137,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/theme@npm:^1.0.15, @toeverything/theme@npm:^1.0.17":
-  version: 1.0.17
-  resolution: "@toeverything/theme@npm:1.0.17"
-  checksum: 10/77736bbae737539bbc1ef8e21a7c69a7146c463b7a3d8cdae9c523c4a53a6ac5b7549929efb3912e299f2acb56f0c797b8a077073d2b0826cd244776d4322010
+"@toeverything/theme@npm:^1.0.15, @toeverything/theme@npm:^1.0.18":
+  version: 1.0.18
+  resolution: "@toeverything/theme@npm:1.0.18"
+  checksum: 10/0a72d7e171037bd1867a78f8d0346dc8fc8f64d6777a6944df99dd32eedd698de0a5ef405fbd41bc7f58e94384f57a67e6c912b3c2914808268de6136f7eea64
   languageName: node
   linkType: hard