@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',
    foreground: '#75baff',
    caret: '#5d00ff',
    selection: '#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' },
  ],
});

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',
    foreground: '#75baff',
    caret: '#5d00ff',
    selection: '#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;

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[];
}
declare type Theme = 'light' | 'dark';
interface Settings {
  /**
   * Editor background.
   */
  background: string;
  /**
   * Default text color.
   */
  foreground: string;
  /**
   * Caret color.
   */
  caret: string;
  /**
   * Selection background.
   */
  selection: string;
  /**
   * Background of highlighted lines.
   */
  lineHighlight: string;
  /**
   * Gutter background.
   */
  gutterBackground: string;
  /**
   * Text color inside gutter.
   */
  gutterForeground: string;
}
declare const createTheme: ({ dark, 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.