diff --git a/.github/labeler.yml b/.github/labeler.yml
index 7d9af931c2e83..342f028bb4d73 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -15,8 +15,6 @@ mod:dev:
 
 mod:workspace: 'packages/workspace/**/*'
 
-mod:theme: 'packages/theme/**/*'
-
 mod:i18n: 'packages/i18n/**/*'
 
 mod:env: 'packages/env/**/*'
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index 2d9a43220abbf..ef4808f3e1518 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -111,7 +111,6 @@ const nextConfig = {
     '@affine/jotai',
     '@toeverything/hooks',
     '@toeverything/y-indexeddb',
-    '@toeverything/theme',
   ],
   publicRuntimeConfig: {
     PROJECT_NAME: process.env.npm_package_name ?? 'AFFiNE',
diff --git a/packages/component/package.json b/packages/component/package.json
index cba0d44599698..88abe60b65f60 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -36,7 +36,7 @@
     "@popperjs/core": "^2.11.7",
     "@radix-ui/react-avatar": "^1.0.2",
     "@toeverything/hooks": "workspace:*",
-    "@toeverything/theme": "workspace:*",
+    "@toeverything/theme": "^0.5.7",
     "@vanilla-extract/dynamic": "^2.0.3",
     "clsx": "^1.2.1",
     "jotai": "^2.1.0",
diff --git a/packages/theme/README.md b/packages/theme/README.md
new file mode 100644
index 0000000000000..67a6f423b2ef7
--- /dev/null
+++ b/packages/theme/README.md
@@ -0,0 +1 @@
+This package has been moved to [toeverything/design](https://github.com/toeverything/design)
diff --git a/packages/theme/package.json b/packages/theme/package.json
deleted file mode 100644
index 017c6288fafd6..0000000000000
--- a/packages/theme/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "@toeverything/theme",
-  "version": "0.5.4-canary.25",
-  "type": "module",
-  "scripts": {
-    "build": "vite build"
-  },
-  "exports": {
-    ".": "./src/index.ts"
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "main": "dist/index.umd.cjs",
-    "module": "dist/index.js",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "require": "./dist/index.umd.cjs"
-      },
-      "./style.css": "./dist/style.css"
-    }
-  },
-  "devDependencies": {
-    "@vanilla-extract/vite-plugin": "^3.8.0",
-    "vite": "^4.3.5",
-    "vite-plugin-dts": "^2.3.0"
-  }
-}
diff --git a/packages/theme/src/index.css.ts b/packages/theme/src/index.css.ts
deleted file mode 100644
index 1d51c863301e9..0000000000000
--- a/packages/theme/src/index.css.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css';
-
-import { darkCssVariables, lightCssVariables } from './index';
-
-globalStyle(':root', {
-  vars: lightCssVariables,
-});
-
-globalStyle(':root[data-theme="dark"]', {
-  vars: darkCssVariables,
-});
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
deleted file mode 100644
index 681de2ae71087..0000000000000
--- a/packages/theme/src/index.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-export const camelToKebab = (s: string) => {
-  if (typeof s !== 'string') return '';
-  return s
-    .replace(/-/g, '_')
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
-    .toLowerCase()
-    .replace(/(\D+)(\d+)$/g, '$1-$2')
-    .replace(/\s|_/g, '-');
-};
-
-type Kebab<
-  T extends string,
-  A extends string = ''
-> = T extends `${infer F}${infer R}`
-  ? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
-  : A;
-
-export type AffineTheme = typeof lightTheme & {
-  editorMode: 'page' | 'edgeless';
-};
-
-export type AffineCssVariables = {
-  [Key in `--affine-${Kebab<keyof AffineTheme>}`]: string;
-};
-
-const basicFontFamily =
-  'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
-
-export const baseTheme = {
-  // font
-  fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`,
-  fontNumberFamily: `Roboto Mono, ${basicFontFamily}`,
-  fontCodeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
-  fontTitle: '36px',
-  fontH1: '28px',
-  fontH2: '26px',
-  fontH3: '24px',
-  fontH4: '22px',
-  fontH5: '20px',
-  fontH6: '18px',
-  fontBase: '16px',
-  fontSm: '14px',
-  fontXs: '12px',
-
-  lineHeight: 'calc(1em + 8px)',
-
-  zIndexModal: '1000',
-  zIndexPopover: '1000',
-
-  paragraphSpace: '8px',
-  popoverRadius: '12px',
-
-  zoom: '1',
-  scale: 'calc(1 / var(--affine-zoom))',
-  paletteLineYellow: 'rgb(255, 232, 56)',
-  paletteLineOrange: 'rgb(255, 175, 56)',
-  paletteLineTangerine: 'rgb(255, 99, 31)',
-  paletteLineRed: 'rgb(252, 63, 85)',
-  paletteLineMagenta: 'rgb(255, 56, 179)',
-  paletteLinePurple: 'rgb(182, 56, 255)',
-  paletteLineNavy: 'rgb(59, 37, 204)',
-  paletteLineBlue: 'rgb(79, 144, 255)',
-  paletteLineGreen: 'rgb(16, 203, 134)',
-  paletteLineWhite: 'rgb(255, 255, 255)',
-  paletteLineBlack: 'rgb(0, 0, 0)',
-  paletteLineGrey: 'rgb(153, 153, 153)',
-  paletteShapeYellow: 'rgb(255, 241, 136)',
-  paletteShapeOrange: 'rgb(255, 207, 136)',
-  paletteShapeTangerine: 'rgb(255, 161, 121)',
-  paletteShapeRed: 'rgb(253, 140, 153)',
-  paletteShapeMagenta: 'rgb(255, 136, 209)',
-  paletteShapePurple: 'rgb(211, 136, 255)',
-  paletteShapeNavy: 'rgb(137, 124, 224)',
-  paletteShapeBlue: 'rgb(149, 188, 255)',
-  paletteShapeGreen: 'rgb(112, 224, 182)',
-  paletteShapeWhite: 'rgb(255, 255, 255)',
-  paletteShapeBlack: 'rgb(0, 0, 0)',
-  paletteShapeGrey: 'rgb(194, 194, 194)',
-};
-
-// Refs: https://github.com/toeverything/AFFiNE/issues/1796
-export const lightTheme = {
-  ...baseTheme,
-
-  themeMode: 'light',
-
-  brandColor: 'rgb(84, 56, 255)',
-  tertiaryColor: 'rgb(243, 240, 255)',
-  primaryColor: 'rgb(84, 56, 255)',
-  secondaryColor: 'rgb(125, 145, 255)',
-  backgroundSuccessColor: 'rgba(231, 250, 243, 1)',
-  backgroundErrorColor: 'rgba(253, 236, 235, 1)',
-  backgroundProcessingColor: 'rgba(233, 241, 255, 1)',
-  backgroundWarningColor: 'rgba(255, 239, 233, 1)',
-  backgroundPrimaryColor: 'rgb(255, 255, 255)',
-  backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
-  backgroundSecondaryColor: 'rgb(251, 250, 252)',
-  backgroundTertiaryColor: 'rgb(245, 243, 247)',
-  backgroundCodeBlock: 'rgb(250, 251, 253)',
-  backgroundModalColor: 'rgba(0, 0, 0, 0.4)',
-  textPrimaryColor: 'rgb(66, 65, 73)',
-  textSecondaryColor: 'rgb(142, 141, 145)',
-  textDisableColor: 'rgb(169, 169, 173)',
-  textEmphasisColor: 'rgb(84, 56, 255)',
-  hoverColor: 'rgba(0, 0, 0, 0.04)',
-  linkColor: 'rgba(88, 114, 251, 1)',
-  quoteColor: 'rgb(100, 95, 130)',
-  iconColor: 'rgb(119, 117, 125)',
-  iconSecondary: 'rgba(119, 117, 125, 0.6)',
-  borderColor: 'rgb(227, 226, 228)',
-  dividerColor: 'rgb(227, 226, 228)',
-  placeholderColor: 'rgb(192, 191, 193)',
-  edgelessGridColor: 'rgb(230, 230, 230)',
-  successColor: 'rgb(16, 203, 134)',
-  warningColor: 'rgb(255, 99, 31)',
-  errorColor: 'rgb(235, 67, 53)',
-  processingColor: 'rgb(39, 118, 255)',
-  black10: 'rgba(0, 0, 0, 0.1)',
-  black30: 'rgba(0, 0, 0, 0.3)',
-  black50: 'rgba(0, 0, 0, 0.5)',
-  black60: 'rgba(0, 0, 0, 0.6)',
-  black80: 'rgba(0, 0, 0, 0.8)',
-  black90: 'rgba(0, 0, 0, 0.9)',
-  black: 'rgb(0, 0, 0)',
-  white10: 'rgba(255, 255, 255, 0.1)',
-  white30: 'rgba(255, 255, 255, 0.3)',
-  white50: 'rgba(255, 255, 255, 0.5)',
-  white60: 'rgba(255, 255, 255, 0.6)',
-  white80: 'rgba(255, 255, 255, 0.8)',
-  white90: 'rgba(255, 255, 255, 0.9)',
-  white: 'rgb(255, 255, 255)',
-  tagWhite: 'rgba(245, 245, 245, 1)',
-  tagGray: 'rgba(227, 226, 224, 1)',
-  tagRed: 'rgba(255, 225, 225, 1)',
-  tagOrange: 'rgba(255, 233, 201, 1)',
-  tagYellow: 'rgba(255, 243, 215, 1)',
-  tagGreen: 'rgba(222, 244, 231, 1)',
-  tagTeal: 'rgba(222, 244, 243, 1)',
-  tagBlue: 'rgba(225, 238, 255, 1)',
-  tagPurple: 'rgba(243, 240, 255, 1)',
-  tagPink: 'rgba(251, 231, 255, 1)',
-  tooltip: 'rgba(66, 65, 73, 1)',
-  menuShadow:
-    '0px 0px 12px rgba(66, 65, 73, 0.14), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)',
-  shadow1: '0px 0px 4px 0px rgba(66, 65, 73, 0.14)',
-  shadow2: '0px 0px 12px 0px rgba(66, 65, 73, 0.18)',
-  shadow3: '0px 0px 20px 0px rgba(66, 65, 73, 0.22)',
-  popoverShadow:
-    '0px 0px 30px rgba(75, 75, 75, 0.2), 0px 0px 4px rgba(75, 75, 75, 0.3), inset 0px 0px 0px rgba(227, 226, 228, 1)',
-  floatButtonShadow:
-    '0px 10px 12px -3px rgba(66, 65, 73, 0.1), 0px 4px 6px -2px rgba(66, 65, 73, 0.05)',
-};
-
-export const darkTheme = {
-  ...baseTheme,
-
-  themeMode: 'dark',
-
-  brandColor: 'rgba(156, 140, 255, 1)',
-  primaryColor: 'rgba(106, 86, 229, 1)',
-  secondaryColor: 'rgb(144, 150, 245)',
-  tertiaryColor: 'rgb(30, 30, 30)',
-  hoverColor: 'rgba(255, 255, 255, 0.1)',
-  iconColor: 'rgb(168, 168, 160)',
-  iconSecondary: 'rgba(168,168,160,0.6)',
-  borderColor: 'rgba(46, 46, 46, 1)',
-  dividerColor: 'rgb(114, 114, 114)',
-  placeholderColor: 'rgb(62, 62, 63)',
-  quoteColor: 'rgb(147, 144, 163)',
-  linkColor: 'rgb(185, 191, 227)',
-  edgelessGridColor: 'rgb(49, 49, 49)',
-  successColor: 'rgb(77, 213, 181)',
-  warningColor: 'rgb(255, 123, 77)',
-  errorColor: 'rgb(212, 140, 130)',
-  processingColor: 'rgb(195, 215, 255)',
-  textEmphasisColor: 'rgba(156, 140, 255, 1)',
-  textPrimaryColor: 'rgb(234, 234, 234)',
-  textSecondaryColor: 'rgb(156, 156, 160)',
-  textDisableColor: 'rgb(119, 117, 125)',
-  black10: 'rgba(255, 255, 255, 0.1)',
-  black30: 'rgba(255, 255, 255, 0.3)',
-  black50: 'rgba(255, 255, 255, 0.5)',
-  black60: 'rgba(255, 255, 255, 0.6)',
-  black80: 'rgba(255, 255, 255, 0.8)',
-  black90: 'rgba(255, 255, 255, 0.9)',
-  black: 'rgb(255, 255, 255)',
-  white10: 'rgba(0, 0, 0, 0.1)',
-  white30: 'rgba(0, 0, 0, 0.3)',
-  white50: 'rgba(0, 0, 0, 0.5)',
-  white60: 'rgba(0, 0, 0, 0.6)',
-  white80: 'rgba(0, 0, 0, 0.8)',
-  white90: 'rgba(0, 0, 0, 0.9)',
-  white: 'rgb(0, 0, 0)',
-  backgroundCodeBlock: 'rgb(41, 44, 51)',
-  backgroundTertiaryColor: 'rgb(30, 30, 30)',
-  backgroundProcessingColor: 'rgba(24, 27, 32, 1)',
-  backgroundErrorColor: 'rgba(21, 14, 13, 1)',
-  backgroundWarningColor: 'rgba(26, 10, 3, 1)',
-  backgroundSuccessColor: 'rgba(8, 21, 18, 1)',
-  backgroundPrimaryColor: 'rgb(20, 20, 20)',
-  backgroundSecondaryColor: 'rgb(32, 32, 32)',
-  backgroundModalColor: 'rgba(0, 0, 0, 0.5)',
-  backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
-  tagBlue: 'rgba(8, 67, 136, 1)',
-  tagGreen: 'rgba(44, 108, 63, 1)',
-  tagTeal: 'rgba(26, 115, 110, 1)',
-  tagWhite: 'rgba(67, 67, 67, 1)',
-  tagPurple: 'rgba(47, 30, 113, 1)',
-  tagRed: 'rgba(111, 50, 50, 1)',
-  tagPink: 'rgba(155, 106, 106, 1)',
-  tagYellow: 'rgba(150, 132, 49, 1)',
-  tagOrange: 'rgba(185, 129, 46, 1)',
-  tagGray: 'rgba(41, 41, 41, 1)',
-  tooltip: 'rgba(234, 234, 234, 1)',
-  menuShadow:
-    '0px 0px 12px rgba(0, 0, 0, 1), inset 0px 0px 0px 0.5px rgba(46, 46, 46, 1)',
-  shadow1: '0px 0px 4px 2px rgba(15, 15, 15, 1)',
-  shadow2: '0px 0px 12px 4px rgba(15, 15, 15, 0.8)',
-  shadow3: '0px 0px 22px 8px rgba(15, 15, 15, 0.9)',
-  popoverShadow:
-    '0px 0px 30px rgba(12, 12, 12, 0.8), 0px 0px 8px rgba(12, 12, 12, 1), inset 0px 0px 0px rgba(46, 46, 46, 1)',
-  floatButtonShadow:
-    ' 0px 10px 12px -3px rgba(15, 15, 15, 0.88), 0px 4px 6px -2px rgba(0, 0, 0, 0.88)',
-} satisfies Omit<AffineTheme, 'editorMode'>;
-
-export const lightCssVariables = Object.entries(lightTheme).reduce(
-  (variables, [key, value]) => {
-    variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
-      value;
-    return variables;
-  },
-  {} as AffineCssVariables
-);
-
-export const darkCssVariables = Object.entries(darkTheme).reduce(
-  (variables, [key, value]) => {
-    variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
-      value;
-    return variables;
-  },
-  {} as AffineCssVariables
-);
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
deleted file mode 100644
index 49909da109701..0000000000000
--- a/packages/theme/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["./src"],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}
diff --git a/packages/theme/tsconfig.node.json b/packages/theme/tsconfig.node.json
deleted file mode 100644
index 9d31e2aed93c8..0000000000000
--- a/packages/theme/tsconfig.node.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/packages/theme/vite.config.ts b/packages/theme/vite.config.ts
deleted file mode 100644
index 55ca0641c6737..0000000000000
--- a/packages/theme/vite.config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { resolve } from 'node:path';
-
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-import { fileURLToPath } from 'url';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-
-export default defineConfig({
-  build: {
-    terserOptions: {
-      ecma: 2020,
-    },
-    sourcemap: true,
-    lib: {
-      entry: {
-        index: resolve(__dirname, 'src/index.ts'),
-        css: resolve(__dirname, 'src/index.css.ts'),
-      },
-      name: 'ToEverythingTheme',
-    },
-  },
-  plugins: [dts(), vanillaExtractPlugin()],
-});
diff --git a/scripts/publish.sh b/scripts/publish.sh
index 0fe0a9043ee4a..a4a2deedca407 100755
--- a/scripts/publish.sh
+++ b/scripts/publish.sh
@@ -2,7 +2,6 @@
 
 packages=(
   "y-indexeddb"
-  "theme"
 )
 
 for package in "${packages[@]}"; do
diff --git a/tsconfig.json b/tsconfig.json
index a9aea18052f4b..0dea95dc91fb0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,8 +33,7 @@
       "@affine-test/kit/*": ["./tests/kit/*"],
       "@affine-test/fixtures/*": ["./tests/fixtures/*"],
       "@toeverything/y-indexeddb": ["./packages/y-indexeddb/src"],
-      "@toeverything/hooks/*": ["./packages/hooks/src/*"],
-      "@toeverything/theme": ["./packages/theme/src"]
+      "@toeverything/hooks/*": ["./packages/hooks/src/*"]
     }
   },
   "references": [
@@ -85,9 +84,6 @@
     },
     {
       "path": "./apps/electron"
-    },
-    {
-      "path": "./packages/theme"
     }
   ],
   "files": [],
diff --git a/yarn.lock b/yarn.lock
index d3b8a6a640bc6..5c6e0d01e7908 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -80,7 +80,7 @@ __metadata:
     "@storybook/test-runner": ^0.10.0
     "@storybook/testing-library": ^0.1.0
     "@toeverything/hooks": "workspace:*"
-    "@toeverything/theme": "workspace:*"
+    "@toeverything/theme": ^0.5.7
     "@types/react": ^18.2.6
     "@types/react-dnd": ^3.0.2
     "@types/react-dom": 18.2.4
@@ -8008,15 +8008,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/theme@workspace:*, @toeverything/theme@workspace:packages/theme":
-  version: 0.0.0-use.local
-  resolution: "@toeverything/theme@workspace:packages/theme"
-  dependencies:
-    "@vanilla-extract/vite-plugin": ^3.8.0
-    vite: ^4.3.5
-    vite-plugin-dts: ^2.3.0
-  languageName: unknown
-  linkType: soft
+"@toeverything/theme@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "@toeverything/theme@npm:0.5.7"
+  checksum: feb099f65a57dc18c3262244745d3e0144bfc58bde7d9950a32c4d3e9d3ab8290bb36b445f6608b4f54472dfa4243e675ecd0635720a26952501ba4c5948c013
+  languageName: node
+  linkType: hard
 
 "@toeverything/y-indexeddb@workspace:*, @toeverything/y-indexeddb@workspace:packages/y-indexeddb":
   version: 0.0.0-use.local