How to use theme from the demo

[bobbui]

Just a quick question. How to use a theme for example Github similar to what you have on the demo. I tried to set it in theme option but no luck Thanks in advance.

[suren-atoyan]

Hello @bobbui.

By default, there are two themes - light/dark. But you can define as many as you want. Here is the code segment (from the demo you've seen) where new themes are being defined.

[bobbui]

to anyone who looking for the same information, take a look at this package : https://github.com/brijeshb42/monaco-themes

[adarshaacharya]

@suren-atoyan why are you installing monaco-themes as dev dependency.. any specific reason?

[suren-atoyan]

@adarshaacharya if you mean dev dependency of demo project, so it's just a mistake, I'll fix it, thank you.

[adarshaacharya]

@suren-atoyan I've used these themes but problem is why can't we use themes having space ' ' as you have done in timeof filtering theme use only theme which doesn't have white space.

I am sorry, but I don't understand what exactly you mean

[adarshaacharya]

This section of code

Why can't we map all the themes ?

[suren-atoyan]

@adarshaacharya There was a problem with theme names, I've already fixed it, now you can use all of them.

[Prottoy2938]

I can't figure it out, can't implement a custom theme.

My Code:

import React from "react";
import { Props } from "./github-mardown.model";
import { ControlledEditor, monaco } from "@monaco-editor/react";

monaco
  .init()
  .then((monaco) => {
    import("monaco-themes/themes/Blackboard.json").then((data) => {
      monaco.editor.defineTheme("Blackboard", data);
    });
  })
  .catch((error) =>
    console.error("An error occurred during initialization of Monaco: ", error)
  );

const CodeEditor: React.FC<Props> = (props: Props) => {
  const { content, setContent } = props;

  const handleChange = (event: any, value: string) => {
    setContent(value);
  };

  return (
    <div>
      <ControlledEditor
        width="100%"
        height="calc(100vh - 154px)"
        value={content }
        onChange={handleChange}
        theme="dark"
        language="markdown"
      />
    </div>
  );
};

export default CodeEditor;

[suren-atoyan]

Hello @Prottoy2938. You load and define a theme called `Blackboard, but you use theme dark in the editor.

Here is an equivalent of your code.

[Prottoy2938]

The codesandbox you shared doesn't have the Blackboard theme. The theme in there is plain white.

Example of a Blackboard theme can be found here

What to do now?

Also, thanks for your response

[suren-atoyan]

Hey @Prottoy2938, the problem was that we tried to use a theme, which is not loaded yet. In the example, we did two jobs simultaneously. First, we tried to load monaco, after that a custom theme, and after that set it to the editor. And second, we tried to render an editor. So, when we rendered an editor, the theme not being loaded yet. I've fixed it. Please check it.

[Prottoy2938]

That fixes it. Thanks