thememirror - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/create-theme.d.ts

 import { Extension } from '@codemirror/state';
 import { TagStyle } from '@codemirror/language';
 interface Options {
+    /**
+     * Theme variant. Determines which styles CodeMirror will apply by default.
+     */
     variant: Variant;
+    /**
+     * Settings to customize the look of the editor, like background, gutter, selection and others.
+     */
     settings: Settings;
+    /**
+     * Syntax highlighting styles.
+     */
     styles: TagStyle[];
@@ -10,9 +19,29 @@ }
 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;
@@ -19,0 +48,0 @@ }

dist/create-theme.js

@@ -17,4 +17,3 @@ import { EditorView } from '@codemirror/view';
         '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
-            backgroundColor: settings.selectionBackground,
-            color: settings.selectionForeground ?? null,
+            backgroundColor: settings.selection,
         },
@@ -21,0 +20,0 @@ '.cm-activeLine': {

dist/index.d.ts

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

dist/index.js

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

dist/themes/amy.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#7070FF',
-        selectionBackground: '#80000080',
+        selection: '#80000080',
         gutterBackground: '#200020',
@@ -13,0 +13,0 @@ gutterForeground: '#C080C0',

dist/themes/ayu-light.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#ffaa33',
-        selectionBackground: '#036dd626',
+        selection: '#036dd626',
         gutterBackground: '#fcfcfc',
@@ -13,0 +13,0 @@ gutterForeground: '#8a919966',

dist/themes/barf.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#C4C4C4',
-        selectionBackground: '#90B2D557',
+        selection: '#90B2D557',
         gutterBackground: '#15191EFA',
@@ -13,0 +13,0 @@ gutterForeground: '#aaaaaa95',

dist/themes/bespin.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#A7A7A7',
-        selectionBackground: '#DDF0FF33',
+        selection: '#DDF0FF33',
         gutterBackground: '#28211C',
@@ -13,0 +13,0 @@ gutterForeground: '#BAAE9E90',

dist/themes/birds-of-paradise.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#E6E1C4',
-        selectionBackground: '#16120E',
+        selection: '#16120E',
         gutterBackground: '#3b2627',
@@ -13,0 +13,0 @@ gutterForeground: '#E6E1C490',

dist/themes/boys-and-girls.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#E60065',
-        selectionBackground: '#E60C6559',
+        selection: '#E60C6559',
         gutterBackground: '#000205',
@@ -13,0 +13,0 @@ gutterForeground: '#ffffff90',

dist/themes/clouds.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#000',
-        selectionBackground: '#BDD5FC',
+        selection: '#BDD5FC',
         gutterBackground: '#fff',
@@ -13,0 +13,0 @@ gutterForeground: '#00000070',

dist/themes/cobalt.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#FFFFFF',
-        selectionBackground: '#B36539BF',
+        selection: '#B36539BF',
         gutterBackground: '#00254b',
@@ -13,0 +13,0 @@ gutterForeground: '#FFFFFF70',

dist/themes/cool-glow.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#FFFFFFA6',
-        selectionBackground: '#122BBB',
+        selection: '#122BBB',
         gutterBackground: '#060521',
@@ -13,0 +13,0 @@ gutterForeground: '#E0E0E090',

dist/themes/dracula.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#f8f8f0',
-        selectionBackground: '#44475a',
+        selection: '#44475a',
         gutterBackground: '#282a36',
@@ -13,0 +13,0 @@ gutterForeground: 'rgb(144, 145, 148)',

dist/themes/espresso.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#000000',
-        selectionBackground: '#80C7FF',
+        selection: '#80C7FF',
         gutterBackground: '#FFFFFF',
@@ -13,0 +13,0 @@ gutterForeground: '#00000070',

dist/themes/noctis-lilac.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#5c49e9',
-        selectionBackground: '#d5d1f2',
+        selection: '#d5d1f2',
         gutterBackground: '#f2f1f8',
@@ -13,0 +13,0 @@ gutterForeground: '#0c006b70',

dist/themes/rose-pine-dawn.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#575279',
-        selectionBackground: '#6e6a8614',
+        selection: '#6e6a8614',
         gutterBackground: '#faf4ed',
@@ -13,0 +13,0 @@ gutterForeground: '#57527970',

dist/themes/smoothy.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#000000',
-        selectionBackground: '#FFFD0054',
+        selection: '#FFFD0054',
         gutterBackground: '#FFFFFF',
@@ -13,0 +13,0 @@ gutterForeground: '#00000070',

dist/themes/solarized-light.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#000000',
-        selectionBackground: '#073642',
+        selection: '#073642',
         gutterBackground: '#fef7e5',
@@ -13,0 +13,0 @@ gutterForeground: '#586E7580',

dist/themes/tomorrow.js

@@ -10,3 +10,3 @@ import { tags as t } from '@lezer/highlight';
         caret: '#AEAFAD',
-        selectionBackground: '#D6D6D6',
+        selection: '#D6D6D6',
         gutterBackground: '#FFFFFF',
@@ -13,0 +13,0 @@ gutterForeground: '#4D4D4C80',

package.json

 {
 	"name": "thememirror",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Beautiful themes for CodeMirror",
@@ -5,0 +5,0 @@ "license": "MIT",

readme.md

@@ -190,1 +190,100 @@ # ThemeMirror [![test](https://github.com/vadimdemedes/thememirror/actions/workflows/test.yml/badge.svg)](https://github.com/vadimdemedes/thememirror/actions/workflows/test.yml)
 ```
+
+## API
+
+### createTheme(options)
+
+Create your own theme.
+
+#### options
+
+##### variant
+
+Type: `'light' | 'dark'`
+
+Theme variant. 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,
+});
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34652

increased by5.74%

Lines of code

1133

increased by2.72%

Number of lines in readme file

289

increased by52.11%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes