From 4af4add6b0f319392e26886b971e5435d4ae1abf Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Wed, 7 Dec 2022 13:19:02 +0800 Subject: [PATCH] feat(theme): add TokyoNight theme. --- core/README.md | 1 + themes/all/README.md | 1 + themes/all/package.json | 1 + themes/all/src/index.ts | 1 + themes/theme/README.md | 6 ++ themes/tokyo-night/README.md | 97 +++++++++++++++++++++++++++++ themes/tokyo-night/package.json | 41 ++++++++++++ themes/tokyo-night/src/index.ts | 46 ++++++++++++++ themes/tokyo-night/tsconfig.json | 9 +++ www/package.json | 1 + www/src/pages/theme/themes/Datas.ts | 4 ++ 11 files changed, 208 insertions(+) create mode 100644 themes/tokyo-night/README.md create mode 100644 themes/tokyo-night/package.json create mode 100644 themes/tokyo-night/src/index.ts create mode 100644 themes/tokyo-night/tsconfig.json diff --git a/core/README.md b/core/README.md index 4733fadfb..121309e4d 100644 --- a/core/README.md +++ b/core/README.md @@ -74,6 +74,7 @@ npm install @uiw/react-codemirror --save | `@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-tokyo-night` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night) | | `@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 efd599457..b272689be 100644 --- a/themes/all/README.md +++ b/themes/all/README.md @@ -77,6 +77,7 @@ 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-tokyo-night'; 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 7687950d5..66b462c2a 100644 --- a/themes/all/package.json +++ b/themes/all/package.json @@ -39,6 +39,7 @@ "@uiw/codemirror-theme-okaidia": "4.18.2", "@uiw/codemirror-theme-solarized": "4.18.2", "@uiw/codemirror-theme-sublime": "4.18.2", + "@uiw/codemirror-theme-tokyo-night": "4.18.2", "@uiw/codemirror-theme-vscode": "4.18.2", "@uiw/codemirror-theme-xcode": "4.18.2", "@uiw/codemirror-themes": "4.18.2" diff --git a/themes/all/src/index.ts b/themes/all/src/index.ts index 55e7c21ca..0597912a9 100644 --- a/themes/all/src/index.ts +++ b/themes/all/src/index.ts @@ -16,5 +16,6 @@ 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-tokyo-night'; export * from '@uiw/codemirror-theme-vscode'; export * from '@uiw/codemirror-theme-xcode'; diff --git a/themes/theme/README.md b/themes/theme/README.md index b930ce949..9610f0a9f 100644 --- a/themes/theme/README.md +++ b/themes/theme/README.md @@ -238,6 +238,12 @@ export default App; codemirror-theme-sublime +**tokyo-night** + + + codemirror-theme-tokyo-night + + **vscode** diff --git a/themes/tokyo-night/README.md b/themes/tokyo-night/README.md new file mode 100644 index 000000000..b70d43be4 --- /dev/null +++ b/themes/tokyo-night/README.md @@ -0,0 +1,97 @@ + + +# TokyoNight Theme + + + +[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) + + + codemirror-theme-tokyo-night + + +## Install + +```bash +npm install @uiw/codemirror-theme-tokyo-night --save +``` + +```jsx +import { tags as t } from '@lezer/highlight'; +import { tokyoNight, tokyoNightInit } from '@uiw/codemirror-theme-tokyo-night'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const tokyoNightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const tokyoNight: import('@codemirror/state').Extension; +``` + +## Usage + +```jsx +import CodeMirror from '@uiw/react-codemirror'; +import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'; +import { javascript } from '@codemirror/lang-javascript'; + +function App() { + return ( + { + console.log('value:', value); + }} + /> + ); +} +export default App; +``` + +```js +import { EditorView } from '@codemirror/view'; +import { EditorState } from '@codemirror/state'; +import { javascript } from '@codemirror/lang-javascript'; +import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'; + +const state = EditorState.create({ + doc: 'my source code', + extensions: [tokyoNight, 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/tokyo-night/package.json b/themes/tokyo-night/package.json new file mode 100644 index 000000000..c65c19732 --- /dev/null +++ b/themes/tokyo-night/package.json @@ -0,0 +1,41 @@ +{ + "name": "@uiw/codemirror-theme-tokyo-night", + "version": "4.18.2", + "description": "Theme tokyo-night for CodeMirror.", + "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night", + "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.18.2" + }, + "keywords": [ + "codemirror", + "codemirror6", + "theme", + "tokyo-night", + "syntax", + "ide", + "code" + ], + "jest": { + "coverageReporters": [ + "lcov", + "json-summary" + ] + } +} diff --git a/themes/tokyo-night/src/index.ts b/themes/tokyo-night/src/index.ts new file mode 100644 index 000000000..0c7c3a082 --- /dev/null +++ b/themes/tokyo-night/src/index.ts @@ -0,0 +1,46 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const tokyoNightInit = (options?: CreateThemeOptions) => { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + background: '#1a1b26', + foreground: '#787c99', + caret: '#c0caf5', + selection: '#515c7e40', + selectionMatch: '#16161e', + gutterBackground: '#1a1b26', + gutterForeground: '#787c99', + gutterBorder: 'transparent', + lineHighlight: '#1e202e', + ...settings, + }, + styles: [ + { tag: t.keyword, color: '#bb9af7' }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: '#c0caf5' }, + { tag: [t.propertyName], color: '#7aa2f7' }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ece6a' }, + { tag: [t.function(t.variableName), t.labelName], color: '#7aa2f7' }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#bb9af7' }, + { tag: [t.definition(t.name), t.separator], color: '#c0caf5' }, + { tag: [t.className], color: '#c0caf5' }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ff9e64' }, + { tag: [t.typeName], color: '#0db9d7' }, + { tag: [t.operator, t.operatorKeyword], color: '#bb9af7' }, + { tag: [t.url, t.escape, t.regexp, t.link], color: '#b4f9f8' }, + { tag: [t.meta, t.comment], color: '#444b6a' }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: '#89ddff' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c0caf5' }, + { tag: t.invalid, color: '#ff5370' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ...styles, + ], + }); +}; + +export const tokyoNight = tokyoNightInit(); diff --git a/themes/tokyo-night/tsconfig.json b/themes/tokyo-night/tsconfig.json new file mode 100644 index 000000000..d72ec3d49 --- /dev/null +++ b/themes/tokyo-night/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig", + "include": ["src"], + "compilerOptions": { + "outDir": "./cjs", + "baseUrl": ".", + "noEmit": false + } +} diff --git a/www/package.json b/www/package.json index 06e9f90fe..9797fae99 100644 --- a/www/package.json +++ b/www/package.json @@ -61,6 +61,7 @@ "@uiw/codemirror-theme-okaidia": "4.18.2", "@uiw/codemirror-theme-solarized": "4.18.2", "@uiw/codemirror-theme-sublime": "4.18.2", + "@uiw/codemirror-theme-tokyo-night": "4.18.2", "@uiw/codemirror-theme-vscode": "4.18.2", "@uiw/codemirror-theme-xcode": "4.18.2", "@uiw/codemirror-themes": "4.18.2", diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index 256d6499e..9c388a5ae 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -16,6 +16,7 @@ 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'; +import tokyoNightMd from '@uiw/codemirror-theme-tokyo-night/README.md'; import vscodeMd from '@uiw/codemirror-theme-vscode/README.md'; import xcodeMd from '@uiw/codemirror-theme-xcode/README.md'; @@ -38,6 +39,7 @@ 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 { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'; import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode'; export const mdSource = { @@ -63,6 +65,7 @@ export const mdSource = { solarizedLight: solarizedMd.source, solarizedDark: solarizedMd.source, sublime: sublimeMd.source, + tokyoNight: tokyoNightMd.source, vscodeDark: vscodeMd.source, xcodeLight: xcodeMd.source, xcodeDark: xcodeMd.source, @@ -91,6 +94,7 @@ export const themeData = { solarizedLight, solarizedDark, sublime, + tokyoNight, vscodeDark, xcodeLight, xcodeDark,