How can I override the default embedded style with id="tinyMceStyle"?

Hi all, I'm trying to make a dark themed toolbar. I'm half way there:

But when I switch to the WYSIWYG viewer, the toolbar reverts to the white theme. I've partially styled it so-far, but hit a road block:

There is an embedded style declaration in the WYSIWYG page with an id of tinyMceStyle. The selector I'm trying to override is this:

   .tox .tox-tbtn,
   .tox .tox-tbtn svg,
   .tox .tox-dialog__header,
   .tox .tox-button--icon .tox-icon svg,
   .tox .tox-button.tox-button--icon .tox-icon svg,
   .tox textarea,
   .tox input,
   .tox .tox-label,
   .tox .tox-toolbar-label {
      color: #738598 !important;
      fill: #738598 !important;
   }

It's making it impossible to change the toolbar icons to white to match the dark background.

Here's the full embed:

<style id="tinyMceStyle">
   .joplin-tinymce .tox-editor-header {
      padding-left: 92px;
      padding-right: 82px;
   }

   .tox .tox-toolbar,
   .tox .tox-toolbar__overflow,
   .tox .tox-toolbar__primary,
   .tox-editor-header .tox-toolbar__primary,
   .tox .tox-toolbar-overlord,
   .tox.tox-tinymce-aux .tox-toolbar__overflow,
   .tox .tox-statusbar,
   .tox .tox-dialog__header,
   .tox .tox-dialog,
   .tox textarea,
   .tox input,
   .tox .tox-dialog__footer {
      background-color: #ffffff !important;
   }

   .tox .tox-dialog__body-content {
      color: #32373f;
   }

   /*
			When creating dialogs, TinyMCE doesn't seem to offer a way to style the components or to assign classes to them.
			We want the code dialog box text area to be monospace, and since we can't target this precisely, we apply the style
			to all textareas of all dialogs. As I think only the code dialog displays a textarea that should be fine.
			*/

   .tox .tox-dialog textarea {
      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   }

   .tox .tox-dialog-wrap__backdrop {
      background-color: #ffffff !important;
      opacity: 0.7;
   }

   .tox .tox-editor-header {
      border: none;
   }

   .tox .tox-tbtn,
   .tox .tox-tbtn svg,
   .tox .tox-dialog__header,
   .tox .tox-button--icon .tox-icon svg,
   .tox .tox-button.tox-button--icon .tox-icon svg,
   .tox textarea,
   .tox input,
   .tox .tox-label,
   .tox .tox-toolbar-label {
      color: #738598 !important;
      fill: #738598 !important;
   }

   .tox .tox-statusbar a,
   .tox .tox-statusbar__path-item,
   .tox .tox-statusbar__wordcount,
   .tox .tox-statusbar__path-divider {
      color: #32373f;
      fill: #32373f;
      opacity: 0.7;
   }

   .tox .tox-tbtn--enabled,
   .tox .tox-tbtn--enabled:hover {
      background-color: #e5e5e5;
   }

   .tox .tox-button--naked:hover:not(:disabled) {
      background-color: #ffffff !important;
   }

   .tox .tox-tbtn:focus {
      background-color: #f4f5f6;
   }

   .tox .tox-tbtn:hover {
      color: undefined !important;
      fill: undefined !important;
      background-color: #cbdaf1;
   }

   .tox .tox-tbtn {
      width: 26px;
      height: 26px;
      min-width: 26px;
      min-height: 26px;
      margin: 0;
   }

   .tox .tox-tbtn[aria-haspopup="true"] {
      width: 41px;
      min-width: 41px;
   }

   .tox .tox-tbtn > span,
   .tox .tox-tbtn:active > span,
   .tox .tox-tbtn:hover > span {
      transform: scale(0.8);
   }

   .tox .tox-toolbar__primary,
   .tox .tox-toolbar__overflow {
      background: none;
      background-color: #f4f5f6 !important;
   }

   .tox-tinymce,
   .tox .tox-toolbar__group,
   .tox.tox-tinymce-aux .tox-toolbar__overflow,
   .tox .tox-dialog__footer {
      border: none !important;
   }

   .tox-tinymce {
      border-top: none !important;
   }

   .joplin-tinymce .tox-toolbar__group {
      background-color: #f4f5f6;
      padding-top: 6px;
      padding-bottom: 6px;
   }

   .joplin-tinymce .tox .tox-edit-area__iframe {
      background-color: #ffffff !important;
   }

   .joplin-tinymce .tox .tox-toolbar__primary {
      /* This component sets an empty svg with a white background as the background
				 * which needs to be cleared to prevent it from flashing white in dark themes */
      background: none;
      background-color: #f4f5f6 !important;
   }
</style>

Do any of you know of a way to override this embedded style sheet, or a way to hack it directly?

Appreciate any help.

Jay

The following CSS is showing how I styles my toolbar in rich text editor, and I think the comments are enough clear.

2 Likes

Very cool. You're definitely thorough!

Managed to solve my toolbar issues:

I think it looks nice with a bit of a dark touch.

Yay! Congrat! You made it! :confetti_ball: :confetti_ball: :confetti_ball:

I think my theme is almost penetrate into every corners of Joplin UI, so you can take a look in my css files when you some times meet a style problem. And I don't mind you just copy it if you think it useful. :smiley: :beers: