diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index fb011861c3..0d7aaadb79 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -103,6 +103,9 @@ export const globalThemeVariables: (
     '--affine-font-sm': theme.font.sm, // small
     '--affine-font-base': theme.font.base,
 
+    '--affine-z-index-modal': theme.zIndex.modal,
+    '--affine-z-index-popover': theme.zIndex.popover,
+
     '--affine-font-family': theme.font.family,
     '--affine-font-family2': theme.font.family2,
   };
diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts
index da54956d91..3e70ffc340 100644
--- a/packages/app/src/styles/types.ts
+++ b/packages/app/src/styles/types.ts
@@ -76,6 +76,9 @@ export interface AffineThemeCSSVariables {
   '--affine-font-sm': AffineTheme['font']['sm']; // small
   '--affine-font-base': AffineTheme['font']['base'];
 
+  '--affine-z-index-modal': AffineTheme['zIndex']['modal'];
+  '--affine-z-index-popover': AffineTheme['zIndex']['popover'];
+
   '--affine-font-family': AffineTheme['font']['family'];
   '--affine-font-family2': AffineTheme['font']['family2'];
 }