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
