diff --git a/core/README.md b/core/README.md index f0f5769cc..7c494b39c 100644 --- a/core/README.md +++ b/core/README.md @@ -67,6 +67,7 @@ npm install @uiw/react-codemirror --save | `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material) | | `@uiw/codemirror-theme-nord` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-nord.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/nord) | | `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-okaidia.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) | +| `@uiw/codemirror-theme-solarized` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-solarized.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-solarized.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark) | | `@uiw/codemirror-theme-sublime` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-sublime.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-sublime.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/sublime) | | `@uiw/codemirror-theme-vscode` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-vscode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-vscode.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/vscode) | | `@uiw/codemirror-theme-xcode` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-xcode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-xcode) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-xcode.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-xcode) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/xcode) | diff --git a/themes/all/README.md b/themes/all/README.md index 9c4a21a0a..aedbbb05c 100644 --- a/themes/all/README.md +++ b/themes/all/README.md @@ -73,6 +73,7 @@ export * from '@uiw/codemirror-theme-gruvbox-dark'; export * from '@uiw/codemirror-theme-material'; export * from '@uiw/codemirror-theme-nord'; export * from '@uiw/codemirror-theme-okaidia'; +export * from '@uiw/codemirror-theme-solarized'; export * from '@uiw/codemirror-theme-sublime'; export * from '@uiw/codemirror-theme-vscode'; export * from '@uiw/codemirror-theme-xcode'; diff --git a/themes/all/package.json b/themes/all/package.json index 1db0cbc94..af129172f 100644 --- a/themes/all/package.json +++ b/themes/all/package.json @@ -35,6 +35,7 @@ "@uiw/codemirror-theme-material": "4.16.0", "@uiw/codemirror-theme-nord": "4.16.0", "@uiw/codemirror-theme-okaidia": "4.16.0", + "@uiw/codemirror-theme-solarized": "4.16.0", "@uiw/codemirror-theme-sublime": "4.16.0", "@uiw/codemirror-theme-vscode": "4.16.0", "@uiw/codemirror-theme-xcode": "4.16.0", diff --git a/themes/all/src/index.ts b/themes/all/src/index.ts index 53071a7d2..f814177f8 100644 --- a/themes/all/src/index.ts +++ b/themes/all/src/index.ts @@ -12,6 +12,7 @@ export * from '@uiw/codemirror-theme-gruvbox-dark'; export * from '@uiw/codemirror-theme-material'; export * from '@uiw/codemirror-theme-nord'; export * from '@uiw/codemirror-theme-okaidia'; +export * from '@uiw/codemirror-theme-solarized'; export * from '@uiw/codemirror-theme-sublime'; export * from '@uiw/codemirror-theme-vscode'; export * from '@uiw/codemirror-theme-xcode'; diff --git a/themes/material/README.md b/themes/material/README.md index 87b339307..64f6dfe61 100644 --- a/themes/material/README.md +++ b/themes/material/README.md @@ -6,6 +6,8 @@ [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) +This package implements the [Material](https://material.io/tools/color/) Dark theme for the CodeMirror code editor. + codemirror-theme-material diff --git a/themes/nord/README.md b/themes/nord/README.md index 335a80135..18b962f5d 100644 --- a/themes/nord/README.md +++ b/themes/nord/README.md @@ -6,6 +6,8 @@ [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) +This package implements the [nord theme](https://www.nordtheme.com/) for the CodeMirror code editor. + codemirror-theme-nord diff --git a/themes/solarized/README.md b/themes/solarized/README.md new file mode 100644 index 000000000..21ebfbfcb --- /dev/null +++ b/themes/solarized/README.md @@ -0,0 +1,74 @@ + + +# Solarized Theme + + + +[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-solarized.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) + +This package implements the [Solarized](https://ethanschoonover.com/solarized/) theme for the CodeMirror code editor. + + + codemirror-theme-solarized + + + + codemirror-theme-solarized + + +## Install + +```bash +npm install @uiw/codemirror-theme-solarized --save +``` + +## Usage + +```jsx +import CodeMirror from '@uiw/react-codemirror'; +import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized'; +import { javascript } from '@codemirror/lang-javascript'; + +function App() { + return ( + + ); +} +export default App; +``` + +```js +import { EditorView } from '@codemirror/view'; +import { EditorState } from '@codemirror/state'; +import { javascript } from '@codemirror/lang-javascript'; +import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized'; + +const state = EditorState.create({ + doc: 'my source code', + extensions: [solarizedLight, javascript({ jsx: true })], +}); + +const view = new EditorView({ + parent: document.querySelector('#editor'), + state, +}); +``` + +## Contributors + +As always, thanks to our amazing contributors! + + + + + +Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). + +## License + +Licensed under the MIT License. diff --git a/themes/solarized/package.json b/themes/solarized/package.json new file mode 100644 index 000000000..7a0f106d3 --- /dev/null +++ b/themes/solarized/package.json @@ -0,0 +1,41 @@ +{ + "name": "@uiw/codemirror-theme-solarized", + "version": "4.16.0", + "description": "Theme solarized for CodeMirror.", + "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/solarized", + "author": "kenny wong ", + "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" + ], + "dependencies": { + "@uiw/codemirror-themes": "4.16.0" + }, + "keywords": [ + "codemirror", + "codemirror6", + "theme", + "solarized", + "syntax", + "ide", + "code" + ], + "jest": { + "coverageReporters": [ + "lcov", + "json-summary" + ] + } +} diff --git a/themes/solarized/src/index.ts b/themes/solarized/src/index.ts new file mode 100644 index 000000000..0dba12333 --- /dev/null +++ b/themes/solarized/src/index.ts @@ -0,0 +1,216 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from '@uiw/codemirror-themes'; + +export const solarizedLight = createTheme({ + theme: 'light', + settings: { + background: '#fdf6e3', + foreground: '#657b83', + caret: '#586e75', + selection: '#dfd9c8', + selectionMatch: '#dfd9c8', + gutterBackground: '#00000010', + gutterForeground: '#657b83', + lineHighlight: '#dfd9c8', + }, + styles: [ + { tag: t.keyword, color: '#859900' }, + { + tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], + color: '#2aa198', + }, + { tag: [t.variableName], color: '#268bd2' }, + { tag: [t.function(t.variableName)], color: '#268bd2' }, + { tag: [t.labelName], color: '#d33682' }, + { + tag: [t.color, t.constant(t.name), t.standard(t.name)], + color: '#b58900', + }, + { tag: [t.definition(t.name), t.separator], color: '#2aa198' }, + { tag: [t.brace], color: '#d33682' }, + { + tag: [t.annotation], + color: '#d30102', + }, + { + tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], + color: '#d33682', + }, + { + tag: [t.typeName, t.className], + color: '#cb4b16', + }, + { + tag: [t.operator, t.operatorKeyword], + color: '#6c71c4', + }, + { + tag: [t.tagName], + color: '#268bd2', + }, + { + tag: [t.squareBracket], + color: '#dc322f', + }, + { + tag: [t.angleBracket], + color: '#073642', + }, + { + tag: [t.attributeName], + color: '#93a1a1', + }, + { + tag: [t.regexp], + color: '#d30102', + }, + { + tag: [t.quote], + color: '#859900', + }, + { tag: [t.string], color: '#b58900' }, + { + tag: t.link, + color: '#2aa198', + textDecoration: 'underline', + textUnderlinePosition: 'under', + }, + { + tag: [t.url, t.escape, t.special(t.string)], + color: '#b58900', + }, + { tag: [t.meta], color: '#dc322f' }, + { tag: [t.comment], color: '#586e75', fontStyle: 'italic' }, + { tag: t.strong, fontWeight: 'bold', color: '#586e75' }, + { tag: t.emphasis, fontStyle: 'italic', color: '#859900' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.heading, fontWeight: 'bold', color: '#b58900' }, + { tag: t.heading1, fontWeight: 'bold', color: '#002b36' }, + { + tag: [t.heading2, t.heading3, t.heading4], + fontWeight: 'bold', + color: '#002b36', + }, + { + tag: [t.heading5, t.heading6], + color: '#002b36', + }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d33682' }, + { + tag: [t.processingInstruction, t.inserted, t.contentSeparator], + color: '#dc322f', + }, + { + tag: [t.contentSeparator], + color: '#b58900', + }, + { tag: t.invalid, color: '#073642', borderBottom: `1px dotted #dc322f` }, + ], +}); + +export const solarizedDark = createTheme({ + theme: 'dark', + settings: { + background: '#002b36', + foreground: '#93a1a1', + caret: '#839496', + selection: '#173541', + selectionMatch: '#aafe661a', + gutterBackground: '#00252f', + gutterForeground: '#839496', + lineHighlight: '#173541', + }, + styles: [ + { tag: t.keyword, color: '#859900' }, + { + tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], + color: '#2aa198', + }, + { tag: [t.variableName], color: '#93a1a1' }, + { tag: [t.function(t.variableName)], color: '#268bd2' }, + { tag: [t.labelName], color: '#d33682' }, + { + tag: [t.color, t.constant(t.name), t.standard(t.name)], + color: '#b58900', + }, + { tag: [t.definition(t.name), t.separator], color: '#2aa198' }, + { tag: [t.brace], color: '#d33682' }, + { + tag: [t.annotation], + color: '#d30102', + }, + { + tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], + color: '#d33682', + }, + { + tag: [t.typeName, t.className], + color: '#cb4b16', + }, + { + tag: [t.operator, t.operatorKeyword], + color: '#6c71c4', + }, + { + tag: [t.tagName], + color: '#268bd2', + }, + { + tag: [t.squareBracket], + color: '#dc322f', + }, + { + tag: [t.angleBracket], + color: '#586e75', + }, + { + tag: [t.attributeName], + color: '#93a1a1', + }, + { + tag: [t.regexp], + color: '#d30102', + }, + { + tag: [t.quote], + color: '#859900', + }, + { tag: [t.string], color: '#b58900' }, + { + tag: t.link, + color: '#2aa198', + textDecoration: 'underline', + textUnderlinePosition: 'under', + }, + { + tag: [t.url, t.escape, t.special(t.string)], + color: '#b58900', + }, + { tag: [t.meta], color: '#dc322f' }, + { tag: [t.comment], color: '#586e75', fontStyle: 'italic' }, + { tag: t.strong, fontWeight: 'bold', color: '#eee8d5' }, + { tag: t.emphasis, fontStyle: 'italic', color: '#859900' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.heading, fontWeight: 'bold', color: '#b58900' }, + { tag: t.heading1, fontWeight: 'bold', color: '#fdf6e3' }, + { + tag: [t.heading2, t.heading3, t.heading4], + fontWeight: 'bold', + color: '#eee8d5', + }, + { + tag: [t.heading5, t.heading6], + color: '#eee8d5', + }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d33682' }, + { + tag: [t.processingInstruction, t.inserted, t.contentSeparator], + color: '#dc322f', + }, + { + tag: [t.contentSeparator], + color: '#b58900', + }, + { tag: t.invalid, color: '#586e75', borderBottom: `1px dotted #dc322f` }, + ], +}); diff --git a/themes/solarized/tsconfig.json b/themes/solarized/tsconfig.json new file mode 100644 index 000000000..d72ec3d49 --- /dev/null +++ b/themes/solarized/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig", + "include": ["src"], + "compilerOptions": { + "outDir": "./cjs", + "baseUrl": ".", + "noEmit": false + } +} diff --git a/themes/theme/README.md b/themes/theme/README.md index 483788c0a..51271e01d 100644 --- a/themes/theme/README.md +++ b/themes/theme/README.md @@ -210,6 +210,16 @@ export default App; codemirror-theme-okaidia +**solarized** + + + codemirror-theme-solarized + + + + codemirror-theme-solarized + + **sublime** diff --git a/www/package.json b/www/package.json index 81ef0aba7..e56318788 100644 --- a/www/package.json +++ b/www/package.json @@ -57,6 +57,7 @@ "@uiw/codemirror-theme-material": "4.16.0", "@uiw/codemirror-theme-nord": "4.16.0", "@uiw/codemirror-theme-okaidia": "4.16.0", + "@uiw/codemirror-theme-solarized": "4.16.0", "@uiw/codemirror-theme-sublime": "4.16.0", "@uiw/codemirror-theme-vscode": "4.16.0", "@uiw/codemirror-theme-xcode": "4.16.0", diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index 4e63bc6e6..72617e487 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -2,7 +2,6 @@ import abcdefMd from '@uiw/codemirror-theme-abcdef/README.md'; import androidstudioMd from '@uiw/codemirror-theme-androidstudio/README.md'; import atomoneMd from '@uiw/codemirror-theme-atomone/README.md'; import bbeditMd from '@uiw/codemirror-theme-bbedit/README.md'; -import okaidiaMd from '@uiw/codemirror-theme-okaidia/README.md'; import draculaMd from '@uiw/codemirror-theme-dracula/README.md'; import darculaMd from '@uiw/codemirror-theme-darcula/README.md'; import duotoneMd from '@uiw/codemirror-theme-duotone/README.md'; @@ -10,6 +9,8 @@ import githubMd from '@uiw/codemirror-theme-github/README.md'; import gruvboxDarkMd from '@uiw/codemirror-theme-gruvbox-dark/README.md'; import materialMd from '@uiw/codemirror-theme-material/README.md'; import nordMd from '@uiw/codemirror-theme-nord/README.md'; +import okaidiaMd from '@uiw/codemirror-theme-okaidia/README.md'; +import solarizedMd from '@uiw/codemirror-theme-solarized/README.md'; import eclipseMd from '@uiw/codemirror-theme-eclipse/README.md'; import bespinMd from '@uiw/codemirror-theme-bespin/README.md'; import sublimeMd from '@uiw/codemirror-theme-sublime/README.md'; @@ -20,7 +21,6 @@ import { abcdef } from '@uiw/codemirror-theme-abcdef'; import { androidstudio } from '@uiw/codemirror-theme-androidstudio'; import { atomone } from '@uiw/codemirror-theme-atomone'; import { bbedit } from '@uiw/codemirror-theme-bbedit'; -import { okaidia } from '@uiw/codemirror-theme-okaidia'; import { dracula } from '@uiw/codemirror-theme-dracula'; import { darcula } from '@uiw/codemirror-theme-darcula'; import { eclipse } from '@uiw/codemirror-theme-eclipse'; @@ -31,6 +31,8 @@ import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone'; import { githubLight, githubDark } from '@uiw/codemirror-theme-github'; import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark'; import { nord } from '@uiw/codemirror-theme-nord'; +import { okaidia } from '@uiw/codemirror-theme-okaidia'; +import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized'; import { sublime } from '@uiw/codemirror-theme-sublime'; import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode'; @@ -52,6 +54,8 @@ export const mdSource = { material: materialMd.source, nord: nordMd.source, okaidia: okaidiaMd.source, + solarizedLight: solarizedMd.source, + solarizedDark: solarizedMd.source, sublime: sublimeMd.source, vscodeDark: vscodeMd.source, xcodeLight: xcodeMd.source, @@ -76,6 +80,8 @@ export const themeData = { material, nord, okaidia, + solarizedLight, + solarizedDark, sublime, vscodeDark, xcodeLight,