Is it possible to change the color of the toolbar?

[srinivasayush]

Hi,

I wanted to ask whether there is a way to change the color of the editor toolbar (created by using the toolbar plugin). I tried using Tailwind CSS to style the div that wrapped the toolbar components like so:

toolbarContents: () => ( <div className='w-full h-full -m-2 flex flex-row text-white bg-black'><UndoRedo /><BoldItalicUnderlineToggles /></div>)

Unfortunately, this did not work completely, and the original toolbar with the white/grey color still appeared behind the black div.

. I also tried setting values of the radix ui css color variables and applying these classes to the MDXEditor via prop contentEditableClassName. However, I think contentEditableClassName only targets the actual text area of the editor and not the toolbar (I saw this behaviour using inspect element).

So, is there a way to change the color of the existing provided toolbar, or will I have to style my own toolbar?

Thanks so much for any answers. I would also like to think the project's creator/maintainer for such amazing open source work.

[petyosi]

That's a good question. The editor supports theming, but I have not gotten to the moment of documenting it properly.

The component accepts className property, that sets the passed class to the root element. From there on, you can use (as you correctly guessed) the CSS variables to theme the editor (including the dialogs and the toolbar). See how the class is set here:

editor/src/examples/toolbar.tsx

Lines 52 to 54 in a152e8a

	export const CustomTheming = () => {
	return <MDXEditor className="dark-theme dark-editor" markdown={kitchenSinkMarkdown} plugins={ALL_PLUGINS} />
	}

Then, check the respective CSS styling (which happens to be a dark theme).

[springyboy]

Hi,

I'm also interested in changing the style of the radix toolbar used but I don't see how this can be achieved from from the above. For example I'd like to remove the border-radius and adjust padding.

Appreciate any pointers.

[petyosi]

@springyboy - check the full list of the variables you can override, including the border radius: https://github.com/mdx-editor/editor/blob/main/src/styles/ui.module.css#L118-L124.

[springyboy]

Sorry, new to react but still couldn't see how to resolve this. Just wanted to remove the border radius, the css file you pointed me to is over 1k lines long. Just wanted the equivalent of this;

._toolbarRoot_1g25u_137 {
	border-radius: 0;
}

[yassersaidi]

Add .mdxeditor class first, like this:
.mdxeditor ._toolbarRoot_1g25u_137 { border-radius: 0; }

[kidCaulfield]

I just saw this thread as I am working on editing the toolbar right now and just wanted to mention there is a much more effective way to style the toolbar.

The toolbarPlugin has a param called toolbarClassName you can apply css class names to control the styles of the toolbar. All you need to do is create a css file and make a custom class for the toolbar then apply the class name like this toolbarPlugin({toolbarClassName: 'rich-text-toolbar'}) in the plugins prop on the MDXEditor component. Not sure if it works with tailwind classnames, but it might. Can someone confirm this?

Here's an example of using this in the MDXEditor Component:

import './mdx-editor-styles.css';

{/* ...all your other React component code */}

        <MDXEditor
          ref={richTextInput}
          onChange={handleRichText}
          markdown={data?.content || ''}
          plugins={[
            headingsPlugin(),
            linkPlugin(),
            linkDialogPlugin(),
            toolbarPlugin({
              toolbarClassName: 'rich-text-toolbar',
              toolbarContents: () => (
                <>
                  <UndoRedo />
                  <BoldItalicUnderlineToggles />
                  <CreateLink />
                </>
              ),
            }),
          ]}
        />

Css file 'mdx-editor-styles.css':

.rich-text-toolbar {
  border-radius: 5px 5px 0px 0px;
  background-color: white;
}