Unable to customize Jodit default styles

[eneskabacaoglu]

Hi, I am using jodit-react. When I want to create a custom theme (like in the playground) I can't see any changes. Only default themes are working fine. Also please notice that the sample in the playground (summer theme) is also not working properly there.

How can I create my custom theme? Thank you

[xdan]

Try like this https://xdsoft.net/jodit/pro/docs/customisation/theme.md

[eneskabacaoglu]

Hey. Thanks for the input. I have tried the way you refer to, but still no chance. Surprisingly, if I change the theme to "dark", it works.

I am calling my custom theme's style externally, so I thought maybe it is not taking effect for some reason. So I tried something like :root {backround:red} in this style file, and it takes effect. So I know that there is nothing wrong about the style file or the way I call it. Just to give an idea, here is my setup :

The style file is exactly the same with the sample (I have also tried the use the !important flag, still no chance) :

.jodit_theme_summer {
	--jd-color-background-default: #417505 !important;
	--jd-color-border: #474025;
	--jd-color-panel: #5fd3a2;
	--jd-color-icon: #8b572a;
}

Here is my config :

const config = {
		..........
		askBeforePasteFromWord: false,
		minHeight: 200,
		buttons: 'bold,italic,underline,strikethrough,|,paragraph,brush,|,ul,ol,indent,outdent,left,right,justify,|,hr,link,table,symbol,|,image,video,file,|,undo,redo',
		buttonsMD: 'bold,italic',
		buttonsSM: 'bold,italic',
		buttonsXS: 'bold,italic',
		sizeLG: 900,
		sizeMD: 700,
		sizeSM: 400,
		sizeXS: 200,
		theme: 'summer', ---------> here I am referring the theme
	}

Then, I am using this config with my component as it should be :

<JoditEditor
      ref={editor}
      value={noteDetail}
      config={config} ---------> Here it is
      tabIndex={1} // tabIndex of textarea
      onBlur={(newContent) => setNoteDetail(newContent)} 
      onChange={(newContent) => {}}
/>

The bottom line is with the exact same setup, I have no issues for the default themes. As soon as I switch the theme to a custom one, it doesn't work.

[AgentSmith0]

Same problem here, I can't change the theme as mentioned in the docs...

[zkinsk]

The docs are incorrect on this page dark theme example

your classes need to be .jodit_theme_<your_custom_theme> not .jodit_<your_custom_theme>_theme .jodit_wysiwyg

[amerej]

Same probleme here, same setup as @eneskabacaoglu

[romarioliveira25]

That's a pro version only feature?

[polenka]

Hi Guys try import '../node_modules/jodit/build/jodit.es2018.css' jodit.min.css somehow doesn't use any css variables.

[trymeouteh]

Same here, I followed this guide and it does not work at all

https://xdsoft.net/jodit/examples/theme/dark.html

[trymeouteh]

Custom themes seem to work now in 4.0

[oylp1988]

Hi Guys try import '../node_modules/jodit/build/jodit.es2018.css' jodit.min.css somehow doesn't use any css variables.

This approach works. Thx @polenka