jodit / jodit-react

React wrapper for Jodit
MIT License
370 stars 121 forks source link

How to change toolbar background color in jodit-react #120

Open Tapudp opened 3 years ago

Tapudp commented 3 years ago

I'm using jodit-react editor. Honestly the documentation is confusing a bit. This is my current config to add custom style to the WSYIWYG editor but I'm not able to change the background-color and the text-color for the toolbar.

const config = {
        readonly: false, // all options from https://xdsoft.net/jodit/doc/
        height: '450px',
        width: '100%',
        enableDragAndDropFileToEditor: true,
        buttons: [
            'source',
            '|',
            'bold',
            'italic',
            'underline',
            '|',
            'ul',
            'ol',
            '|',
            'font',
            'fontsize',
            'brush',
            'paragraph',
            '|',
            'image',
            'table',
            'link',
            '|',
            'left',
            'center',
            'right',
            'justify',
            '|',
            'undo',
            'redo',
            '|',
            'hr',
            'eraser',
            'fullsize',
        ],
        uploader: { insertImageAsBase64URI: true },
        removeButtons: ['brush', 'file'],
        showXPathInStatusbar: false,
        showCharsCounter: false,
        showWordsCounter: false,
        toolbarAdaptive: true,
        toolbarSticky: true,
        style: {
            background: '#27272E',
            color: 'rgba(255,255,255,0.5)',
        },
    };

Also for the onChange method I wrapped the editor component inside useMemo to prevent multiple re-renders as mentioned in this thread : https://github.com/jodit/jodit-react/issues/43 #43

Current Look: image

Amarpsp10 commented 3 years ago

@Tapudp hey, u can use custom colors for toolbar, icons and border just refer it : PlayGround example for Jodit theme

or you can directly mention the theme for dark mode config = {{ theme : 'dark' }}

MustafaAgami commented 11 months ago

How to add custom colors in it.