Gruvbox CodeMirror Color Theme

A port of the retro groove Gruvbox color theme, including both flavors Dark and Light, each in three contrasts: Hard, medium (default) and Soft.

Dark Hard

Dark

Dark Soft

Light Hard

Light

Light Soft

API and usage

Both flavors expose the same API, with Hard and Soft variants alongside the default medium contrast. Only the editor background (and the panel color derived from it) changes between contrasts; the highlight style is shared.

Enable both the editor theme and the highlight style

gruvboxDarkHard: Extension;
gruvboxDark: Extension;
gruvboxDarkSoft: Extension;
gruvboxLightHard: Extension;
gruvboxLight: Extension;
gruvboxLightSoft: Extension;

import { gruvboxDark } from 'gruvbox-codemirror-theme';

new EditorView({
  state: EditorState.create({
    extensions: [gruvboxDark, ...]
    ...
  });
  ...
});

Enable just the editor theme:

gruvboxDarkHardTheme: Extension;
gruvboxDarkTheme: Extension;
gruvboxDarkSoftTheme: Extension;
gruvboxLightHardTheme: Extension;
gruvboxLightTheme: Extension;
gruvboxLightSoftTheme: Extension;

import { gruvboxDarkTheme } from 'gruvbox-codemirror-theme';

new EditorView({
  state: EditorState.create({
    extensions: [gruvboxDarkTheme, ...]
    ...
  });
  ...
});

Enable just the highlight style:

gruvboxDarkHighlightStyle: HighlightStyle;
gruvboxLightHighlightStyle: HighlightStyle;

import { syntaxHighlighting } from "@codemirror/language";
import { gruvboxDarkHighlightStyle } from 'gruvbox-codemirror-theme';

new EditorView({
  state: EditorState.create({
    extensions: [syntaxHighlighting(gruvboxDarkHighlightStyle), ...]
    ...
  });
  ...
});

Credits to morhetz for the original Vim theme and ellisonleao for the Neovim port.

License

This project is licensed under the MIT License - see the LICENSE file for details.