Style toolbar buttons

[agnislav]

Hi there.

First, thanks for the great work - it's really helpful.

Could you suggest a way for altering toolbar buttons color for both default and active states? I haven't found any way to achieve it.

Thanks.

[horacioh]

have you tried to add some styles or a different className to the button? I found that the styles applied to the buttons are done using styled-components.

the simpler way for you to achieve this now, is by creating your own button component, but I think we can also let users change the color of the buttons using inversion of control or something similar.

you can check the button component code here

[davevilela]

this link is broken. can you provide a new one ? i’m trying to implement my own buttons with chakra-ui, but the docs isn’t clear about accessing the editor state on a custom toolbar

[zbeyens]

@davevilela does that help? #945 (comment)

[zbeyens]

The current toolbar is indeed not easy to customize. We can improve it in the future. Until then, just copy its code to your project.

[deyayan]

Any news on this yet? Any easier way?

[petrogad]

I was looking to do this too; presently using JSS w/ material.

I achieved it with the following:

<BalloonToolbar className={classes.toolbar}>
	<ToolbarMark
		type={MARK_BOLD}
		icon={
			<SvgIcon>
				<path d={mdiFormatBold} />
			</SvgIcon>
		}
	/>
</BalloonToolbar>

then my JSS definition is:

tooltip: {
	zIndex: 100000,
	'& span[class*="active"]': {
		color: SYSTEM_COLORS.PRIMARY
	}
},

[richardantao]

For those using styled components:

import { FC } from "react";
import { css } from "styled-components";
import { HeadingToolbar, ToolbarProps } from "@udecode/plate-ui-toolbar";
import { Color } from "~/styles";

export const Toolbar: FC<ToolbarProps> = props => (
  <HeadingToolbar {...props}>
    {props.children}
  </HeadingToolbar>
);

<Toolbar 
  styles={{
    root: css`	
	color: ${Color.DEFAULT_BUTTON};
	
	span[class*="active"] {
	  color: ${Color.ACTIVE_BUTTOn};
	}			
    `
  }}
>

</Toolbar>

[zbeyens]

Done in v22 https://platejs.org/