diff --git a/themes/bbedit/README.md b/themes/bbedit/README.md
index 88ac933d7..02cce3cee 100644
--- a/themes/bbedit/README.md
+++ b/themes/bbedit/README.md
@@ -16,6 +16,32 @@
 npm install @uiw/codemirror-theme-bbedit --save
 ```
 
+```jsx
+import { tags as t } from '@lezer/highlight';
+import { bbedit, bbeditInit } from '@uiw/codemirror-theme-bbedit';
+
+<CodeMirror theme={bbedit} />
+<CodeMirror
+  theme={bbeditInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    },
+    styles: [
+      { tag: t.comment, color: '#6272a4' },
+    ]
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const bbeditInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const bbedit: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx
diff --git a/themes/bbedit/src/index.ts b/themes/bbedit/src/index.ts
index 355555410..250d2a08a 100644
--- a/themes/bbedit/src/index.ts
+++ b/themes/bbedit/src/index.ts
@@ -1,31 +1,38 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const bbedit = createTheme({
-  theme: 'light',
-  settings: {
-    background: '#FFFFFF',
-    foreground: '#000000',
-    caret: '#FBAC52',
-    selection: '#FFD420',
-    selectionMatch: '#FFD420',
-    gutterBackground: '#f5f5f5',
-    gutterForeground: '#4D4D4C',
-    lineHighlight: '#00000012',
-  },
-  styles: [
-    { tag: [t.meta, t.comment], color: '#804000' },
-    { tag: [t.keyword, t.strong], color: '#0000FF' },
-    { tag: [t.number], color: '#FF0080' },
-    { tag: [t.string], color: '#FF0080' },
-    { tag: [t.variableName], color: '#006600' },
-    { tag: [t.escape], color: '#33CC33' },
-    { tag: [t.tagName], color: '#1C02FF' },
-    { tag: [t.heading], color: '#0C07FF' },
-    { tag: [t.quote], color: '#000000' },
-    { tag: [t.list], color: '#B90690' },
-    { tag: [t.documentMeta], color: '#888888' },
-    { tag: [t.function(t.variableName)], color: '#0000A2' },
-    { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' },
-  ],
-});
+export const bbeditInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#FFFFFF',
+      foreground: '#000000',
+      caret: '#FBAC52',
+      selection: '#FFD420',
+      selectionMatch: '#FFD420',
+      gutterBackground: '#f5f5f5',
+      gutterForeground: '#4D4D4C',
+      lineHighlight: '#00000012',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.meta, t.comment], color: '#804000' },
+      { tag: [t.keyword, t.strong], color: '#0000FF' },
+      { tag: [t.number], color: '#FF0080' },
+      { tag: [t.string], color: '#FF0080' },
+      { tag: [t.variableName], color: '#006600' },
+      { tag: [t.escape], color: '#33CC33' },
+      { tag: [t.tagName], color: '#1C02FF' },
+      { tag: [t.heading], color: '#0C07FF' },
+      { tag: [t.quote], color: '#000000' },
+      { tag: [t.list], color: '#B90690' },
+      { tag: [t.documentMeta], color: '#888888' },
+      { tag: [t.function(t.variableName)], color: '#0000A2' },
+      { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' },
+      ...styles,
+    ],
+  });
+};
+
+export const bbedit = bbeditInit();