diff --git a/apps/docs/app/docs/Theming/constants.ts b/apps/docs/app/docs/Theming/constants.ts
index 6fec1a45d..3bcdf0893 100644
--- a/apps/docs/app/docs/Theming/constants.ts
+++ b/apps/docs/app/docs/Theming/constants.ts
@@ -23,7 +23,13 @@ export const THEMING_PROJECT_STRUCTURE: ThemingConstant = {
 │   ├── palette.ts      # Color definitions (edit this!)
 │   ├── package-vsix.ts # Generates VS Code/Cursor extension
 │   └── theme.ts        # Token color mappings
-├── themes/             # Generated theme JSON files
+├── dist/               # Generated MJS modules (for Shiki)
+│   ├── index.mjs
+│   ├── pierre-dark.mjs
+│   ├── pierre-light.mjs
+│   ├── pierre-dark-vibrant.mjs
+│   └── pierre-light-vibrant.mjs
+├── themes/             # Generated JSON files (for VS Code)
 │   ├── pierre-dark.json
 │   ├── pierre-light.json
 │   ├── pierre-dark-vibrant.json
@@ -485,14 +491,18 @@ export const THEMING_REGISTER_THEME: ThemingConstant = {
     name: 'register-theme.ts',
     contents: `import { registerCustomTheme } from '@pierre/diffs';
 
-// Register your theme JSON files before rendering
-// The name must match the "name" field in your theme JSON
+// Register your theme files before rendering.
+// The name must match the "name" field in your theme.
 
-// Option 1: Import from your bundled theme files
+// Option 1: Import MJS theme modules (recommended)
+registerCustomTheme('my-theme-dark', () => import('my-theme/dark'));
+registerCustomTheme('my-theme-light', () => import('my-theme/light'));
+
+// Option 2: Import JSON theme files
 registerCustomTheme('my-theme-dark', () => import('./themes/my-theme-dark.json'));
 registerCustomTheme('my-theme-light', () => import('./themes/my-theme-light.json'));
 
-// Option 2: Fetch from a URL (for CDN-hosted themes)
+// Option 3: Fetch from a URL (for CDN-hosted themes)
 registerCustomTheme('my-theme-dark', async () => {
   const response = await fetch('/themes/my-theme-dark.json');
   return response.json();
diff --git a/bun.lock b/bun.lock
index 195db9dd7..50fc69884 100644
--- a/bun.lock
+++ b/bun.lock
@@ -232,7 +232,7 @@
     "@octokit/rest": "22.0.0",
     "@pierre/icons": "0.1.0",
     "@pierre/storage": "0.0.10",
-    "@pierre/theme": "0.0.22",
+    "@pierre/theme": "0.0.28",
     "@playwright/test": "1.51.1",
     "@radix-ui/react-avatar": "1.1.10",
     "@radix-ui/react-dialog": "1.1.15",
@@ -609,7 +609,7 @@
 
     "@pierre/storage-elements-next": ["@pierre/storage-elements-next@workspace:packages/storage-elements-next"],
 
-    "@pierre/theme": ["@pierre/theme@0.0.22", "", {}, "sha512-ePUIdQRNGjrveELTU7fY89Xa7YGHHEy5Po5jQy/18lm32eRn96+tnYJEtFooGdffrx55KBUtOXfvVy/7LDFFhA=="],
+    "@pierre/theme": ["@pierre/theme@0.0.28", "", {}, "sha512-1j/H/fECBuc9dEvntdWI+l435HZapw+RCJTlqCA6BboQ5TjlnE005j/ROWutXIs8aq5OAc82JI2Kwk4A1WWBgw=="],
 
     "@pierre/trees": ["@pierre/trees@workspace:packages/trees"],
 
diff --git a/bunfig.toml b/bunfig.toml
index 36d054258..116ebea62 100644
--- a/bunfig.toml
+++ b/bunfig.toml
@@ -1,4 +1,4 @@
 [install]
 
 minimumReleaseAge = 604800 # 7 days in seconds
-minimumReleaseAgeExcludes = ["@types/bun"]
+minimumReleaseAgeExcludes = ["@types/bun", "@pierre/theme"]
diff --git a/package.json b/package.json
index 775d357be..c8c9bd99e 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
       "@octokit/rest": "22.0.0",
       "@pierre/icons": "0.1.0",
       "@pierre/storage": "0.0.10",
-      "@pierre/theme": "0.0.22",
+      "@pierre/theme": "0.0.28",
       "@playwright/test": "1.51.1",
       "@radix-ui/react-avatar": "1.1.10",
       "@radix-ui/react-dialog": "1.1.15",
diff --git a/packages/diffs/src/highlighter/shared_highlighter.ts b/packages/diffs/src/highlighter/shared_highlighter.ts
index 88f0ff6cc..9c9db03f6 100644
--- a/packages/diffs/src/highlighter/shared_highlighter.ts
+++ b/packages/diffs/src/highlighter/shared_highlighter.ts
@@ -128,13 +128,11 @@ export async function disposeHighlighter(): Promise<void> {
 }
 
 registerCustomTheme('pierre-dark', async () => {
-  const m = await import('@pierre/theme/themes/pierre-dark.json');
-  const theme = (m.default ?? m) as unknown as ThemeRegistrationResolved;
+  const { default: theme } = await import('@pierre/theme/pierre-dark');
   return { ...theme, name: 'pierre-dark' } as ThemeRegistrationResolved;
 });
 
 registerCustomTheme('pierre-light', async () => {
-  const m = await import('@pierre/theme/themes/pierre-light.json');
-  const theme = (m.default ?? m) as unknown as ThemeRegistrationResolved;
+  const { default: theme } = await import('@pierre/theme/pierre-light');
   return { ...theme, name: 'pierre-light' } as ThemeRegistrationResolved;
 });
diff --git a/packages/diffs/test/__snapshots__/createFileHeaderElement.test.ts.snap b/packages/diffs/test/__snapshots__/createFileHeaderElement.test.ts.snap
index 348205d4b..7e1966dcf 100644
--- a/packages/diffs/test/__snapshots__/createFileHeaderElement.test.ts.snap
+++ b/packages/diffs/test/__snapshots__/createFileHeaderElement.test.ts.snap
@@ -87,27 +87,6 @@ exports[`createFileHeaderElement renders default file header AST 1`] = `
 }
 `;
 
-exports[`createFileHeaderElement renders custom file header AST 1`] = `
-{
-  "children": [
-    {
-      "children": [],
-      "properties": {
-        "name": "header-custom",
-      },
-      "tagName": "slot",
-      "type": "element",
-    },
-  ],
-  "properties": {
-    "data-change-type": undefined,
-    "data-diffs-header": "custom",
-  },
-  "tagName": "div",
-  "type": "element",
-}
-`;
-
 exports[`createFileHeaderElement renders default renamed file header AST 1`] = `
 {
   "children": [
@@ -234,3 +213,24 @@ exports[`createFileHeaderElement renders default renamed file header AST 1`] = `
   "type": "element",
 }
 `;
+
+exports[`createFileHeaderElement renders custom file header AST 1`] = `
+{
+  "children": [
+    {
+      "children": [],
+      "properties": {
+        "name": "header-custom",
+      },
+      "tagName": "slot",
+      "type": "element",
+    },
+  ],
+  "properties": {
+    "data-change-type": undefined,
+    "data-diffs-header": "custom",
+  },
+  "tagName": "div",
+  "type": "element",
+}
+`;