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;
+**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)
+
+
+
+
+
+## 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,