@uiw/codemirror-themes

What is @uiw/codemirror-themes?

@uiw/codemirror-themes is an npm package that provides a collection of themes for CodeMirror, a versatile text editor implemented in JavaScript for the browser. This package allows developers to easily apply different visual styles to their CodeMirror instances, enhancing the user interface and user experience of code editors embedded in web applications.

What are @uiw/codemirror-themes's main functionalities?

Applying a Theme

This code sample demonstrates how to apply the 'oneDark' theme from the @uiw/codemirror-themes package to a CodeMirror editor instance. The theme is included in the editor's extensions during the creation of the EditorState.

const { EditorView } = require('@codemirror/view');
const { basicSetup } = require('@codemirror/basic-setup');
const { EditorState } = require('@codemirror/state');
const { oneDark } = require('@uiw/codemirror-themes');

const state = EditorState.create({
  doc: 'Hello, CodeMirror!',
  extensions: [basicSetup, oneDark]
});

const view = new EditorView({
  state,
  parent: document.body
});

Switching Themes Dynamically

This code sample shows how to switch themes dynamically in a CodeMirror editor instance. Initially, the 'oneDark' theme is applied, and a function 'switchTheme' is provided to change the theme to 'dracula' or any other theme from the @uiw/codemirror-themes package.

const { EditorView } = require('@codemirror/view');
const { basicSetup } = require('@codemirror/basic-setup');
const { EditorState } = require('@codemirror/state');
const { oneDark, dracula } = require('@uiw/codemirror-themes');

let currentTheme = oneDark;

const state = EditorState.create({
  doc: 'Hello, CodeMirror!',
  extensions: [basicSetup, currentTheme]
});

const view = new EditorView({
  state,
  parent: document.body
});

function switchTheme(newTheme) {
  view.dispatch({
    effects: EditorView.reconfigure.of([basicSetup, newTheme])
  });
}

// Example usage: switchTheme(dracula);

0

README

Custom Codemirror Themes

Themes for CodeMirror.

Install

npm install @uiw/codemirror-themes --save

Usage

import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { createTheme } from '@uiw/codemirror-themes';
import { javascript } from '@codemirror/lang-javascript';
import { tags as t } from '@lezer/highlight';

const myTheme = createTheme({
  theme: 'light',
  settings: {
    background: '#ffffff',
    backgroundImage: '',
    foreground: '#75baff',
    caret: '#5d00ff',
    selection: '#036dd626',
    selectionMatch: '#036dd626',
    lineHighlight: '#8a91991a',
    gutterBorder: '1px solid #ffffff10',
    gutterBackground: '#fff',
    gutterForeground: '#8a919966',
  },
  styles: [
    { tag: t.comment, color: '#787b8099' },
    { tag: t.variableName, color: '#0080ff' },
    { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
    { tag: t.number, color: '#5c6166' },
    { tag: t.bool, color: '#5c6166' },
    { tag: t.null, color: '#5c6166' },
    { tag: t.keyword, color: '#5c6166' },
    { tag: t.operator, color: '#5c6166' },
    { tag: t.className, color: '#5c6166' },
    { tag: t.definition(t.typeName), color: '#5c6166' },
    { tag: t.typeName, color: '#5c6166' },
    { tag: t.angleBracket, color: '#5c6166' },
    { tag: t.tagName, color: '#5c6166' },
    { tag: t.attributeName, color: '#5c6166' },
  ],
});

const state = EditorState.create({
  doc: 'my source code',
  extensions: [myTheme, javascript({ jsx: true })],
});

const view = new EditorView({
  parent: document.querySelector('#editor'),
  state,
});

import CodeMirror from '@uiw/react-codemirror';
import { createTheme } from '@uiw/codemirror-themes';
import { javascript } from '@codemirror/lang-javascript';
import { tags as t } from '@lezer/highlight';

const myTheme = createTheme({
  theme: 'light',
  settings: {
    background: '#ffffff',
    backgroundImage: '',
    foreground: '#75baff',
    caret: '#5d00ff',
    selection: '#036dd626',
    selectionMatch: '#036dd626',
    lineHighlight: '#8a91991a',
    gutterBackground: '#fff',
    gutterForeground: '#8a919966',
  },
  styles: [
    { tag: t.comment, color: '#787b8099' },
    { tag: t.variableName, color: '#0080ff' },
    { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
    { tag: t.number, color: '#5c6166' },
    { tag: t.bool, color: '#5c6166' },
    { tag: t.null, color: '#5c6166' },
    { tag: t.keyword, color: '#5c6166' },
    { tag: t.operator, color: '#5c6166' },
    { tag: t.className, color: '#5c6166' },
    { tag: t.definition(t.typeName), color: '#5c6166' },
    { tag: t.typeName, color: '#5c6166' },
    { tag: t.angleBracket, color: '#5c6166' },
    { tag: t.tagName, color: '#5c6166' },
    { tag: t.attributeName, color: '#5c6166' },
  ],
});

function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      theme={myTheme}
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}
export default App;

Themes

abcdef

android studio

atom one

aura

bbedit

bespin

darcula

dracula

duotone

eclipse

github

gruvbox

material

noctis-lilac

nord

okaidia

solarized

sublime

tokyo-night

tokyo-night-day

tokyo-night-storm

vscode

xcode

Props

import { Extension } from '@codemirror/state';
import { TagStyle } from '@codemirror/language';
export interface CreateThemeOptions {
  /**
   * Theme inheritance. Determines which styles CodeMirror will apply by default.
   */
  theme: Theme;
  /**
   * Settings to customize the look of the editor, like background, gutter, selection and others.
   */
  settings: Settings;
  /** Syntax highlighting styles. */
  styles: TagStyle[];
}
type Theme = 'light' | 'dark';
export interface Settings {
  /** Editor background color. */
  background?: string;
  /** Editor background image. */
  backgroundImage?: string;
  /** Default text color. */
  foreground?: string;
  /** Caret color. */
  caret?: string;
  /** Selection background. */
  selection?: string;
  /** Selection match background. */
  selectionMatch?: string;
  /** Background of highlighted lines. */
  lineHighlight?: string;
  /** Gutter background. */
  gutterBackground?: string;
  /** Text color inside gutter. */
  gutterForeground?: string;
  /** Text active color inside gutter. */
  gutterActiveForeground?: string;
  /** Gutter right border color. */
  gutterBorder?: string;
  /** set editor font */
  fontFamily?: string;
}
export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
export default createTheme;

Related

• @uiw/react-textarea-code-editor: A simple code editor with syntax highlighting.
• @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-monacoeditor: Monaco Editor component for React.
• @uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-markdown-preview: React component preview markdown text in web browser.
• Online JSON Viewer Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.