Skip to content

Commit

Permalink
feat(theme): add solarized theme.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Dec 5, 2022
1 parent 18c1977 commit d6899db
Show file tree
Hide file tree
Showing 13 changed files with 367 additions and 2 deletions.
1 change: 1 addition & 0 deletions core/README.md
Expand Up @@ -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) |
Expand Down
1 change: 1 addition & 0 deletions themes/all/README.md
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions themes/all/package.json
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions themes/all/src/index.ts
Expand Up @@ -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';
2 changes: 2 additions & 0 deletions themes/material/README.md
Expand Up @@ -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.

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
</a>
Expand Down
2 changes: 2 additions & 0 deletions themes/nord/README.md
Expand Up @@ -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.

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
</a>
Expand Down
74 changes: 74 additions & 0 deletions themes/solarized/README.md
@@ -0,0 +1,74 @@
<!--rehype:ignore:start-->

# Solarized Theme

<!--rehype:ignore:end-->

[![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.

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/light">
<img width="436" alt="codemirror-theme-solarized" src="https://user-images.githubusercontent.com/1680273/205544435-a080d1d4-6da9-4f1d-aa10-5f2207d31176.png">
</a>

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark">
<img width="436" alt="codemirror-theme-solarized" src="https://user-images.githubusercontent.com/1680273/205547403-96db62c3-d061-4dee-88d0-c86ed17e7489.png">
</a>

## 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 (
<CodeMirror
value="console.log('hello world!');"
height="200px"
theme={solarizedLight}
extensions={[javascript({ jsx: true })]}
/>
);
}
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!

<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.
41 changes: 41 additions & 0 deletions 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 <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"
],
"dependencies": {
"@uiw/codemirror-themes": "4.16.0"
},
"keywords": [
"codemirror",
"codemirror6",
"theme",
"solarized",
"syntax",
"ide",
"code"
],
"jest": {
"coverageReporters": [
"lcov",
"json-summary"
]
}
}
216 changes: 216 additions & 0 deletions 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` },
],
});
9 changes: 9 additions & 0 deletions themes/solarized/tsconfig.json
@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig",
"include": ["src"],
"compilerOptions": {
"outDir": "./cjs",
"baseUrl": ".",
"noEmit": false
}
}

0 comments on commit d6899db

Please sign in to comment.