diff --git a/themes/solarized/README.md b/themes/solarized/README.md index 21ebfbfcb..5dac4b175 100644 --- a/themes/solarized/README.md +++ b/themes/solarized/README.md @@ -22,6 +22,30 @@ This package implements the [Solarized](https://ethanschoonover.com/solarized/) npm install @uiw/codemirror-theme-solarized --save ``` +```jsx +import { solarizedLight, solarizedLightInit, solarizedDark, solarizedDarkInit } from '@uiw/codemirror-theme-vscode'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const solarizedLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const solarizedLight: import('@codemirror/state').Extension; +export declare const solarizedDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const solarizedDark: import('@codemirror/state').Extension; +``` + ## Usage ```jsx diff --git a/themes/solarized/src/index.ts b/themes/solarized/src/index.ts index 0dba12333..a69912f73 100644 --- a/themes/solarized/src/index.ts +++ b/themes/solarized/src/index.ts @@ -1,216 +1,230 @@ import { tags as t } from '@lezer/highlight'; -import { createTheme } from '@uiw/codemirror-themes'; +import { createTheme, CreateThemeOptions } 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 solarizedLightInit = (options?: CreateThemeOptions) => { + const { theme = 'light', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + background: '#fdf6e3', + foreground: '#657b83', + caret: '#586e75', + selection: '#dfd9c8', + selectionMatch: '#dfd9c8', + gutterBackground: '#00000010', + gutterForeground: '#657b83', + lineHighlight: '#dfd9c8', + ...settings, + }, + 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` }, + ...styles, + ], + }); +}; -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` }, - ], -}); +export const solarizedLight = solarizedLightInit(); + +export const solarizedDarkInit = (options?: CreateThemeOptions) => { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + background: '#002b36', + foreground: '#93a1a1', + caret: '#839496', + selection: '#173541', + selectionMatch: '#aafe661a', + gutterBackground: '#00252f', + gutterForeground: '#839496', + lineHighlight: '#173541', + ...settings, + }, + 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` }, + ...styles, + ], + }); +}; + +export const solarizedDark = solarizedDarkInit();