From 6f5a908ef7a57ac29b82217fda0b76c50b89ff95 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Wed, 7 Dec 2022 14:28:36 +0800 Subject: [PATCH] feat(theme): add tokyoNightDay theme. --- core/README.md | 1 + themes/all/README.md | 2 + themes/all/package.json | 1 + themes/all/src/index.ts | 1 + themes/theme/README.md | 12 +++ themes/tokyo-night-day/README.md | 97 +++++++++++++++++++++++ themes/tokyo-night-day/package.json | 42 ++++++++++ themes/tokyo-night-day/src/index.ts | 46 +++++++++++ themes/tokyo-night-day/tsconfig.json | 9 +++ themes/tokyo-night-storm/README.md | 2 +- www/package.json | 1 + www/src/index.tsx | 2 +- www/src/pages/theme/themes/Datas.ts | 6 ++ www/src/pages/theme/themes/Document.tsx | 10 ++- www/src/pages/theme/themes/SiderMenus.tsx | 13 ++- www/src/pages/theme/themes/index.tsx | 20 ++++- 16 files changed, 254 insertions(+), 11 deletions(-) create mode 100644 themes/tokyo-night-day/README.md create mode 100644 themes/tokyo-night-day/package.json create mode 100644 themes/tokyo-night-day/src/index.ts create mode 100644 themes/tokyo-night-day/tsconfig.json diff --git a/core/README.md b/core/README.md index 85524acf2..2ad931319 100644 --- a/core/README.md +++ b/core/README.md @@ -76,6 +76,7 @@ npm install @uiw/react-codemirror --save | `@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-tokyo-night-storm` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night-storm.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-storm) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night-storm.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-storm) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-storm) | +| `@uiw/codemirror-theme-tokyo-night-day` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night-day.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-day) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night-day.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-day) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day) | | `@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 b272689be..ac34ae4c9 100644 --- a/themes/all/README.md +++ b/themes/all/README.md @@ -78,6 +78,8 @@ 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-tokyo-night-storm'; +export * from '@uiw/codemirror-theme-tokyo-night-day'; 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 df70f801a..d04bd4acf 100644 --- a/themes/all/package.json +++ b/themes/all/package.json @@ -41,6 +41,7 @@ "@uiw/codemirror-theme-sublime": "4.18.2", "@uiw/codemirror-theme-tokyo-night": "4.18.2", "@uiw/codemirror-theme-tokyo-night-storm": "4.18.2", + "@uiw/codemirror-theme-tokyo-night-day": "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 9f7997079..216568249 100644 --- a/themes/all/src/index.ts +++ b/themes/all/src/index.ts @@ -18,5 +18,6 @@ export * from '@uiw/codemirror-theme-solarized'; export * from '@uiw/codemirror-theme-sublime'; export * from '@uiw/codemirror-theme-tokyo-night'; export * from '@uiw/codemirror-theme-tokyo-night-storm'; +export * from '@uiw/codemirror-theme-tokyo-night-day'; 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 9610f0a9f..b9eb6c6e2 100644 --- a/themes/theme/README.md +++ b/themes/theme/README.md @@ -244,6 +244,18 @@ export default App; codemirror-theme-tokyo-night +**tokyo-night-day** + + + codemirror-theme-tokyo-night-day + + +**tokyo-night-storm** + + + codemirror-theme-tokyo-night-storm + + **vscode** diff --git a/themes/tokyo-night-day/README.md b/themes/tokyo-night-day/README.md new file mode 100644 index 000000000..d87589da0 --- /dev/null +++ b/themes/tokyo-night-day/README.md @@ -0,0 +1,97 @@ + + +# TokyoNightDay Theme + + + +[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night-day.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-day) + + + codemirror-theme-tokyo-night-day + + +## Install + +```bash +npm install @uiw/codemirror-theme-tokyo-night-day --save +``` + +```jsx +import { tags as t } from '@lezer/highlight'; +import { tokyoNightDay, tokyoNightDayInit } from '@uiw/codemirror-theme-tokyo-night-day'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const tokyoNightDayInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const tokyoNightDay: import('@codemirror/state').Extension; +``` + +## Usage + +```jsx +import CodeMirror from '@uiw/react-codemirror'; +import { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day'; +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 { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day'; + +const state = EditorState.create({ + doc: 'my source code', + extensions: [tokyoNightDay, 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-day/package.json b/themes/tokyo-night-day/package.json new file mode 100644 index 000000000..a81182586 --- /dev/null +++ b/themes/tokyo-night-day/package.json @@ -0,0 +1,42 @@ +{ + "name": "@uiw/codemirror-theme-tokyo-night-day", + "version": "4.18.2", + "description": "Theme tokyo-night-day for CodeMirror.", + "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day", + "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", + "tokyo-night-day", + "syntax", + "ide", + "code" + ], + "jest": { + "coverageReporters": [ + "lcov", + "json-summary" + ] + } +} diff --git a/themes/tokyo-night-day/src/index.ts b/themes/tokyo-night-day/src/index.ts new file mode 100644 index 000000000..a7258a591 --- /dev/null +++ b/themes/tokyo-night-day/src/index.ts @@ -0,0 +1,46 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const tokyoNightDayInit = (options?: CreateThemeOptions) => { + const { theme = 'light', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + background: '#e1e2e7', + foreground: '#3760bf', + caret: '#3760bf', + selection: '#99a7df', + selectionMatch: '#99a7df', + gutterBackground: '#e1e2e7', + gutterForeground: '#3760bf', + gutterBorder: 'transparent', + lineHighlight: '#5f5faf11', + ...settings, + }, + styles: [ + { tag: t.keyword, color: '#007197' }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: '#3760bf' }, + { tag: [t.propertyName], color: '#3760bf' }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#587539' }, + { tag: [t.function(t.variableName), t.labelName], color: '#3760bf' }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#3760bf' }, + { tag: [t.definition(t.name), t.separator], color: '#3760bf' }, + { tag: [t.className], color: '#3760bf' }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b15c00' }, + { tag: [t.typeName], color: '#007197', fontStyle: '#007197' }, + { tag: [t.operator, t.operatorKeyword], color: '#007197' }, + { tag: [t.url, t.escape, t.regexp, t.link], color: '#587539' }, + { tag: [t.meta, t.comment], color: '#848cb5' }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: '#b15c00' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#3760bf' }, + { tag: t.invalid, color: '#f52a65' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ...styles, + ], + }); +}; + +export const tokyoNightDay = tokyoNightDayInit(); diff --git a/themes/tokyo-night-day/tsconfig.json b/themes/tokyo-night-day/tsconfig.json new file mode 100644 index 000000000..d72ec3d49 --- /dev/null +++ b/themes/tokyo-night-day/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig", + "include": ["src"], + "compilerOptions": { + "outDir": "./cjs", + "baseUrl": ".", + "noEmit": false + } +} diff --git a/themes/tokyo-night-storm/README.md b/themes/tokyo-night-storm/README.md index 8311e5bba..e534452b5 100644 --- a/themes/tokyo-night-storm/README.md +++ b/themes/tokyo-night-storm/README.md @@ -7,7 +7,7 @@ [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night-storm.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-storm) - codemirror-theme-tokyo-night-storm + codemirror-theme-tokyo-night-storm ## Install diff --git a/www/package.json b/www/package.json index 90399744c..f18ec4e1b 100644 --- a/www/package.json +++ b/www/package.json @@ -63,6 +63,7 @@ "@uiw/codemirror-theme-sublime": "4.18.2", "@uiw/codemirror-theme-tokyo-night": "4.18.2", "@uiw/codemirror-theme-tokyo-night-storm": "4.18.2", + "@uiw/codemirror-theme-tokyo-night-day": "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/index.tsx b/www/src/index.tsx index 0e767250a..fdbe4bd7c 100644 --- a/www/src/index.tsx +++ b/www/src/index.tsx @@ -75,7 +75,7 @@ root.render( } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index d187af664..298d848f6 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -17,6 +17,8 @@ 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 tokyoNightStormMd from '@uiw/codemirror-theme-tokyo-night-storm/README.md'; +import tokyoNightDayMd from '@uiw/codemirror-theme-tokyo-night-day/README.md'; import vscodeMd from '@uiw/codemirror-theme-vscode/README.md'; import xcodeMd from '@uiw/codemirror-theme-xcode/README.md'; @@ -41,6 +43,7 @@ import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized'; import { sublime } from '@uiw/codemirror-theme-sublime'; import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'; import { tokyoNightStorm } from '@uiw/codemirror-theme-tokyo-night-storm'; +import { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day'; import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode'; export const mdSource = { @@ -67,6 +70,8 @@ export const mdSource = { solarizedDark: solarizedMd.source, sublime: sublimeMd.source, tokyoNight: tokyoNightMd.source, + tokyoNightStorm: tokyoNightStormMd.source, + tokyoNightDay: tokyoNightDayMd.source, vscodeDark: vscodeMd.source, xcodeLight: xcodeMd.source, xcodeDark: xcodeMd.source, @@ -97,6 +102,7 @@ export const themeData = { sublime, tokyoNight, tokyoNightStorm, + tokyoNightDay, vscodeDark, xcodeLight, xcodeDark, diff --git a/www/src/pages/theme/themes/Document.tsx b/www/src/pages/theme/themes/Document.tsx index 2b62d373d..f34ea7cf9 100644 --- a/www/src/pages/theme/themes/Document.tsx +++ b/www/src/pages/theme/themes/Document.tsx @@ -48,12 +48,18 @@ export const Document: FC> = ({ children, theme } }, [themeName]); - const [_name] = toSnakeCase(themeName) || []; + let pkgName: string | undefined = themeName; + if (/(gruvbox)/i.test(themeName || '')) { + pkgName = themeName?.replace(/\s+?(dark|light)/gi, ' dark'); + } else { + pkgName = themeName?.replace(/\s+?(dark|light)/gi, ''); + } + const _name = toSnakeCase(pkgName || '') || []; return (
{themeName} Theme - +