Monaco-editor-themes NPM

Installation

npm install monaco-editor-themes

Usage

import * as monaco from "monaco-editor";
import Themes from "monaco-editor-themes";

// register themes into editor
Themes.register("light-theme-name-or-whatever", Themes.themes.light.github);
Themes.register("dark-theme-name-or-whatever", Themes.themes.dark.darcula);

const dom = undefined; // DOM element mounted by editor
const mode = "light"; // variables that can be toggled
// create editor with theme defined
monaco.editor.create(dom, {
  data: "foo",
  language: "javascript",
  theme: mode === "light" ? "light-theme-name-or-whatever" : "dark-theme-name-or-whatever",
});

Themes

Light

Name	Repository	About
atom	vscode-theme-onelight	VSCode Theme based on Atom's One Light theme.
github	github-vscode-theme	GitHub's VS Code themes.
material	vsc-material-theme	Material Theme, the most epic theme for Visual Studio Code.

Dark

Name	Repository	About
atom	vscode-theme-onedark	VSCode Theme based on Atom's One Dark theme.
darcula	vscode-theme-darcula	A theme for Visual Studio Code based on Darcula theme from Jetbrains IDEs.
github	github-vscode-theme	GitHub's VS Code themes.
material	vsc-material-theme	Material Theme, the most epic theme for Visual Studio Code.
monokai-pro	monokai-pro-vscode	A color scheme, customized user interface theme and complete icon set for Visual Studio Code.
one-dark-pro	OneDark-Pro	Atom's iconic One Dark theme for Visual Studio Code.

Contributing

Clone code.

git clone git@github.com:dongchengjie/monaco-editor-themes.git

Install dependencies.

npm install

Place your vscode theme files under the vscode directory. You can export your current theme file by pressing Ctrl + Shift + P and executing the generateColorTheme command.
Execute the build script, and the output will be located in the themes directory.

npm run build

License

1 year ago

1 year ago