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