diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index b95b6445a9..8a87a57e73 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -44,7 +44,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@toeverything/theme": "^0.7.24",
+    "@toeverything/theme": "^0.7.28",
     "@vanilla-extract/dynamic": "^2.0.3",
     "bytes": "^3.1.2",
     "check-password-strength": "^2.0.7",
diff --git a/packages/frontend/component/src/ui/date-picker/week-date-picker.css.tsx b/packages/frontend/component/src/ui/date-picker/week-date-picker.css.tsx
index 6b7442d74f..0155639edc 100644
--- a/packages/frontend/component/src/ui/date-picker/week-date-picker.css.tsx
+++ b/packages/frontend/component/src/ui/date-picker/week-date-picker.css.tsx
@@ -1,3 +1,4 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const weekDatePicker = style({
@@ -36,24 +37,24 @@ export const dayCell = style({
   padding: '2px 4px 1px 4px',
   borderRadius: 4,
 
-  fontFamily: 'var(--affine-font-family)',
+  fontFamily: cssVar('fontFamily'),
   fontWeight: 500,
   fontSize: 12,
 
   selectors: {
     '&:hover': {
-      backgroundColor: 'var(--affine-hover-color)',
+      backgroundColor: cssVar('hoverColor'),
     },
     '&[data-today="true"]:not([data-active="true"])': {
       vars: {
-        '--cell-color': 'var(--affine-brand-color)',
+        '--cell-color': cssVar('brandColor'),
       },
     },
     '&[data-active="true"]': {
       vars: {
-        '--cell-color': 'var(--affine-pure-white)',
+        '--cell-color': cssVar('pureWhite'),
       },
-      background: 'var(--affine-brand-color)',
+      background: cssVar('brandColor'),
     },
 
     // interactive
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index 05b4a50dc3..be5dbdcb71 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -50,7 +50,7 @@
     "@react-hookz/web": "^24.0.0",
     "@sentry/integrations": "^7.83.0",
     "@sentry/react": "^7.83.0",
-    "@toeverything/theme": "^0.7.20",
+    "@toeverything/theme": "^0.7.28",
     "@vanilla-extract/dynamic": "^2.0.3",
     "animejs": "^3.2.2",
     "async-call-rpc": "^6.3.1",
diff --git a/yarn.lock b/yarn.lock
index 720a1b81c8..20942b5926 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -245,7 +245,7 @@ __metadata:
     "@storybook/test-runner": "npm:^0.16.0"
     "@storybook/testing-library": "npm:^0.2.2"
     "@testing-library/react": "npm:^14.0.0"
-    "@toeverything/theme": "npm:^0.7.24"
+    "@toeverything/theme": "npm:^0.7.28"
     "@types/bytes": "npm:^3.1.3"
     "@types/react": "npm:^18.2.28"
     "@types/react-datepicker": "npm:^4.19.0"
@@ -338,7 +338,7 @@ __metadata:
     "@sentry/webpack-plugin": "npm:^2.8.0"
     "@swc/core": "npm:^1.3.93"
     "@testing-library/react": "npm:^14.0.0"
-    "@toeverything/theme": "npm:^0.7.20"
+    "@toeverything/theme": "npm:^0.7.28"
     "@types/animejs": "npm:^3"
     "@types/bytes": "npm:^3.1.3"
     "@types/image-blob-reduce": "npm:^4.1.3"
@@ -12847,13 +12847,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@toeverything/theme@npm:^0.7.20, @toeverything/theme@npm:^0.7.24, @toeverything/theme@npm:^0.7.27":
+"@toeverything/theme@npm:^0.7.27":
   version: 0.7.27
   resolution: "@toeverything/theme@npm:0.7.27"
   checksum: 9349d30256d33b5528441dbca09387819225449f97549585b92b33e354d7fbb3d0e5e35001c89b8a7e3033d8f51d3aee75ef9edaaf14fb7dd717dd66bfe96009
   languageName: node
   linkType: hard
 
+"@toeverything/theme@npm:^0.7.28":
+  version: 0.7.28
+  resolution: "@toeverything/theme@npm:0.7.28"
+  checksum: 675da6a9f1a7394b04ddb5e58ddc088ea6a56c2ae5f22d6041ec966905a231ba7238417bb63d95633963f9ebae1d7c655c88e22fccf0c4e54dfcceda0deee108
+  languageName: node
+  linkType: hard
+
 "@toeverything/y-indexeddb@workspace:packages/common/y-indexeddb":
   version: 0.0.0-use.local
   resolution: "@toeverything/y-indexeddb@workspace:packages/common/y-indexeddb"