Notifications
Clear all

How to change the color of the TinyMCE editor?

34 Posts
6 Users
6 Reactions
1,560 Views
Posts: 18
(@systemcrack)
Eminent Member
Joined: 2 years ago

Rereading Tutrix's advice... in case the previous references didn't work, you could try this too

wpc--darklup-element

 

Reply
1 Reply
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@systemcrack  @tutrix I tried but none of them work. 😟

Reply
Posts: 18
(@systemcrack)
Eminent Member
Joined: 2 years ago

Sorry @guts, I tried for more than an hour, after installing darklup on my forum. I can't fix this. 

I give up for now...
I wonder if it wouldn't be better to assign a color that goes well with both the dark and light versions... it would save time. Or you can contact the darklup staff via email and wait for them to respond.

Reply
7 Replies
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@systemcrack Yes, WP dark mode is better but I have a paid version of their plugin.
A lot of bugs, I should have bought WP Dark Mode...

However, I have now more than 400 lines of custom CSS, spent days on this dark style. ^^

Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 7 years ago

Support Team
Posts: 4900

@guts

Please use the solution provided here: https://wpforo.com/community/postid/46394/

It should resolve the issue for you.

Reply
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@sofy Amazing, it works! Thank you!

Reply
(@cotner)
Joined: 2 years ago

Estimable Member
Posts: 126

@sofy Now I need to figure out how to use this code ONLY when WPDark Mode is activated.

Reply
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51
Sofy
 Sofy
Admin
(@sofy)
Joined: 7 years ago

Support Team
Posts: 4900

@guts 

The solution I've provided won't work in this case, since it requires theme-dependent JS code. You need to locate the button responsible for toggling the style from light to dark, add the event function, and adjust the color accordingly.

tinyMCE.activeEditor.dom.addStyle('body{background-color: #000000 !important; color: #FFFFFF !important;}');
tinyMCE.activeEditor.editorContainer.querySelector('.mce-statusbar').style.backgroundColor = '#000000';
tinyMCE.activeEditor.editorContainer.querySelector('.mce-statusbar').style.color = '#ffffff';

 

Reply
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@sofy

Thank you, but could you please provide more details?

I'm unsure which file I need to edit, and I didn't fully grasp the point you were making.

 

Reply
Tutrix
Posts: 1495
(@tutrix)
Noble Member
Joined: 5 years ago

@guts 

try

background-color: transparent;

instead of

background-color: #ced9e6;

and use this css code

#wpforo #wpforo-wrap .wpf-field .wpf-field-wrap .mce-tinymce.mce-container.mce-panel {
  border: 1px solid #dddddd !important;
}
div.mce-panel {
  background:transparent !important;
}
Reply
1 Reply
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@tutrix

Thank you, Tetrix, I appreciate your assistance. The functionality is working well.

However, my current concern pertains to the color when typing in the editor, as it appears black on the dark theme.

This issue doesn't occur on the light

Reply
Tutrix
Posts: 1495
(@tutrix)
Noble Member
Joined: 5 years ago

@guts 

use

color: #99999;

that is readable in dark and light 😉 

Reply
3 Replies
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@tutrix

I've attempted modifications on all the classes mentioned above and even in the template functions.php, but the changes are not taking effect.

Could you please provide me with the specific class that needs to be?

Reply
Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1495

@guts 

add to body script

body {background-color: transparent; color: #999999;}

or !important

Reply
 guts
(@guts)
Joined: 11 months ago

Trusted Member
Posts: 51

@tutrix It works, thank you very much Tutrix.

Reply
Posts: 126
(@cotner)
Estimable Member
Joined: 2 years ago

I am getting more confused.... 🤣 🤣 🤣 

For WP Dark Mode we do what? And Where?

Reply
Page 3 / 3