diff --git a/themes/eclipse/README.md b/themes/eclipse/README.md
index aff1f1a47..29b6e31f8 100644
--- a/themes/eclipse/README.md
+++ b/themes/eclipse/README.md
@@ -16,6 +16,28 @@
 npm install @uiw/codemirror-theme-eclipse --save
 ```
 
+```jsx
+import { eclipse, eclipseInit } from '@uiw/codemirror-theme-github';
+
+<CodeMirror theme={eclipse} />
+<CodeMirror
+  theme={eclipseInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const eclipseInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const eclipse: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx
diff --git a/themes/eclipse/src/index.ts b/themes/eclipse/src/index.ts
index 202b448f4..77a53ceef 100644
--- a/themes/eclipse/src/index.ts
+++ b/themes/eclipse/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 eclipse = createTheme({
-  theme: 'light',
-  settings: {
-    background: '#fff',
-    foreground: '#000',
-    caret: '#FFFFFF',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#f7f7f7',
-    gutterForeground: '#999',
-    lineHighlight: '#e8f2ff',
-  },
-  styles: [
-    { tag: [t.comment], color: '#3F7F5F' },
-    { tag: [t.documentMeta], color: '#FF1717' },
-    { tag: t.keyword, color: '#7F0055', fontWeight: 'bold' },
-    { tag: t.atom, color: '#00f' },
-    { tag: t.number, color: '#164' },
-    { tag: t.propertyName, color: '#164' },
-    { tag: [t.variableName, t.definition(t.variableName)], color: '#0000C0' },
-    { tag: t.function(t.variableName), color: '#0000C0' },
-    { tag: t.string, color: '#2A00FF' },
-    { tag: t.operator, color: 'black' },
-    { tag: t.tagName, color: '#170' },
-    { tag: t.attributeName, color: '#00c' },
-    { tag: t.link, color: '#219' },
-  ],
-});
+export const eclipseInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#fff',
+      foreground: '#000',
+      caret: '#FFFFFF',
+      selection: '#d7d4f0',
+      selectionMatch: '#d7d4f0',
+      gutterBackground: '#f7f7f7',
+      gutterForeground: '#999',
+      lineHighlight: '#e8f2ff',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment], color: '#3F7F5F' },
+      { tag: [t.documentMeta], color: '#FF1717' },
+      { tag: t.keyword, color: '#7F0055', fontWeight: 'bold' },
+      { tag: t.atom, color: '#00f' },
+      { tag: t.number, color: '#164' },
+      { tag: t.propertyName, color: '#164' },
+      { tag: [t.variableName, t.definition(t.variableName)], color: '#0000C0' },
+      { tag: t.function(t.variableName), color: '#0000C0' },
+      { tag: t.string, color: '#2A00FF' },
+      { tag: t.operator, color: 'black' },
+      { tag: t.tagName, color: '#170' },
+      { tag: t.attributeName, color: '#00c' },
+      { tag: t.link, color: '#219' },
+      ...styles,
+    ],
+  });
+};
+
+export const eclipse = eclipseInit();