Stately主题 让TinyMCE 5编辑器适配主题颜色

Geticer 6月前 987

111

在Stately主题 1.0.27版中,以下所述的CSS已经内置,无需再次添加。


将以下CSS代码放在主题设置的“自定义代码→自定义CSS”区域即可。

.tox .tox-toolbar-overlord,.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary {
	background-image:none!important ;
	background-color:rgb(var(--card-background-rgb))!important ;
}
.tox .tox-tbtn svg {
	fill:var(--bs-body-color)!important ;
}
.tox .tox-tbtn {
	color:var(--bs-body-color)!important ;
}
.tox-toolbar__group {
	border-color:rgba(var(--bs-body-color-rgb),0.5) !important ;
}
.tox-tinymce {
	border-color:transparent !important ;
}
.tox .tox-statusbar {
	border-color:rgba(var(--bs-body-color-rgb),0.5)!important ;
	background-color:rgb(var(--card-background-rgb))!important ;
	color:var(--bs-body-color)!important ;
}
.tox .tox-statusbar a,.tox .tox-statusbar__path-item,.tox .tox-statusbar__wordcount {
	color:rgba(var(--bs-body-color-rgb),0.5)!important ;
}
.tox .tox-tbtn:hover {
	background:rgba(var(--bs-body-color-rgb),0.1)!important ;
	color:var(--bs-primary)!important ;
}
.tox .tox-tbtn:focus {
	background:rgba(var(--bs-body-color-rgb),0.2)!important ;
}
.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
	color:var(--bs-primary)!important ;
}
.tox .tox-tbtn:active {
	background:rgba(var(--bs-body-color-rgb),0.3)!important ;
	color:var(--bs-primary)!important ;
}
.tox .tox-tbtn:hover svg,.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg,.tox .tox-tbtn:active svg {
	fill:var(--bs-primary)!important ;
}
.tox .tox-menu {
	border-color:rgba(var(--bs-body-color-rgb),0.5)!important ;
	background-color:rgb(var(--card-background-rgb))!important ;
	color:var(--bs-body-color)!important ;
}
.tox .tox-collection__item {
	color:var(--bs-body-color)!important ;
}
.tox .tox-collection--list .tox-collection__item--active {
	background-color:var(--bs-gray-100)!important ;
}
.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
	color:var(--bs-body-color-bright)!important ;
}
.tox .tox-collection--list .tox-collection__item--enabled {
	background-color:var(--bs-gray-200)!important ;
	color:var(--bs-primary)!important ;
}
.tox.tox-tinymce-aux .tox-toolbar__overflow {
	border-color:rgba(var(--bs-body-color-rgb),0.5)!important ;
	background-color:rgb(var(--card-background-rgb))!important ;
	color:var(--bs-body-color)!important ;
}
.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover {
	background-color:var(--bs-gray-200)!important ;
	color:var(--bs-primary)!important ;
}
.tox .tox-tbtn--enabled svg {
	fill:var(--bs-primary)!important ;
}

.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
    background-color: rgba(var(--bs-primary-rgb),0.5)!important ;
    border-color: rgba(var(--bs-primary-rgb),0.5)!important ;
}

.tox .tox-insert-table-picker>div {
    border-color: rgba(var(--bs-body-color-rgb),.5)!important ;
}

.tox .tox-edit-area__iframe {
	/* background-color:rgb(var(--card-background-rgb))!important ; */
}

  如果不好使的话,可以适当增加“!important”。

也许有人能琢磨出如何更改“.tox-edit-area__iframe”的颜色……

最新回复 (0)
返回
发新帖