TinyMCE + DaisyUi

[Rodolphe-dev]

Hello,

DaisyUi can overcome the css of the skin TinyMCE or i will need to put the color: var; background-color: var; and put them inside the skin of TinyMCE ?
I know i can put some css file inside the editor and maybe overcome the result but i got a custom theme with daisyui and i am not able to find it

Any help would be loved thanks

[saadeghi]

TinyMCE has its own styles, from browser devtools you can find how colors are applied and then you can set daisyUI colors for those selectors in your CSS.
For example, I see there's a selector like

.tox .tox-toolbar__primary {
  background-color: #fff;
}

You can change it to daisyUI color base-100 like this:

.tox .tox-toolbar__primary {
  background-color: oklch(var(--b1));
}

Or for icons in toolbar, you can set daisyUI color base-content

.tox .tox-tbtn svg {
  fill: #222f3e;
}

.tox .tox-tbtn svg {
  fill: oklch(var(--bc));
}

Same method for other colors…

Let me know if you have a question.

This way, TinyMCE components can use daisyUI colors and it will change color based on your daisyUI theme