diff --git a/packages/theme/package.json b/packages/theme/package.json
index 7e27ac63ad..7266c46d54 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -8,6 +8,9 @@
   "exports": {
     ".": "./src/index.ts"
   },
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public",
     "main": "dist/index.umd.cjs",
@@ -17,10 +20,12 @@
         "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.4",
     "vite-plugin-dts": "^2.3.0"
   }
diff --git a/packages/theme/src/index.css.ts b/packages/theme/src/index.css.ts
new file mode 100644
index 0000000000..1d51c86330
--- /dev/null
+++ b/packages/theme/src/index.css.ts
@@ -0,0 +1,11 @@
+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/vite.config.ts b/packages/theme/vite.config.ts
index 2cee6fa617..55ca0641c6 100644
--- a/packages/theme/vite.config.ts
+++ b/packages/theme/vite.config.ts
@@ -1,5 +1,6 @@
 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';
@@ -13,13 +14,12 @@ export default defineConfig({
     },
     sourcemap: true,
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'index',
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        css: resolve(__dirname, 'src/index.css.ts'),
+      },
       name: 'ToEverythingTheme',
     },
-    rollupOptions: {
-      external: ['idb', 'yjs'],
-    },
   },
-  plugins: [dts()],
+  plugins: [dts(), vanillaExtractPlugin()],
 });
diff --git a/yarn.lock b/yarn.lock
index f45771553f..e28effc9ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8004,6 +8004,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@toeverything/theme@workspace:packages/theme"
   dependencies:
+    "@vanilla-extract/vite-plugin": ^3.8.0
     vite: ^4.3.4
     vite-plugin-dts: ^2.3.0
   languageName: unknown