Expose createTheme to create a custom theme

readme.md

@@ -187,3 +187,102 @@ _Author: Chris Kempson_
 ```js
 import {tomorrow} from 'thememirror';
 ```
+
+## API
+
+### createTheme(options)
+
+Create your own theme.
+
+#### options
+
+##### variant
+
+Type: `string`
+
+Theme variant. Can be `'light'` or `'dark'`. Determines which styles CodeMirror will apply by default.
+
+##### settings
+
+###### background
+
+Type: `string`
+
+Editor background.
+
+###### foreground
+
+Type: `string`
+
+Default text color.
+
+###### caret
+
+Type: `string`
+
+Caret color.
+
+###### selection
+
+Type: `string`
+
+Selection background.
+
+###### lineHighlight
+
+Type: `string`
+
+Background of highlighted lines.
+
+###### gutterBackground
+
+Type: `string`
+
+Gutter background.
+
+###### gutterForeground
+
+Type: `string`
+
+Text color inside gutter.
+
+##### styles
+
+Type: `TagStyle[]`
+
+Array of styles to customize syntax highlighting. See [`TagStyle`](https://codemirror.net/docs/ref/#language.TagStyle) for a list of available tags to style.
+
+```js
+import {createTheme} from 'thememirror';
+import {EditorView} from '@codemirror/view';
+import {EditorState} from '@codemirror/state';
+
+const myTheme = createTheme({
+	variant: 'dark',
+	settings: {
+		background: '#00254b',
+		foreground: '#fff',
+		caret: '#fff',
+		selectionBackground: '#b36539bf',
+		gutterBackground: '#00254b',
+		gutterForeground: '#ffffff70',
+		lineHighlight: '#00000059',
+	},
+	styles: [
+		{
+			tag: t.comment,
+			color: '#0088ff',
+		},
+	],
+});
+
+const state = EditorState.create({
+	doc: 'my source code',
+	extensions: [myTheme],
+});
+
+const view = new EditorView({
+	parent: document.querySelector('#editor'),
+	state,
+});
+```

source/create-theme.ts

@@ -7,21 +7,58 @@ import {
 } from '@codemirror/language';
 
 interface Options {
+	/**
+	 * Theme variant. Can be 'light' or 'dark'.
+	 */
 	variant: Variant;
+
+	/**
+	 * Settings to customize the look of the editor, like background, gutter, selection and others.
+	 */
 	settings: Settings;
+
+	/**
+	 * Syntax highlighting styles.
+	 */
 	styles: TagStyle[];
 }
 
 type Variant = 'light' | 'dark';
 
 interface Settings {
+	/**
+	 * Editor background.
+	 */
 	background: string;
+
+	/**
+	 * Default text color.
+	 */
 	foreground: string;
+
+	/**
+	 * Caret color.
+	 */
 	caret: string;
-	selectionBackground: string;
-	selectionForeground?: string;
+
+	/**
+	 * Selection background.
+	 */
+	selection: string;
+
+	/**
+	 * Background of highlighted lines.
+	 */
 	lineHighlight: string;
+
+	/**
+	 * Gutter background.
+	 */
 	gutterBackground: string;
+
+	/**
+	 * Text color inside gutter.
+	 */
 	gutterForeground: string;
 }
 
@@ -41,8 +78,7 @@ const createTheme = ({variant, settings, styles}: Options): Extension => {
 			},
 			'&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection':
 				{
-					backgroundColor: settings.selectionBackground,
-					color: settings.selectionForeground ?? null,
+					backgroundColor: settings.selection,
 				},
 			'.cm-activeLine': {
 				backgroundColor: settings.lineHighlight,

source/index.ts

@@ -1,3 +1,4 @@
+export {default as createTheme} from './create-theme.js';
 export * from './themes/amy.js';
 export * from './themes/ayu-light.js';
 export * from './themes/barf.js';