Nashville Plays Music

    @uiw/codemirror-themes
    TypeScript icon, indicating that this package has built-in type declarations

    4.15.1 • Public • Published

    Custom Codemirror Themes

    npm version

    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',
        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' },
      ],
    });
    
    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',
        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

    codemirror-theme-abcdef

    android studio

    codemirror-theme-androidstudio

    atom one

    codemirror-theme-androidstudio

    bbedit

    codemirror-theme-bbedit

    bespin

    codemirror-theme-bespin

    darcula

    codemirror-theme-darcula

    dracula

    codemirror-theme-dracula

    duotone

    codemirror-theme-duotone dark codemirror-theme-duotone light

    eclipse

    codemirror-theme-eclipse

    github

    codemirror-theme-github dark codemirror-theme-github light

    okaidia

    codemirror-theme-okaidia

    sublime

    codemirror-theme-sublime

    vscode

    codemirror-theme-vscode dark

    xcode

    codemirror-theme-xcode dark codemirror-theme-xcode light

    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';
    export interface Settings {
      /** Editor background. */
      background: 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;
    }
    declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
    export default createTheme;

    Related

    Contributors

    As always, thanks to our amazing contributors!

    Made with github-action-contributors.

    License

    Licensed under the MIT License.

    Install

    npm i @uiw/codemirror-themes

    DownloadsWeekly Downloads

    61,065

    Version

    4.15.1

    License

    MIT

    Unpacked Size

    32.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • uiwjs
    • wcjiang