@uiw/codemirror-themes 4.8.1

package/README.md

@@ -0,0 +1,186 @@
+# Codemirror Themes
+
+Themes for CodeMirror.
+
+## Install
+
+```bash
+npm install @uiw/codemirror-themes --save
+```
+
+## Usage
+
+```js
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { createTheme } from '@uiw/codemirror-themes';
+import { javascript } from '@codemirror/lang-javascript';
+import { tags as t } from '@lezer/highlight';
+
+const myTheme = createTheme({
+  variant: 'light',
+  settings: {
+    background: '#ffffff',
+    foreground: '#75baff',
+    caret: '#5d00ff',
+    selection: '#036dd626',
+    lineHighlight: '#8a91991a',
+    gutterBackground: '#fff',
+    gutterForeground: '#8a919966',
+  },
+  styles: [
+    { tag: t.comment, color: '#787b8099', },
+    { tag: t.variableName, color: '#0080ff', },
+    { tag: [t.string, t.special(t.brace)], color: '#5c6166', },
+    { tag: t.number, color: '#5c6166', },
+    { tag: t.bool, color: '#5c6166', },
+    { tag: t.null, color: '#5c6166', },
+    { tag: t.keyword, color: '#5c6166', },
+    { tag: t.operator, color: '#5c6166', },
+    { tag: t.className, color: '#5c6166', },
+    { tag: t.definition(t.typeName), color: '#5c6166', },
+    { tag: t.typeName, color: '#5c6166', },
+    { tag: t.angleBracket, color: '#5c6166', },
+    { tag: t.tagName, color: '#5c6166', },
+    { tag: t.attributeName, color: '#5c6166', },
+  ],
+});
+
+const state = EditorState.create({
+	doc: 'my source code',
+	extensions: [myTheme, javascript({ jsx: true })],
+});
+
+const view = new EditorView({
+	parent: document.querySelector('#editor'),
+	state,
+});
+```
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { createTheme } from '@uiw/codemirror-themes';
+import { javascript } from '@codemirror/lang-javascript';
+import { tags as t } from '@lezer/highlight';
+
+const myTheme = createTheme({
+  variant: 'light',
+  settings: {
+    background: '#ffffff',
+    foreground: '#75baff',
+    caret: '#5d00ff',
+    selection: '#036dd626',
+    lineHighlight: '#8a91991a',
+    gutterBackground: '#fff',
+    gutterForeground: '#8a919966',
+  },
+  styles: [
+    { tag: t.comment, color: '#787b8099', },
+    { tag: t.variableName, color: '#0080ff', },
+    { tag: [t.string, t.special(t.brace)], color: '#5c6166', },
+    { tag: t.number, color: '#5c6166', },
+    { tag: t.bool, color: '#5c6166', },
+    { tag: t.null, color: '#5c6166', },
+    { tag: t.keyword, color: '#5c6166', },
+    { tag: t.operator, color: '#5c6166', },
+    { tag: t.className, color: '#5c6166', },
+    { tag: t.definition(t.typeName), color: '#5c6166', },
+    { tag: t.typeName, color: '#5c6166', },
+    { tag: t.angleBracket, color: '#5c6166', },
+    { tag: t.tagName, color: '#5c6166', },
+    { tag: t.attributeName, color: '#5c6166', },
+  ],
+});
+
+function App() {
+  return (
+    <CodeMirror
+      value="console.log('hello world!');"
+      height="200px"
+      theme={myTheme}
+      extensions={[javascript({ jsx: true })]}
+      onChange={(value, viewUpdate) => {
+        console.log('value:', value);
+      }}
+    />
+  );
+}
+export default App;
+```
+
+## Props
+
+```ts
+import { Extension } from '@codemirror/state';
+import { TagStyle } from '@codemirror/language';
+export interface CreateThemeOptions {
+  /**
+   * Theme inheritance. Determines which styles CodeMirror will apply by default.
+   */
+  dark: Theme;
+  /**
+   * Settings to customize the look of the editor, like background, gutter, selection and others.
+   */
+  settings: Settings;
+  /**
+   * Syntax highlighting styles.
+   */
+  styles: TagStyle[];
+}
+declare type Theme = 'light' | 'dark';
+interface Settings {
+  /**
+   * Editor background.
+   */
+  background: string;
+  /**
+   * Default text color.
+   */
+  foreground: string;
+  /**
+   * Caret color.
+   */
+  caret: string;
+  /**
+   * Selection background.
+   */
+  selection: string;
+  /**
+   * Background of highlighted lines.
+   */
+  lineHighlight: string;
+  /**
+   * Gutter background.
+   */
+  gutterBackground: string;
+  /**
+   * Text color inside gutter.
+   */
+  gutterForeground: string;
+}
+declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
+export default createTheme;
+```
+
+### Related
+
+- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting.
+- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.
+- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
+- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
+- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
+- [Online JSON Viewer](https://github.com/uiwjs/json-viewer) Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
+</a>
+
+Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.

package/cjs/index.d.ts

@@ -0,0 +1,33 @@
+import { Extension } from '@codemirror/state';
+import { TagStyle } from '@codemirror/language';
+export interface CreateThemeOptions {
+    /**
+     * Theme inheritance. Determines which styles CodeMirror will apply by default.
+     */
+    dark: Theme;
+    /**
+     * Settings to customize the look of the editor, like background, gutter, selection and others.
+     */
+    settings: Settings;
+    /** Syntax highlighting styles. */
+    styles: TagStyle[];
+}
+declare type Theme = 'light' | 'dark';
+export interface Settings {
+    /** Editor background. */
+    background: string;
+    /** Default text color. */
+    foreground: string;
+    /** Caret color. */
+    caret: string;
+    /** Selection background. */
+    selection: string;
+    /** Background of highlighted lines. */
+    lineHighlight: string;
+    /** Gutter background. */
+    gutterBackground: string;
+    /** Text color inside gutter. */
+    gutterForeground: string;
+}
+declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
+export default createTheme;

package/cjs/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _view = require("@codemirror/view");
+
+var _language = require("@codemirror/language");
+
+var createTheme = function createTheme(_ref) {
+  var dark = _ref.dark,
+      settings = _ref.settings,
+      styles = _ref.styles;
+
+  var theme = _view.EditorView.theme({
+    '&': {
+      backgroundColor: settings.background,
+      color: settings.foreground
+    },
+    '.cm-content': {
+      caretColor: settings.caret
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: settings.caret
+    },
+    '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: settings.selection
+    },
+    '.cm-activeLine': {
+      backgroundColor: settings.lineHighlight
+    },
+    '.cm-gutters': {
+      backgroundColor: settings.gutterBackground,
+      color: settings.gutterForeground
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: settings.lineHighlight
+    }
+  }, {
+    dark: dark === 'dark'
+  });
+
+  var highlightStyle = _language.HighlightStyle.define(styles);
+
+  var extension = [theme, (0, _language.syntaxHighlighting)(highlightStyle)];
+  return extension;
+};
+
+var _default = createTheme;
+exports["default"] = _default;
+module.exports = exports.default;
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1,34 @@
+{
+  "version": 3,
+  "names": [
+    "createTheme",
+    "dark",
+    "settings",
+    "styles",
+    "theme",
+    "EditorView",
+    "backgroundColor",
+    "background",
+    "color",
+    "foreground",
+    "caretColor",
+    "caret",
+    "borderLeftColor",
+    "selection",
+    "lineHighlight",
+    "gutterBackground",
+    "gutterForeground",
+    "highlightStyle",
+    "HighlightStyle",
+    "define",
+    "extension",
+    "syntaxHighlighting"
+  ],
+  "sources": [
+    "../src/index.tsx"
+  ],
+  "sourcesContent": [
+    "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  dark: Theme;\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings;\n  /** Syntax highlighting styles. */\n  styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n  /** Editor background. */\n  background: string;\n  /** Default text color. */\n  foreground: string;\n  /** Caret color. */\n  caret: string;\n  /** Selection background. */\n  selection: string;\n  /** Background of highlighted lines. */\n  lineHighlight: string;\n  /** Gutter background. */\n  gutterBackground: string;\n  /** Text color inside gutter. */\n  gutterForeground: string;\n}\n\nconst createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {\n  const theme = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: settings.background,\n        color: settings.foreground,\n      },\n      '.cm-content': {\n        caretColor: settings.caret,\n      },\n      '.cm-cursor, .cm-dropCursor': {\n        borderLeftColor: settings.caret,\n      },\n      '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {\n        backgroundColor: settings.selection,\n      },\n      '.cm-activeLine': {\n        backgroundColor: settings.lineHighlight,\n      },\n      '.cm-gutters': {\n        backgroundColor: settings.gutterBackground,\n        color: settings.gutterForeground,\n      },\n      '.cm-activeLineGutter': {\n        backgroundColor: settings.lineHighlight,\n      },\n    },\n    {\n      dark: dark === 'dark',\n    },\n  );\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [theme, syntaxHighlighting(highlightStyle)];\n\n  return extension;\n};\n\nexport default createTheme;\n"
+  ],
+  "mappings": ";;;;;;;AAAA;;AAEA;;AAkCA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAA+D;EAAA,IAA5DC,IAA4D,QAA5DA,IAA4D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,MAA4C,QAA5CA,MAA4C;;EACjF,IAAMC,KAAK,GAAGC,gBAAA,CAAWD,KAAX,CACZ;IACE,KAAK;MACHE,eAAe,EAAEJ,QAAQ,CAACK,UADvB;MAEHC,KAAK,EAAEN,QAAQ,CAACO;IAFb,CADP;IAKE,eAAe;MACbC,UAAU,EAAER,QAAQ,CAACS;IADR,CALjB;IAQE,8BAA8B;MAC5BC,eAAe,EAAEV,QAAQ,CAACS;IADE,CARhC;IAWE,0FAA0F;MACxFL,eAAe,EAAEJ,QAAQ,CAACW;IAD8D,CAX5F;IAcE,kBAAkB;MAChBP,eAAe,EAAEJ,QAAQ,CAACY;IADV,CAdpB;IAiBE,eAAe;MACbR,eAAe,EAAEJ,QAAQ,CAACa,gBADb;MAEbP,KAAK,EAAEN,QAAQ,CAACc;IAFH,CAjBjB;IAqBE,wBAAwB;MACtBV,eAAe,EAAEJ,QAAQ,CAACY;IADJ;EArB1B,CADY,EA0BZ;IACEb,IAAI,EAAEA,IAAI,KAAK;EADjB,CA1BY,CAAd;;EA+BA,IAAMgB,cAAc,GAAGC,wBAAA,CAAeC,MAAf,CAAsBhB,MAAtB,CAAvB;;EACA,IAAMiB,SAAS,GAAG,CAAChB,KAAD,EAAQ,IAAAiB,4BAAA,EAAmBJ,cAAnB,CAAR,CAAlB;EAEA,OAAOG,SAAP;AACD,CApCD;;eAsCepB,W"
+}

package/esm/index.d.ts

@@ -0,0 +1,33 @@
+import { Extension } from '@codemirror/state';
+import { TagStyle } from '@codemirror/language';
+export interface CreateThemeOptions {
+    /**
+     * Theme inheritance. Determines which styles CodeMirror will apply by default.
+     */
+    dark: Theme;
+    /**
+     * Settings to customize the look of the editor, like background, gutter, selection and others.
+     */
+    settings: Settings;
+    /** Syntax highlighting styles. */
+    styles: TagStyle[];
+}
+declare type Theme = 'light' | 'dark';
+export interface Settings {
+    /** Editor background. */
+    background: string;
+    /** Default text color. */
+    foreground: string;
+    /** Caret color. */
+    caret: string;
+    /** Selection background. */
+    selection: string;
+    /** Background of highlighted lines. */
+    lineHighlight: string;
+    /** Gutter background. */
+    gutterBackground: string;
+    /** Text color inside gutter. */
+    gutterForeground: string;
+}
+declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
+export default createTheme;

package/esm/index.js

@@ -0,0 +1,43 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+
+var createTheme = _ref => {
+  var {
+    dark,
+    settings,
+    styles
+  } = _ref;
+  var theme = EditorView.theme({
+    '&': {
+      backgroundColor: settings.background,
+      color: settings.foreground
+    },
+    '.cm-content': {
+      caretColor: settings.caret
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: settings.caret
+    },
+    '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: settings.selection
+    },
+    '.cm-activeLine': {
+      backgroundColor: settings.lineHighlight
+    },
+    '.cm-gutters': {
+      backgroundColor: settings.gutterBackground,
+      color: settings.gutterForeground
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: settings.lineHighlight
+    }
+  }, {
+    dark: dark === 'dark'
+  });
+  var highlightStyle = HighlightStyle.define(styles);
+  var extension = [theme, syntaxHighlighting(highlightStyle)];
+  return extension;
+};
+
+export default createTheme;
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,34 @@
+{
+  "version": 3,
+  "names": [
+    "EditorView",
+    "HighlightStyle",
+    "syntaxHighlighting",
+    "createTheme",
+    "dark",
+    "settings",
+    "styles",
+    "theme",
+    "backgroundColor",
+    "background",
+    "color",
+    "foreground",
+    "caretColor",
+    "caret",
+    "borderLeftColor",
+    "selection",
+    "lineHighlight",
+    "gutterBackground",
+    "gutterForeground",
+    "highlightStyle",
+    "define",
+    "extension"
+  ],
+  "sources": [
+    "../src/index.tsx"
+  ],
+  "sourcesContent": [
+    "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  dark: Theme;\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings;\n  /** Syntax highlighting styles. */\n  styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n  /** Editor background. */\n  background: string;\n  /** Default text color. */\n  foreground: string;\n  /** Caret color. */\n  caret: string;\n  /** Selection background. */\n  selection: string;\n  /** Background of highlighted lines. */\n  lineHighlight: string;\n  /** Gutter background. */\n  gutterBackground: string;\n  /** Text color inside gutter. */\n  gutterForeground: string;\n}\n\nconst createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {\n  const theme = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: settings.background,\n        color: settings.foreground,\n      },\n      '.cm-content': {\n        caretColor: settings.caret,\n      },\n      '.cm-cursor, .cm-dropCursor': {\n        borderLeftColor: settings.caret,\n      },\n      '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {\n        backgroundColor: settings.selection,\n      },\n      '.cm-activeLine': {\n        backgroundColor: settings.lineHighlight,\n      },\n      '.cm-gutters': {\n        backgroundColor: settings.gutterBackground,\n        color: settings.gutterForeground,\n      },\n      '.cm-activeLineGutter': {\n        backgroundColor: settings.lineHighlight,\n      },\n    },\n    {\n      dark: dark === 'dark',\n    },\n  );\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [theme, syntaxHighlighting(highlightStyle)];\n\n  return extension;\n};\n\nexport default createTheme;\n"
+  ],
+  "mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D;;AAkCA,IAAMC,WAAW,GAAG,QAA+D;EAAA,IAA9D;IAAEC,IAAF;IAAQC,QAAR;IAAkBC;EAAlB,CAA8D;EACjF,IAAMC,KAAK,GAAGP,UAAU,CAACO,KAAX,CACZ;IACE,KAAK;MACHC,eAAe,EAAEH,QAAQ,CAACI,UADvB;MAEHC,KAAK,EAAEL,QAAQ,CAACM;IAFb,CADP;IAKE,eAAe;MACbC,UAAU,EAAEP,QAAQ,CAACQ;IADR,CALjB;IAQE,8BAA8B;MAC5BC,eAAe,EAAET,QAAQ,CAACQ;IADE,CARhC;IAWE,0FAA0F;MACxFL,eAAe,EAAEH,QAAQ,CAACU;IAD8D,CAX5F;IAcE,kBAAkB;MAChBP,eAAe,EAAEH,QAAQ,CAACW;IADV,CAdpB;IAiBE,eAAe;MACbR,eAAe,EAAEH,QAAQ,CAACY,gBADb;MAEbP,KAAK,EAAEL,QAAQ,CAACa;IAFH,CAjBjB;IAqBE,wBAAwB;MACtBV,eAAe,EAAEH,QAAQ,CAACW;IADJ;EArB1B,CADY,EA0BZ;IACEZ,IAAI,EAAEA,IAAI,KAAK;EADjB,CA1BY,CAAd;EA+BA,IAAMe,cAAc,GAAGlB,cAAc,CAACmB,MAAf,CAAsBd,MAAtB,CAAvB;EACA,IAAMe,SAAS,GAAG,CAACd,KAAD,EAAQL,kBAAkB,CAACiB,cAAD,CAA1B,CAAlB;EAEA,OAAOE,SAAP;AACD,CApCD;;AAsCA,eAAelB,WAAf"
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@uiw/codemirror-themes",
+  "version": "4.8.1",
+  "description": "Themes for CodeMirror.",
+  "homepage": "https://uiwjs.github.io/react-codemirror",
+  "author": "kenny wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "watch": "tsbb watch",
+    "build": "tsbb build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-codemirror.git"
+  },
+  "files": [
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "peerDependencies": {
+    "@babel/runtime": ">=7.11.0"
+  },
+  "dependencies": {
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@codemirror/state": "^6.0.0"
+  },
+  "keywords": [
+    "codemirror",
+    "codemirror6",
+    "theme",
+    "syntax",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,75 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';
+
+export interface CreateThemeOptions {
+  /**
+   * Theme inheritance. Determines which styles CodeMirror will apply by default.
+   */
+  dark: Theme;
+  /**
+   * Settings to customize the look of the editor, like background, gutter, selection and others.
+   */
+  settings: Settings;
+  /** Syntax highlighting styles. */
+  styles: TagStyle[];
+}
+
+type Theme = 'light' | 'dark';
+
+export interface Settings {
+  /** Editor background. */
+  background: string;
+  /** Default text color. */
+  foreground: string;
+  /** Caret color. */
+  caret: string;
+  /** Selection background. */
+  selection: string;
+  /** Background of highlighted lines. */
+  lineHighlight: string;
+  /** Gutter background. */
+  gutterBackground: string;
+  /** Text color inside gutter. */
+  gutterForeground: string;
+}
+
+const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {
+  const theme = EditorView.theme(
+    {
+      '&': {
+        backgroundColor: settings.background,
+        color: settings.foreground,
+      },
+      '.cm-content': {
+        caretColor: settings.caret,
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: settings.caret,
+      },
+      '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: settings.selection,
+      },
+      '.cm-activeLine': {
+        backgroundColor: settings.lineHighlight,
+      },
+      '.cm-gutters': {
+        backgroundColor: settings.gutterBackground,
+        color: settings.gutterForeground,
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: settings.lineHighlight,
+      },
+    },
+    {
+      dark: dark === 'dark',
+    },
+  );
+
+  const highlightStyle = HighlightStyle.define(styles);
+  const extension = [theme, syntaxHighlighting(highlightStyle)];
+
+  return extension;
+};
+
+export default createTheme;