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

1. Clone code.

git clone [email protected]:dongchengjie/monaco-editor-themes.git

2. Install dependencies.

npm install

3. 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.

4. Execute the build script, and the output will be located in the themes directory.

npm run build

License

MIT